<?xml version="1.0" encoding="utf-8"?><rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>荷戟獨彷徨</title><link>https://guanqr.com/</link><description>Guanqr's Blog</description><generator>Hugo 0.148.2 https://gohugo.io/</generator><language>zh-hant</language><managingEditor>guanqirui@zju.edu.cn (Guanqr)</managingEditor><webMaster>guanqirui@zju.edu.cn (Guanqr)</webMaster><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><lastBuildDate>Sun, 01 Mar 2026 14:01:30 +0000</lastBuildDate><atom:link rel="self" type="application/rss+xml" href="https://guanqr.com/rss.xml"/><item><title>
泥沙下的歲月</title><link>https://guanqr.com/life/ideas/the-time-buried-by-sand/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/the-time-buried-by-sand/</guid><pubDate>Fri, 20 Feb 2026 18:42:29 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>年春節我回到了開封過年。開封市區有三個火車站，開封站是老站，宋城路站是為了鄭州和開封之間的輕軌單獨建設的車站，開封北站則是高鐵停靠的車站。開封北站的位置非常偏，公交線路少，出租車也不喜歡往這個地方開，所以我每次乘坐高鐵回開封或是從開封出發的時候都很頭痛，這也導致了我自從去外地上學後很少回來。不知自什麼時候起，開封站翻修了候車室，由曾經簡陋的一層小房，升級成了寬廣的兩層大廳，在今年剛剛翻修完畢。我便選擇了一條先到鄭州東站，再從鄭州東站轉回開封站的線路。&lt;/p>
&lt;p>到站後，我本想乘坐公交車回家。可在地圖上搜了下現在的公交線路，才察覺到曾經通過社區門口的唯一一路公交車，如今卻在前一站「開聯」改變了線路。無奈之下，我叫了一輛網約車。汽車穿過一條條熟悉的不能再熟悉的街道，時隔兩年，再次踏入這片土地，眼前的一切都還是曾經的模樣——不，準確來說，眼前的事物都還是過去的事物，但就和生命一樣，這一切都在隨著時間的侵蝕，慢慢老去。&lt;/p>
&lt;p>汽車從化工路的花鳥市場駛進新宋路，我看到了化肥廠門口已經褪成淡粉色、殘破不堪的廠名大字。這一片區域有很多工廠，廠區大門的設計都差不多，開闊的廣場上矗立著一尊毛主席雕像。曾經某段時期建設的工廠都是這樣的風格，這就導致我小時候不太能分辨出這一片區域到底有多少個工廠。但化肥廠的位置我不會弄錯，我上學總是要走化肥廠門口的這條路。從我記事起，廠裡高高矮矮、胖胖瘦瘦、各式各樣的大煙囪就一直在向空中排著白的、黑的、黃的濃煙。這一片區域的空氣品質很差，彌漫著說不上來的臭味，天上還一直滴落著類似雨水的物質。後來有段時間，化肥廠重建了大門，還在臨近馬路的地方新蓋了幾個不知道生產什麼的大樓，其中最高的一棟在外面刷上了紅白相間的格子圖案，還寫了幾個大字：三中尿素。沒過多久，白色的漆面就被排放的廢氣腐蝕出了黃色的印記。而如今，這片區域已人去樓空，只剩下一堆堆鏽跡斑斑的金屬骸骨。&lt;/p>
&lt;p>穿過一個村子，再往前就到了「開聯」。這裡是開封聯合收割機廠的職工家屬院。有很多人把這裡叫作「康拜因」，其實就是英文 &lt;em>Combine&lt;/em> 的音譯。我一直都無法找出這裡和收割機的任何聯繫，大概是這個廠子早就不存在了，只留下了一棟棟破舊的居民樓。這些樓不高，分布在馬路的兩旁，沒有圍牆。樓與路之間幾顆高大的楊樹便作了它的大門。樓的外牆是裸露的磚頭。現在很多這樣的老舊社區都對居民樓進行了改造，比如在牆外增加保溫層，刷上艷麗的顏色，還有的加裝了電梯，但這裡卻只有長滿青苔的石磚。剛上初中的時候，我每天早上要趕第一班公交車上學，在這一站，總能上來一群要去買菜的老年人和學生搶占座位，似乎在這個小區裡居住的都是老年人。我家每次大掃除後，長輩都會騎著三輪車拉著一車的廢品，來這裡的回收站賣個三五十塊錢。當年在這裡居住的很多老年人，可能已經離世了；其餘的人想必也已經搬離此處。正值過年，樓裡只有零星的幾家還亮著燈。路邊的那幾顆楊樹，不知什麼時候被砍的只剩下樹根，那些粗壯發達的根系，深深紮進泥土。它曾經拼命地往上長，長到超過居民樓的高度，用自己的枝葉隔絕馬路的噪聲，為那些老人遮陽避雨。長到這麼高的樹，也會突然死去嗎，還是人們主動拋棄了它。&lt;/p>
&lt;p>終於到了我居住的社區，我在北門門口下了車。這裡同樣也是一家國企的職工家屬院，如今只留下了幾十棟居民樓。好在還有人負責管理，讓它能有個現代化社區的模樣。它曾經是沒有北門的，只有兩個南門。沿著南門進入社區，一直往北走，最終見到的是一個花園，花園後是高大的白色圍牆，圍牆外是一片茂密的楊樹林。兒時的仲夏夜，吃完晚飯，母親帶著我從南門出發，沿著社區外西側乾涸的魚塘往北走，深入農戶的田地中散步。暖風拂面，蟋蟀幽鳴。遠處農田裡有幾間茅草屋，屋子外趴著幾隻沒有栓繩的狼狗沖著我們發出低沉的警告。在我的記憶中，這片田野很寬廣，似乎永遠望不到邊。但隨著這些魚塘被填平，泥土上鋪滿瀝青，建成了新的工廠和公路，社區北側的圍牆被推倒，我怎麼感覺這片區域變小了呢？&lt;/p>
&lt;p>社區南門的醫院和俱樂部早已關閉，無人看守，雜草叢生。在殘存的幼年記憶裡，我在這個醫院裡做過霧化，往屁股上紮過針；在俱樂部裡看過一場演出，舞台上在表演什麼已全然忘記，只記得自己坐在後排的座位上。時代在變，圍牆外的社會在變，社區也不得不做出一些妥協。曾經社區自建的電視衛星天線，如今改成了市區統一的線路，再也看不到其他省份衛視的小眾節目。曾經每家每戶都有兩個供水管道，一個通普通的涼水，一個通從地下直抽的熱水，如今熱水停供，不得不安裝了熱水器。社區中有一個中學，曾經是個不起眼的子弟學校，如今卻在郊縣中聲名赫赫。社區把一些空置的場地——包括樓房、運動場——都劃給了學校。兒時的我經常在這些地方和朋友們玩耍，如今只能隔著柵欄回憶往日。&lt;/p>
&lt;p>在高中語文課上學習過的數十篇文言文中，雖有許多豪情壯志之作，但唯獨歸有光的《項脊軒志》，「溫潤典麗，如清廟之瑟，一唱三嘆。無意於感人，而歡愉慘惻之思，溢於言語之外。」我想，正是因為他用平淡文字講述了他和家人在項脊軒中生活的點點滴滴，讓我念起自己的過往，得以與之共情，至今仍對此文念念不忘。他在文章的結尾寫道：「庭有枇杷樹，吾妻死之年所手植也，今已亭亭如蓋矣。」看著眼前變遷的萬物，悵然若失間，這段文字浮現在眼前。&lt;/p>
&lt;p>這是一座正在老去的城市。它親歷過五代十國的腥風血雨，在頻繁的皇權更替後，迎來了屬於它的大宋。我喜歡觀看發生在這片土地上的電視劇，比如最近播出的《太平年》，去年的《清明上河圖密碼》。雖然我和故事中的人不在同一時代，但我們都踏進過同一個城門，在集市的車水馬龍中穿梭，我彷彿就在故事之中，這是一種很奇妙的感覺。然而，洶湧的黃河卷積著泥沙一次又一次地傾入城門，推倒了房屋，填平了汴河。人們在泥沙上一次又一次地重建著一切。&lt;/p>
&lt;p>以前母親帶我到市裡購物時，經常乘坐公交到大相國寺下車，步行到紙坊街的百貨商場。百貨商場對面的那片區域一直是一片廢墟，我一直以為會蓋起新的住宅樓或商場，可在我十四歲那年離開開封，八年後再回到這裡，才知道這是曾經的州橋所在地。考古工作還在進行中，博物館還未蓋成。雖然人們可以進入參觀海馬瑞獸，但我僅僅在門口停留了片刻。那天下著暴雨，雨水滴落在遺址外圍的泥土上，在馬路邊緣流淌。&lt;/p>
&lt;p>這次回家在查閱百度地圖時，發現地圖上竟把城牆內的整片區域都標記成了綠色，中間寫著「宋都皇城旅遊度假區」。這些年開封一直在努力開發和完善旅遊產業，每逢節假日，清明上河園和萬歲山都是人頭攢動。但僅僅依靠旅遊業是無法帶動城市發展的。隨著河南大學遷至鄭州，一個又一個工廠關停，開封還剩下些什麼呢？泥沙埋葬了饑荒與戰亂，但也再無繁華與輝煌。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/the-time-buried-by-sand/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/the-time-buried-by-sand/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/childhood/">童年</category><category domain="https://guanqr.com/tags/kaifeng/">汴梁</category></item><item><title>
廿七</title><link>https://guanqr.com/life/ideas/twenty-seven-years-old/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/twenty-seven-years-old/</guid><pubDate>Sat, 14 Feb 2026 00:00:39 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">大&lt;/span>約在二〇一二年，那時我剛上初中，每天下午放學回家吃飯的時候正好能趕上河南衛視都市頻道播出《打魚曬網》節目。這個電視節目主要是整理分享一些網絡上流行的話題和視頻，正因有這個節目，我在只有週末才被允許觸碰電腦半個小時的少年時代，能夠第一時間瞭解到網絡上的新鮮事物。還記得有一期節目播放了一個當時很流行的視頻：《我今年二十七八歲》。尚不精緻的畫面，配著低沉憂鬱的臺詞。雖然那時的我並沒有對這個視頻講述的事有多少共鳴，但在看過了無數期節目後，這個視頻依然停留在我的記憶中。雖然在後來的漫長歲月裡，我沒有主動或被動地再次觀看這個視頻，但那些畫面，那些臺詞，任由時間沖刷不曾忘卻。&lt;/p>
&lt;p>我想這其中很大一部分原因是，人終究是會經歷二十七八歲的。年少的我望著這個年紀，總覺得遙不可及。看著電視中的他們把自己劃分成普通青年、文藝青年、二逼青年，愁著工作，愁著談戀愛，愁著買房。這個年紀真的會有這麼多憂慮的事嗎？如此的疑問一直埋藏在我的心裡。如今我真的步入了這個年紀，從那天下午在電視上看到那個視頻起，十餘載光陰彈指一揮間。&lt;/p>
&lt;p>我時常有所恍惚，在破曉前騎車上學，在寒風中打掃校園衛生，在朝陽中沿著湖畔跑步，一場場考試，一次次師生談話，一張張青澀的面孔——這竟已是十年前的記憶。在恍惚間又有些許懊悔，於悄然消逝的歲月裡，諸多瑣事都只是敷衍。那時的我總是自視清高，覺得有些事做與不做，做成什麼樣都無所謂。儘管現在的生活證明了那些事的結果確實無足輕重，但我開始幻想，如果我積極完成了那些事，獲得了一些小小的榮譽，是否會改變我那時的心態，從而有了一種正向反饋效果，讓我更積極地完成更多的事？或許我還會選擇現在的這條路，但某些觀念會有所改變。或許那時的我不會像現在這樣對過往惆悵。&lt;/p>
&lt;p>歲末，我們部門在某酒店舉辦了年會。一些同事帶著自己的孩子一同前來，我便憶起了更久遠的過去。那時的母親也和這些同事一樣，三十歲左右，時不時帶著年少的我來到公司。現在的我在年會上看到的場景，就像那時母親的同事們看到那時的我。這漫長又轉瞬即逝的歲月啊……&lt;/p>
&lt;p>當初與那個視頻共鳴的那些人，已然度過不惑之年。他們現在是否還會回想那段彷徨的日子？&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/twenty-seven-years-old/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/twenty-seven-years-old/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/introspection/">反省</category><category domain="https://guanqr.com/tags/reality/">现实</category></item><item><title>
一隻鬼艷鍬甲的重生</title><link>https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/</guid><pubDate>Wed, 21 Jan 2026 00:14:29 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">兩&lt;/span>年前的某天，我在閒魚上無意間看到了一個售賣白斑雪蟬標本的鏈接，這是我第一次認識該物種，也是第一次如此清晰地觀察它的細節，不由地讚嘆大自然的神奇。這激起了我收集昆蟲標本的興趣，便購入標本針、泡沫墊、標本框等物品，並挑選了幾隻便宜的昆蟲標本素材進行整姿。在接觸過半翅目、鱗翅目、鞘翅目等不同種類的昆蟲標本後，我覺得鞘翅目昆蟲在整姿方面難度較低、外觀上極具觀賞性，故將其作為了個人主要收集方向。&lt;/p>
&lt;p>在昆蟲標本整姿時，我進行的常規操作步驟是：還軟→整姿→烘乾→入框。然而有一些鞘翅目的昆蟲具有較大的體形，如鍬甲、大兜，若只進行上述步驟，隨著時間的推移，標本體內的組織可能會分泌出油脂，導致身體變色；也可能因為烘乾不徹底，導致生蟲腐爛，散發臭味。因此還需在「整姿」前增加「掏肉」的步驟。本文即為記錄一隻體型較大的黑鬼艷鍬甲標本的製作流程。&lt;/p>
&lt;h2 id="還軟">&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/#還軟" class="anchor-link" aria-label="還軟">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>還軟&lt;/h2>
&lt;p>無論是野採還是網購，我們拿到的鍬甲素材通常是已經失去水分的屍體。此時的鍬甲關節非常僵硬，無法直接調整姿態，若用蠻力硬掰只會導致肢體斷裂。因此，需要將其泡在水中還軟。我常用的還軟方法是：準備一個帶蓋子的塑膠盒子，在裡面鋪上幾層衛生紙；然後加入熱水，水無需太多，衛生紙吸水後仍存留一些即可；接著將素材放置在衛生紙上，上面再鋪上一層紙巾；最後封閉盒子，依靠水和蒸汽潤濕素材。這一過程一般需要等待十二小時，如果你不想等這麼長時間，直接將素材完全泡在熱水中應該也行，我看有些人是這麼做的，但我沒這麼急於求成。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-0.jpg" alt="the-rebirth-of-a-odontolabis-siva-0.jpg">&lt;span class="caption">※ 在水中還軟，左一為本文的主角「黑鬼艷鍬甲」&lt;/span>&lt;/p>
&lt;h2 id="掏肉">&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/#掏肉" class="anchor-link" aria-label="掏肉">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>掏肉&lt;/h2>
&lt;p>還軟後，我們需要使用小刀將其身體切開，以便掏肉。眾所周知，昆蟲的身體主要分為三個部分：頭、胸、腹。我們就按照這三部分將其分離。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-1.jpg" alt="the-rebirth-of-a-odontolabis-siva-1.jpg">&lt;span class="caption">※ 頭、胸、腹分離&lt;/span>&lt;/p>
&lt;p>但僅僅拆分成這三部分還不夠，因為腹部還有很多「組件」。打開鞘翅，展開裡面折疊的透明後翅，鍬甲的腹部完整暴露出來。此時我們需要再將其柔軟的腹部和連接中、後足的部位分離。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-2.jpg" alt="the-rebirth-of-a-odontolabis-siva-2.jpg">&lt;span class="caption">※ 腹部二次分離&lt;/span>&lt;/p>
&lt;p>拆分完成後，我們可以先將這四部分浸入酒精等待片刻，一是為了消毒，二是為了去油。然後，用尖頭鑷子伸進內部，一點一點地掏肉。這一步需要小心，避免用力過猛捅破外殼。我這隻鍬甲是公蟲，所以腹部內還有很明顯的生殖器，可單獨將其拆出保留。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-3.jpg" alt="the-rebirth-of-a-odontolabis-siva-3.jpg">&lt;span class="caption">※ 取出生殖器&lt;/span>&lt;/p>
&lt;p>掏完肉後，用棉籤等工具進一步清理內部殘留的雜質，使用脫脂棉填充。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-4.jpg" alt="the-rebirth-of-a-odontolabis-siva-4.jpg">&lt;span class="caption">※ 填充脫脂棉&lt;/span>&lt;/p>
&lt;h2 id="整姿">&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/#整姿" class="anchor-link" aria-label="整姿">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>整姿&lt;/h2>
&lt;p>在整姿之前，我們需要使用白乳膠將這四個部分重新粘合在一起。白乳膠凝固的時間很慢，無須擔心粘合時的角度，可在整姿的時候慢慢調整。&lt;/p>
&lt;p>對於鍬甲要以什麼樣的姿態展示，每個人都有不同的觀點。我不喜歡將肢體收得過緊，也不喜歡將頭部很明顯地向上抬起，這種姿態在我看來很彆扭。整姿所需的工具有兩個：一個是昆蟲針，一個是插針用的海綿墊。我們首先需要將頭部、胸部和腹部用針固定好，再調整腿部的角度，然後是上顎開合的角度，最後是觸角的角度。順序不要顛倒，否則很難把控姿態的對稱性。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-5.jpg" alt="the-rebirth-of-a-odontolabis-siva-5.jpg">&lt;span class="caption">※ 插針整姿&lt;/span>&lt;/p>
&lt;h2 id="烘乾">&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/#烘乾" class="anchor-link" aria-label="烘乾">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>烘乾&lt;/h2>
&lt;p>如果你身處空氣乾燥的地帶，如我國的北方地區，可以直接將整姿後的標本在通風的地方靜置幾日，待水分蒸發後拆針。但我目前居住在空氣潮濕的地區，僅靠靜置只能造成標本蛀蟲、腐爛，這就需要依靠一個神器——烘乾機。將標本放置在烘乾機裡，設置 60℃、烘乾 12 小時足矣。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-6.jpg" alt="the-rebirth-of-a-odontolabis-siva-6.jpg">&lt;span class="caption">※ 使用烘乾機&lt;/span>&lt;/p>
&lt;h2 id="入框">&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/#入框" class="anchor-link" aria-label="入框">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>入框&lt;/h2>
&lt;p>最後一步，拆針，放入標本框，並附上註有學名、產地的標籤。拆針的順序和插針的順序相反，先拆固定細小脆弱部分的針，再拆固定身體的針，避免因為身體鬆動導致觸角、跗節斷裂。至於標籤，我喜歡自己手寫而不是打印標籤。寫標籤也要花費一定的精力，需要控制字的大小，注意這麼長的一串英文不要寫歪，我很享受這個過程。&lt;/p>
&lt;p>至此，這隻已經死亡的黑鬼艷鍬甲迎來了重生。
&lt;img src="https://guanqr.com/images/the-rebirth-of-a-odontolabis-siva-7.jpg" alt="the-rebirth-of-a-odontolabis-siva-7.jpg">&lt;span class="caption">※ 標本入框&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/the-rebirth-of-a-odontolabis-siva/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/insect/">昆虫</category><category domain="https://guanqr.com/tags/nature/">自然</category><category domain="https://guanqr.com/tags/specimen/">标本</category></item><item><title>
裝扮成讀書人的模樣</title><link>https://guanqr.com/life/ideas/dressed-as-a-scholar/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/dressed-as-a-scholar/</guid><pubDate>Fri, 16 Jan 2026 19:54:35 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>前段日子發布的&lt;a href="https://guanqr.com/life/hobbies/book-collections/">一篇文章&lt;/a>裡，我分享了自己對於讀書和藏書的理解。藏書的進階版是玩書。有些讀者不滿足於手中愛書的品質，會參考歐洲古典書籍的樣式，讓專門負責書籍裝幀的工作室&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/ideas/dressed-as-a-scholar/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>重新裝幀。書脊加入竹節鎖線，手工縫製堵頭布，將封皮替換為進口的染色羊皮或牛皮，書口彩繪撒金。我常見一些喜歡董橋的讀者，花費高昂的定制費用，等待數月，將其手中已經很精美的《蘋果樹下》《讀書便佳》等書籍升級為更精緻的裝幀。這足以見得他們對這些書的喜愛有多深。&lt;/p>
&lt;p>但玩書有一種極端，我暫未找到能夠準確概括的詞語。他們的做法是這樣的：由一位發起人組建一個討論小組，內部定期推出一本重新印刷裝幀的書，並透過線下聚會共同交流對這本書的閱讀感受。「建本會」就是這樣的一個組織。他們的口號是「紙本末年，素簡做書」。他們將自己出的書歸為「建本文庫」。如果想成為「建本會」的會員，就需要支付每年十萬元的入會費。會員每年會收到十本「建本文庫」的書。說白了，就是一本書賣一千元。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dressed-as-a-scholar.jpg" alt="dressed-as-a-scholar.jpg">&lt;span class="caption">※ 「建本文庫」書的外觀&lt;/span>&lt;/p>
&lt;p>他們經常在自媒體平台宣傳自己如何用心做書。挑選什麼樣的紙張作為書芯；挑選什麼樣的布料&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/life/ideas/dressed-as-a-scholar/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>作為封面，布料的條紋方向一定要保證水平；文字燙印的位置要反覆校對。甚至於函套，也要講究邊角的弧度，需要鏤銑和手工打磨。這些明明都屬於做書的基本工序，卻被拿來當做宣傳點。如今很多設計師都喜歡這樣，在一些已經完善的地方，再做一些毫無意義的改動，並賦予這些改動一個高雅的名號，以體現自己獨到的設計理念。在字畫海報、建築設計領域，這樣做無可厚非。但書籍是記錄和表達作者理念的載體，不是表達設計師理念的當代藝術品。&lt;/p>
&lt;p>他們如此用心做書的結果如何呢？挑細選的進口布料，在書籍剛剛拆封還未閱讀時，就已摩擦起球，脆弱不堪。封面僅僅印有書籍的編號，確實符合「素簡做書」的理念，但也有「懶得設計封面」之嫌。更難以認同的操作是，他們推出的第一本書是盧梭的《瓦爾登湖》，選用了很差的李繼宏譯本，並在瓦爾登湖進行發布……&lt;/p>
&lt;p>目前「建本文庫」已經出了四本書：《瓦爾登湖》《洛陽伽藍記》《昆蟲記》《蕭紅選本》。這幾本書之間看不出有什麼聯繫。他們解釋道：正因為毫無關聯，才將其取名為「文庫」而非「叢書」；讀者要做到包羅萬象不偏食。但我認為這是一種很虛偽的說辭。任何人對任何事物的喜愛都是分主次的，既然有喜愛，也就會有厭惡。我不相信有人會喜歡所有題材的書。倘若有人確實喜愛全世界所有的書，他也不可能喜愛全世界所有的音樂、所有的電影——只喜歡書，卻不喜歡音樂和電影，不也是他們所謂的「偏食」嗎？我應能夠自主選擇讀什麼書，而不是聽從別人的安排，讀別人讓我讀的書。「建本會」可以收取高昂的入會費，但會員應該有購買「文庫」中哪些書的選擇權。&lt;/p>
&lt;p>「建本文庫」的書無論在裝幀還是內文品質上都遠不如市面上更便宜的版本。既然這些人認為如今是「紙本末年」，為什麼還要做出普通人買不起的極其脆弱的書，來進一步推進紙本的終結？這並非是愛書之人的做書和藏書之道。由此看來，「建本會」更像是一個奢侈品品牌，這些會員則是物質充裕但精神貧瘠之人，入會的目的只是為了得到會員的身份，把自己裝扮成讀書人的模樣。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>國內這樣的工作室並不多，除了上文提到的草鷺工作室，還有竹韻裝幀工作室、小滿書社等。&amp;#160;&lt;a href="https://guanqr.com/life/ideas/dressed-as-a-scholar/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>據「建本會」的會員說，書籍封面採用的是義大利貝加莫 &lt;a href="https://www.manifatturadelseveso.it/" target="_blank" rel="noopener">Manlfattura del Seveso&lt;/a> 旗下的一款名為 New Canapetta Extra 1414 的布料。此言確實不假，我在這家公司的官網上搜到了該布料的具體信息。&amp;#160;&lt;a href="https://guanqr.com/life/ideas/dressed-as-a-scholar/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/dressed-as-a-scholar/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/dressed-as-a-scholar/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/binding/">装帧</category></item><item><title>
使用 GitHub Actions 部署 Hugo 博客</title><link>https://guanqr.com/tech/website/deploy-hugo-with-github-actions/</link><guid isPermaLink="true">https://guanqr.com/tech/website/deploy-hugo-with-github-actions/</guid><pubDate>Sun, 11 Jan 2026 15:56:27 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>对于部署静态博客这一过程，我使用过手动本地部署，&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/">Netlify&lt;/a> 与 &lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/">Travis CI&lt;/a> 自动部署。对我而言，采用什么部署方式最好的评判方法，就是看部署工具的访问与操作是否便捷。部署的速度快慢是无所谓的。Netlify 目前在国内访问速度甚至不如 GitHub，而 Travis CI 开启了收费模式。那么，既然我已经将博客放在了 GitHub 的仓库中，也将博客部署到了 GitHub Pages 中，那么直接采用 GitHub 自家的 GitHub Actions，就是最佳选择。&lt;/p>
&lt;h2 id="前期准备">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#前期准备" class="anchor-link" aria-label="前期准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前期准备&lt;/h2>
&lt;p>首先捋一下思路。整体的思路和使用 Travis CI 差不多。&lt;/p>
&lt;p>原始方法：&lt;/p>
&lt;ol>
&lt;li>在本地存放博客源码；&lt;/li>
&lt;li>在本地执行 &lt;code>hugo&lt;/code> 命令后，生成的文件会存放在 &lt;code>public&lt;/code> 文件夹内；&lt;/li>
&lt;li>将 &lt;code>public&lt;/code> 文件夹内的全部文件 &lt;code>push&lt;/code> 至 GitHub Pages 中，完成博客部署。&lt;/li>
&lt;/ol>
&lt;p>而我们想做的就是让 GitHub Action 自动完成上述第 2、3 步。于是就有了：&lt;/p>
&lt;ol>
&lt;li>将博客源码存放在 GitHub 仓库；&lt;/li>
&lt;li>使用 GitHub Action 访问你的源码仓库；&lt;/li>
&lt;li>在线安装 Hugo 和其他一些环境依赖；&lt;/li>
&lt;li>在线执行 &lt;code>hugo&lt;/code> 命令，生成 &lt;code>public&lt;/code> 文件夹；&lt;/li>
&lt;li>将 &lt;code>public&lt;/code> 文件夹内的全部文件 &lt;code>push&lt;/code> 至 GitHub Pages 中，完成博客部署。&lt;/li>
&lt;/ol>
&lt;h2 id="具体实现方法">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#具体实现方法" class="anchor-link" aria-label="具体实现方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>具体实现方法&lt;/h2>
&lt;p>有关创建 GitHub 仓库和 GitHub Pages 的操作就不再赘述了，翻翻以往的文章即可。另外，需要实现声明一下，下面的实现方法是基于我本人使用环境的，你我可能存在某些差异：&lt;/p>
&lt;ol>
&lt;li>我使用了两个独立的仓库分别存放博客源码和 GitHub Pages。你可以在同一个仓库里创建两个分支分别存放他们，但在后续需要选择正确的分支进行部署。&lt;/li>
&lt;li>我需要使用 &lt;code>npm&lt;/code> 安装一些额外的工具，因此有 &lt;code>package.json&lt;/code> 文件。一般来说 Hugo 博客不需要用到它。&lt;/li>
&lt;/ol>
&lt;h3 id="修改-packagejson">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#修改-packagejson" class="anchor-link" aria-label="修改-packagejson">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>修改 &lt;code>package.json&lt;/code>&lt;/h3>
&lt;p>创建一个脚本，命名为 &lt;code>build&lt;/code>，用来执行 &lt;code>hugo&lt;/code> 和 &lt;code>gulp build&lt;/code> 命令。&lt;/p>
&lt;p>这里我加上了 &lt;code>gulp build&lt;/code>，是用来执行额外的 Gulp 脚本的，如果不需要可以去掉。同样，如果你没有用到 &lt;code>package.json&lt;/code> 文件，也可以直接跳过这一步。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">&amp;#34;scripts&amp;#34;: {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;#34;build&amp;#34;: &amp;#34;hugo --gc --minify --cleanDestinationDir &amp;amp;&amp;amp; gulp build&amp;#34;,
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>后面可以直接通过 &lt;code>npm run build&lt;/code> 来运行这一长串的命令。&lt;/p>
&lt;h3 id="新建-buildyml">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#新建-buildyml" class="anchor-link" aria-label="新建-buildyml">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>新建 &lt;code>build.yml&lt;/code>&lt;/h3>
&lt;p>在博客根目录下创建 &lt;code>/.github/workflows/build.yml&lt;/code> 文件，内容如下，需要根据注释自行修改。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">build&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">on&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">push&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">branches&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">master&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">jobs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">deploy&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">runs-on&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">ubuntu-22.04 &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 运行系统和版本&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">steps&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Checkout source&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">uses&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">actions/checkout@v2&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">with&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">submodules&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Setup Node.js&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">uses&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">actions/setup-node@v2 &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 安装 Node.js&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">with&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">node-version&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;14.16.0&amp;#39;&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 选用 Node.js 版本&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Install dependencies&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">run&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">npm install &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 根据 package.json 文件，安装环境依赖&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Setup Hugo&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">uses&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">peaceiris/actions-hugo@v2 &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 安装 Hugo&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">with&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">hugo-version&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;0.148.2&amp;#39;&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 选择 Hugo 版本&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">extended&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 由于 MemE 主题使用的是 Extended 版本的 Hugo，因此需要设置此项为 true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Build&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">run&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">npm run build &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 执行上文自定义的命令，执行 hugo 和 gulp build&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Deploy&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">env&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">TZ&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Asia/Shanghai &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 时间地区&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">DEPLOY_REPO&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">guanqr/guanqr.github.io &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 要部署到的仓库名（GitHub Pages 仓库名）&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">DEPLOY_BRANCH&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">master&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 要部署到的仓库分支&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">PERSONAL_TOKEN&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">${{ secrets.PERSONAL_TOKEN }} &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 关联个人账户信息的 Token，用于授权进入仓库，下文会说明如何获取&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">run&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">| &lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 执行需要的 git 命令：进入生成的 public 文件夹，push 文件至 GitHub Pages。这里的 USER NAME 和 USER EMAIL 请替换为你的 GitHub 信息&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">cd ./public &amp;amp;&amp;amp; git init&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">git config user.name &amp;#34;USER NAME&amp;#34;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">git config user.email &amp;#34;USER EMAIL&amp;#34;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">git add .&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">git commit -m &amp;#34;Automated Deployment @ $(date &amp;#39;+%Y-%m-%d %H:%M:%S&amp;#39;) ${TZ}&amp;#34;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="l">git push --force --quiet &amp;#34;https://$PERSONAL_TOKEN@github.com/$DEPLOY_REPO&amp;#34; master:$DEPLOY_BRANCH&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="获取-token">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#获取-token" class="anchor-link" aria-label="获取-token">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>获取 Token&lt;/h3>
&lt;p>在 GitHub 中，点击个人头像 → Settings → Developer settings → Personal access token，点击「Generate new token」以获取新 Token。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-hugo-with-github-actions-0.png" alt="deploy-hugo-with-github-actions-0.png">&lt;/p>
&lt;p>给这个 Token 自定义一个名字，下方「Select scopes」中需要勾选「workflow」。生成的 Token 需要保存好，后续无法再次查看。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-hugo-with-github-actions-1.png" alt="deploy-hugo-with-github-actions-1.png">&lt;/p>
&lt;p>返回存放博客源码的仓库，点击 Settings → Secrets and variables → Actions，点击「New repository secret」创建密钥。需要命名为「PERSONAL_TOKEN」，和 &lt;code>build.yml&lt;/code> 中保持一致。内容填写为上一步中生成的 Token。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-hugo-with-github-actions-2.png" alt="deploy-hugo-with-github-actions-2.png">&lt;/p>
&lt;h3 id="检查-actions">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#检查-actions" class="anchor-link" aria-label="检查-actions">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>检查 Actions&lt;/h3>
&lt;p>上述步骤完成后，将博客源码 &lt;code>push&lt;/code> 到仓库。访问你的源码仓库，在 Actions 中查看部署日志，若无报错则部署成功。你可以通过 GitHub Pages 访问网站了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-hugo-with-github-actions-3.png" alt="deploy-hugo-with-github-actions-3.png">&lt;/p>
&lt;h2 id="后记">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/#后记" class="anchor-link" aria-label="后记">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>后记&lt;/h2>
&lt;p>我在 2021 年 3 月的时候，已经实现使用 GitHub Actions 部署自己的博客，并计划写下本文，以分享自己的实现方法。本文的第一段文字已于当年 6 月写好，但由于种种事情，再无后文。2026 年初，我重新拾起写作兴趣，想到了这篇尚未完成的文章，欲将其补充完整，却发现困难重重。「为什么我的 &lt;code>build.yml&lt;/code> 文件和别人的不一样？」「我当时是怎么写出这几行代码的？」我早已忘记五年前是参考了哪些文章，如何配置环境，遇到了哪些问题，如何解决这些问题的了。我翻阅着浏览器里的收藏夹，GitHub 仓库的修改履历，努力找寻当时的零星记忆，终于将其拼接完整。&lt;/p>
&lt;p>由于这几年我并未跟进更新 &lt;code>build.yml&lt;/code>，里面有些依赖的程序并非最新版本；由于记忆的偏差，有些步骤可能会出现纰漏……这都可能导致在部署的时候产生报错，还请理解。看来以后再有这样步骤繁琐的操作，不论是否要分享，都需要及时记录完整才行啊，人的记忆终究是靠不住的。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/" target="_blank" rel="noopener">https://guanqr.com/tech/website/deploy-hugo-with-github-actions/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category></item><item><title>
至繁归于至简</title><link>https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/</link><guid isPermaLink="true">https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/</guid><pubDate>Sat, 10 Jan 2026 23:47:20 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">新&lt;/span>年伊始，我重新打开了尘封已久的博客文件夹，发布了一篇&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/">二〇二五年的年终总结&lt;/a>。上一次执行 &lt;code>hugo new&lt;/code> 和 &lt;code>git push&lt;/code> 的指令，还是在二〇二四年初。依次点击了友链中的博客链接，发现也有一些人停更超过了一年的时间，甚至有的已无法访问。可能大家都忙于现实的工作和家庭，早已无暇折腾这些无关要紧的事。但还是有人在坚持创作，分享自己的故事，这给予了我莫大的动力。我觉得写作的目的不单单是分享自己的经验，更重要的是记录自己的成长，人生观念的转变。翻阅以前的文章，看看这一路是如何走过来的，能够对自己有更清晰的认识。&lt;/p>
&lt;p>二〇一一年，我在阅读《乔布斯传》的时候，了解到「至繁归于至简&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>」的理念。个人博客也应如此。花里胡哨的动画，各式各样的功能插件，绚丽多彩的配色，现在感觉都是多余的。优质的内容和舒适的排版才是博客的核心。于是，在本次升级 Hugo 和 MemE 主题之时，优化了个别功能的代码，调整了博客页面的细节。&lt;/p>
&lt;h2 id="字体修改">&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#字体修改" class="anchor-link" aria-label="字体修改">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>字体修改&lt;/h2>
&lt;p>之前在《&lt;a href="https://guanqr.com/tech/website/web-font-guide/">网站字体优化方案&lt;/a>》一文中，我已对自己使用的字体进行过说明：中文字体采用的是思源宋体 Noto Serif SC，英文字体采用的是可变字体 &lt;a href="https://github.com/TypeNetwork/Amstelvar" target="_blank" rel="noopener">Amstelvar&lt;/a>。本次修改参考了 &lt;a href="https://io-oi.me/tech/using-the-inherited-glyphs-font-iming/" target="_blank" rel="noopener">reuixiy&lt;/a>，中文部分增加了：&lt;/p>
&lt;ul>
&lt;li>&lt;a href="https://github.com/ichitenfont/" target="_blank" rel="noopener">一點字坊&lt;/a>的一點明體 &lt;a href="https://github.com/ichitenfont/I.Ming/" target="_blank" rel="noopener">I.MingCP&lt;/a>；&lt;/li>
&lt;li>&lt;a href="https://github.com/lxgw" target="_blank" rel="noopener">落霞孤鹜 lxgw&lt;/a> 的霞鶩文楷 &lt;a href="https://github.com/lxgw/LxgwWenkaiTC" target="_blank" rel="noopener">LXGW WenKai TC&lt;/a>。&lt;/li>
&lt;/ul>
&lt;p>此外，我将 Amstelvar 的字形做了轻微的调整以适配中文。 Amstelvar 字体大写字母的默认顶部高度较高，会造成英文比中文字号大的错觉，所以需要把顶部高度调低一些，整体线条调细一些。而文章的标题需要醒目，所以我把标题里的小写字母的高度调高了一些。Amstelvar 字体具体设置的参数如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// body 字形
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nt">body&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-variation-settings&lt;/span>&lt;span class="o">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wdth&amp;#39;&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;opsz&amp;#39;&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;XOPQ&amp;#39;&lt;/span> &lt;span class="mi">145&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTLC&amp;#39;&lt;/span> &lt;span class="mi">480&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTUC&amp;#39;&lt;/span> &lt;span class="mi">710&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTAS&amp;#39;&lt;/span> &lt;span class="mi">726&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTFI&amp;#39;&lt;/span> &lt;span class="mi">720&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 标题字形
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nc">.post-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-variation-settings&lt;/span>&lt;span class="o">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wght&amp;#39;&lt;/span> &lt;span class="mi">550&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;opsz&amp;#39;&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YOPQ&amp;#39;&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTLC&amp;#39;&lt;/span> &lt;span class="mi">570&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTUC&amp;#39;&lt;/span> &lt;span class="mi">710&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文章内标题字形
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nc">.list-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-variation-settings&lt;/span>&lt;span class="o">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wght&amp;#39;&lt;/span> &lt;span class="mi">550&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;opsz&amp;#39;&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YOPQ&amp;#39;&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTLC&amp;#39;&lt;/span> &lt;span class="mi">570&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTUC&amp;#39;&lt;/span> &lt;span class="mi">710&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文章目录页标题字形
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nc">.list-item&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-variation-settings&lt;/span>&lt;span class="o">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wght&amp;#39;&lt;/span> &lt;span class="mi">400&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wdth&amp;#39;&lt;/span> &lt;span class="mi">103&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;opsz&amp;#39;&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YOPQ&amp;#39;&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTLC&amp;#39;&lt;/span> &lt;span class="mi">570&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTUC&amp;#39;&lt;/span> &lt;span class="mi">710&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文章目录页年份字形
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nc">.list-year&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-variation-settings&lt;/span>&lt;span class="o">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;wdth&amp;#39;&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;opsz&amp;#39;&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YOPQ&amp;#39;&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;YTUC&amp;#39;&lt;/span> &lt;span class="mi">710&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="自定义组件位置调整">&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#自定义组件位置调整" class="anchor-link" aria-label="自定义组件位置调整">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>自定义组件位置调整&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>内容过时提醒&lt;/strong>。之前我在部分时效性比较强的技术类文章中添加了&lt;a href="https://guanqr.com/tech/website/add-expired-tip-in-meme/">内容过时提醒&lt;/a>。当时的方法是将该组件插入进正文的最前面。但放置在这个位置需要修改主题中的几个模板文件，导致每次更新主题的时候，都要核对下这几个文件有没有变动，非常繁琐。正好 MemE 主题有一个自定义 &lt;code>post-meta&lt;/code> 的文件，我将该功能的代码转移到了这里，删除了之前的几个文件。其实内容是否过时算是文章的基础信息，本就应该放在 &lt;code>post-meta&lt;/code> 中。&lt;/li>
&lt;li>&lt;strong>友情链接&lt;/strong>。之前为了展示友链，我基于主题中的模板单独创建了一个 HTML 页面。很显然，这样的方法很原始，很不利于维护：如果主题模板文件修改了，我还要同步修改这个页面的代码。因此，我直接将友链部分的代码转成了 Hugo 的 Shortcodes，可直接在普通页面添加对应的 Shortcodes 加载友链。此外，我还修改了存放友链数据的文件，取消了每个友链的权重。现在不需要依照权重，可直接按照数据的先后顺序加载。之前对于这部分功能实现的认知尚浅，写出来的代码问题很多。&lt;/li>
&lt;li>&lt;strong>评论&lt;/strong>。和友情链接一样，之前为了添加自定义的评论，我直接修改了主题文件。实际上主题有一个可以自定义的 &lt;code>script.html&lt;/code> 文件，直接在该文件中插入评论即可。&lt;/li>
&lt;/ul>
&lt;h2 id="部分功能和页面关闭">&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#部分功能和页面关闭" class="anchor-link" aria-label="部分功能和页面关闭">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>部分功能和页面关闭&lt;/h2>
&lt;p>这次更新，我关闭了以下几个功能：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>多语言切换&lt;/strong>。我的英文页面只有一个「About」。对于一个不起眼的中文博客网站，可以存在一个英文说明来介绍自己，但没必要留有多语言切换按钮。这个按钮仅在「主页」和「关于」页面存在，破坏了菜单栏的结构稳定性。&lt;/li>
&lt;li>&lt;strong>文章分类页面&lt;/strong>。既然已经有了整体的文章目录页，和标签页，再单独放置一个分类页面就有些多余了。我基本不会点击这个页面，对于每篇文章的分类，可以直接从每篇文章的 &lt;code>post-meta&lt;/code> 中获取。&lt;/li>
&lt;li>&lt;strong>个人收藏页面&lt;/strong>。我一直在思考如何优雅地展示自己收藏的有意思的东西。之前是单独创建了一个类似于相册的页面，但完成度不高。我觉得还是等这部分功能完善后再放上来吧。&lt;/li>
&lt;li>&lt;strong>文章更新时间&lt;/strong>。从重要度上看，生活类文章没必要展示更新时间。而时效性较强的技术类文章，我已添加了「内容过时提醒」。这样一来，再显示一个文章更新时间，似乎也有些多此一举。并且在阅读文章的时候，看到标题下方有两个时间，也会给读者带来困扰。&lt;/li>
&lt;li>&lt;strong>文章字数、阅读时长&lt;/strong>。这两个信息现在看来也是多余的存在。不同人的阅读速度不同，这两个信息无法为阅读提供任何帮助。&lt;/li>
&lt;li>&lt;strong>今日诗词&lt;/strong>。之前我在页脚添加了今日诗词的功能。它会根据你所在的 IP、天气等因素，推荐相关联的诗句，有一定的互动性。但这毕竟是引入了一个外部的东西，不属于博客本身。秉持着「至繁归于至简」的理念，该功能不再保留。&lt;/li>
&lt;/ul>
&lt;h2 id="评论组件维护">&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#评论组件维护" class="anchor-link" aria-label="评论组件维护">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>评论组件维护&lt;/h2>
&lt;p>我对是否关闭评论功能的问题思考了许久。一是因为总有些莫名其妙的「剑客」在评论里发布垃圾信息；二是因为 Waline 更新迭代的速度太快，作为非专业选手，我每次都要花费不少时间进行主题适配性调整。最终觉得，还是留着评论吧。尽管留言的人很少，但我还是想有些互动，不想成为一座孤岛。&lt;/p>
&lt;p>我仍在使用 Waline 评论。目前官方已更新到了 v3.8.0 版本。v3 相对于 v2 最大的改动是，v3 的 JavaScript 函数是以 &lt;code>module&lt;/code> 形式载入的。我简单尝试了一下从 v2 升级到 v3，改了少许代码。当我看到 PC 端 和 Android 移动端都成功加载评论组件，准备庆贺之时，却发现 iPad 上出现了错误——算了，我懒得折腾了，v2 已经够用了。&lt;/p>
&lt;p>此外，目前评论的邮件提醒功能异常，我还没有检查是哪个环节的问题，大概率是邮箱的授权过期了。现在正忙着补发这两年构思好但没发布的文章，等忙完这一切再来修复吧。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>「&lt;em>Simplicity is the ultimate sophistication&lt;/em>」，这是达·芬奇的一句格言。早在苹果公司创立初期，乔布斯就将其作为苹果产品的宗旨。&amp;#160;&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/" target="_blank" rel="noopener">https://guanqr.com/tech/website/simplicity-is-the-ultimate-sophistication/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category></item><item><title>
谈谈二〇二五</title><link>https://guanqr.com/life/ideas/summary-of-2025/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/summary-of-2025/</guid><pubDate>Thu, 01 Jan 2026 23:02:12 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>二〇二五年一整年，我都没有在博客上写过一篇文章。&lt;/p>
&lt;p>其实在二〇二四就基本已经断更。主要是当时我沉迷于集章每周末都要去杭州各个博物馆、旅游景点盖章，早上要在九点前赶到博物馆，下午四五点再回来，每天两万步，回来就只想冲个澡，躺进被窝，无暇再趴在电脑前码字。&lt;/p>
&lt;p>在那段时间里，我意识到我在大学期间错过了很多好玩的地方。拱宸桥、小河直街、香积寺……为什么我之前都没去过？我很后悔那四年只顾着在网络中麻醉自己，却忽视了现实才是填补空虚的良药。&lt;/p>
&lt;p>后来我的电脑键盘坏掉了，电脑就沦为了吃饭的时候看剧的工具，再无其他用途。我还是写了些文章的，只不过回归了纸质。我在笔记本里写了很多胡思乱想的东西，这可比发在博客上方便多了。毕竟网络是公开的，可我有些事只想自己看到。后面如果有时间，我会整理一些记录的东西，发在博客上。&lt;/p>
&lt;hr>
&lt;p>言归正传，总结下二〇二五年经历的一些事吧。&lt;/p>
&lt;h2 id="病痛">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#病痛" class="anchor-link" aria-label="病痛">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>病痛&lt;/h2>
&lt;p>腿部的疼痛成为了我上半年的枷锁。二〇二四的十一假期，我在雨天速通了黄山光明顶。回来后膝盖不堪重负，出现了问题。二〇二五春季，我去上海参观了一场矿展和空山基作品展。逛完矿展后我的双腿已经很酸痛，接着又在空山基作品展门口站着排了一个多小时的队，出来的时候已经基本走不动路了。没想到回家后，我彻底倒下。&lt;/p>
&lt;p>双腿的膝盖和脚踝都有着不同程度的疼痛，医生的建议只是让我静养。我买了运动绷带缠绕在关节处，这样可以比较有效的减轻痛感。睡觉的时候，我无法伸直双腿，只能在腿部下面垫上被子，保持弯曲。直到六月份，我的双腿才有了较为明显的康复，可以正常走路。&lt;/p>
&lt;h2 id="康复训练">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#康复训练" class="anchor-link" aria-label="康复训练">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>康复训练&lt;/h2>
&lt;p>所谓康复训练，其实就是改变了饮食习惯，每天晚上出去运动一下。我大概能猜到，引起关节疼痛的原因有两个，一个是过度的劳累，一个是不断增长的体重。平时工作和生活的压力很大，忽略了身材管理。我每天只在晚上吃一顿少油少盐的正餐，然后出门快走 10 km。在坚持了三个月后，BMI 终于恢复了正常。&lt;/p>
&lt;h2 id="搬家">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#搬家" class="anchor-link" aria-label="搬家">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>搬家&lt;/h2>
&lt;p>我之前的那个房子是二〇二三年六月租的，是一间单人公寓。月租一千七，十九层朝南。这个房子最大的优点就是床很大，床垫很软，很舒服。但缺点有很多：楼层太高等电梯太慢；邻居很奇葩，总是半夜才回来，进门的时候会制造出各种噪音。今年四月份，房东告诉我她想要把这套房子卖了，可能会有人来看房。我不想被陌生人窥探隐私，决定搬走。&lt;/p>
&lt;p>当天晚上我就租到了新房子，是另一栋楼的复式，房间很宽敞，下层是客厅，上层有两个卧室，月租一千八。九层朝南，这个房子还是在这栋楼的最边上，不会有邻居制造噪音，妙哉。由于我当时腿部还未恢复，再加上我有很多模型、标本、书要搬，这些都是易损物品，无法打包运输，这一次搬家总共花费了我两个月的时间。&lt;/p>
&lt;h2 id="堂兄婚礼">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#堂兄婚礼" class="anchor-link" aria-label="堂兄婚礼">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>堂兄婚礼&lt;/h2>
&lt;p>堂兄在八月份举办了结婚典礼，我请假回了趟家。他们两位是清华和北大的博士，目前留在学校工作。来参加婚礼的除了他们的同学、老师和朋友，还有很多我熟悉的长辈。那些都是我小时候在同一个院区生活的叔叔阿姨们，时隔多年再相见，感慨万千。&lt;/p>
&lt;h2 id="云南之行">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#云南之行" class="anchor-link" aria-label="云南之行">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>云南之行&lt;/h2>
&lt;p>十一假期的时候，我独自一人乘飞机去云南玩了三天。第一天爬玉龙雪山，第二天逛丽江古城和「荒野之国」，第三天一大早坐火车去香格里拉，游览了独克宗古城和松赞林寺。四天的时间很短，还有很多想去但没来得及去的地方。如果今年有机会，我想接着走下去：虎跳峡、纳帕海，甚至稻城亚丁。&lt;/p>
&lt;h2 id="工作">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#工作" class="anchor-link" aria-label="工作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>工作&lt;/h2>
&lt;p>这一年公司内部迎来了比较大幅度的调整。几位领导的离职，部门的拆分与合并，办公地点换了不下三次。在新的工作模式下，不论是在镜头设计还是人员管理上，都迎来了很多挑战。通过这几年接手的项目，可以看出国内各大厂商在车用激光雷达的发展方向是基本一致的。两年前都还在搞 120° 的补盲雷达，现在的探测角度都拓展到了 180°，甚至都开始尝试做可见光和红外光的视觉融合。不知道今年又能兴起什么新的设计呢？&lt;/p>
&lt;h2 id="兴趣爱好">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#兴趣爱好" class="anchor-link" aria-label="兴趣爱好">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>兴趣爱好&lt;/h2>
&lt;p>这一年里我对模型的热情渐渐淡去，在自然博物和特装书上投入了更多的时间和精力。&lt;/p>
&lt;h3 id="钢琴">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#钢琴" class="anchor-link" aria-label="钢琴">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>钢琴&lt;/h3>
&lt;p>二〇二四年年底我买了一个电钢琴，想重新捡起这项技能，练习几首喜欢的曲子。这么多年没碰琴键了，早已生疏，但五线谱还没忘。每次到宁波火车站，看着摆在候车厅中间的那架钢琴，就有种想上去演奏的冲动。只不过现在没什么能展示的，还得练。&lt;/p>
&lt;h3 id="模型">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#模型" class="anchor-link" aria-label="模型">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>模型&lt;/h3>
&lt;p>现在定制人偶的圈子环境很差，发展的有些畸形。几家工艺比较厉害的工作室反反复复做一些热度比较高的人物头雕，题材限制在了超人、蝙蝠侠、杀神这几个当中。但正因为热度高，不论你出多少个版本的头雕，都有很多人抢着买。而我更喜欢一些经典老电影的人物角色，热度很低，头雕和衣服集单都集不起来，屈指可数的几个集单成功的项目，也都是项目发起人在用爱发电。所以这一年里我没怎么预定新的人偶，更多的是在补款。等这些之前预定的单子完成的差不多了，我想也就是封坑的时候了。&lt;/p>
&lt;p>另外，我趁着一时的热情，买了一套国产乐高 MOC——老亮超跑 01 号车。这是一款绿色的兰博基尼。主要是之前很好奇这一类汽车积木的传动、换挡是如何实现的，这一次终于搞明白了其中的奥秘。&lt;/p>
&lt;h3 id="标本">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#标本" class="anchor-link" aria-label="标本">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>标本&lt;/h3>
&lt;ul>
&lt;li>
&lt;p>&lt;strong>矿石&lt;/strong>：矿石标本是我这两年投入最多精力在收集的东西。为了平衡观赏性和收纳，我需要盯着闲鱼上的一些矿商，挑选造型好，晶体特征突出，能装入 3.4 cm 亚克力盒子的矿石。除了一些宝石矿，如海蓝宝、坦桑石等价格很高以外，一些来自封矿停产矿区的石头价格也很高，如美国的田纳西萤石，加拿大 Jeffery 的符山石。在收到矿石后，我需要调整摆放的角度，制作有关矿石名称、产地的标签。有时候为了确定产地，我要在网上搜索很久。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>贝壳&lt;/strong>：我还收集了一些贝类标本。不过不像矿石那样有明确的目标，一定要收集哪一类的。不论是海贝还是路贝，只要长得好看，价格合适，没有被人为的打磨壳口的，我都喜欢。和矿石一样，我把每一个贝壳都装进了透明的亚克力盒子，底部用棉花填充。但由于贝壳的尺寸差异较大，我用了不同大小的盒子来装。贝壳的标签和矿石太不太一样，很多贝壳在采集的时候会标注详细的采集地和采集方式，比如写上「来自 xxx 岛屿，由当地人于水深 50m 处采集」。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>节肢动物&lt;/strong>：节肢动物标本主要分为两种，一种是虾蟹类的，一种是昆虫。虾蟹类的标本制作起来比较麻烦，去肉，整姿，保色，这一套流程下来很费精力。所以目前我还只停留在「买」上，没有自己做。有一家叫 iollk 的工作室，他们做的虾蟹类标本，都是固定在黑胡桃木底座上的，还配有玻璃外罩，非常具有观赏性，我买了不少。昆虫类的标本都是我自己做的，把昆虫尸体软化，整姿，再用烘干机烘干，固定在虫卡上，最后放进标本盒里。一些体型较大的虫子就需要去肉，否则会由很大的味道，以及出油，后期处理起来很麻烦。目前这一类标本的标签让我很头疼，因为昆虫的种类太多了，我不太会查阅相关的资料，无法确定具体的物种，确定了物种也没法确定产地。但不做标签也不合适，毕竟一个具有明确学名、产地的标本才能算得上是真正的标本。&lt;/p>
&lt;/li>
&lt;/ul>
&lt;h3 id="书">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#书" class="anchor-link" aria-label="书">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>书&lt;/h3>
&lt;p>这一年里我买了不少书，其中有很大一部分是特装书。我比较注重实体书的装帧，否则我为什么不直接去看电子书？&lt;/p>
&lt;ul>
&lt;li>&lt;strong>草鹭&lt;/strong>：草鹭出品的经典名著系列，除了常规的一些漆布版外，我还买了真皮版的《堂吉诃德》《安娜·卡列尼娜》《红与黑》《大卫·科波菲尔》等等。草鹭的书基本都是形式大于内容，选用的译本都比较老，但装帧技术是远超人文和上海译文这些出版社的。&lt;/li>
&lt;li>&lt;strong>甲骨文&lt;/strong>：社科文献出版社的甲骨文系列，出了很多国外历史类书籍，其中有一些评分很高，对应的特装版更是在发售的时候秒空。我在孔网和闲鱼上花了高价买到了之前没抢到的《无垠之海》和《古埃及史》前两卷。&lt;/li>
&lt;li>&lt;strong>新古典&lt;/strong>：这是上海古籍出版社推出的新系列丛书，内容其实都不是新的，只是换了个更好的装帧和排版。目前出了三部，《传习录》《搜神记》《子不语》，我都买了。&lt;/li>
&lt;li>&lt;strong>其他&lt;/strong>：99 读书人出的短经典系列小说，我买了几本。这些书采用的是软皮线装，比较薄。由于都是短篇小说，很适合出门的时候带一本，在闲暇时候阅读。&lt;/li>
&lt;/ul>
&lt;h3 id="卡">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#卡" class="anchor-link" aria-label="卡">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>卡&lt;/h3>
&lt;p>这一年有不少卡商进军了盲盒。对我这种资金有限的普通玩家而言，盲盒自然是不敢触及的领域。盲盒的特点就是，每一批主题盲盒，会塞进好三四个画师、三四种工艺的三四张卡。你一个人是很难集齐某一画师某一工艺的全套卡。唯一的选择就是直接在闲鱼上买端箱大佬帮你凑好的一套卡。这肯定比你自己收集更方便，更省钱。现在的卡商选择盲盒模式也是可以理解的。因为画师的稿费越来越贵，等画师画好一套卡再出，要花很长的时间，要投入很多资金，收益少。&lt;/p>
&lt;p>我在这一年买的卡基本上都是普卡。前几年我热衷于粗闪工艺卡，但现在觉得，图画本身要比工艺更重要，且普卡更便宜。如果要选取一位年度画师，我选彫仙。他是戴家样第三代弟子，画风独特。他的《列仙卷》和《仙梦红楼》也是我年度最喜欢的卡牌。&lt;/p>
&lt;hr>
&lt;h3 id="新年计划">&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/#新年计划" class="anchor-link" aria-label="新年计划">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>新年计划&lt;/h3>
&lt;p>新的一年，新的开始。&lt;/p>
&lt;ol>
&lt;li>在工作上，需要继续深入学习专业技术，与其他岗位的人加强沟通交流，提升自己的专业水平。重视项目的完成质量和工作效率，提升自己的团队管理能力。&lt;/li>
&lt;li>多出去走走，带着相机记录下周边村落和沿海的风景。如果有机会，继续从香格里拉往西边走，体验下川西的人文与自然。&lt;/li>
&lt;li>多读书。我已经买了很多社科、历史类书籍，却没有给自己留出静心阅读的时间。&lt;/li>
&lt;li>合理消费。虽然说赚钱的目的就是买自己想要的东西，从而获得某种满足感。但在现在的年纪，需要积蓄。未来的一切都是未知数，要花钱的地方有很多，攒钱很重要。&lt;/li>
&lt;/ol>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/summary-of-2025/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/summary-of-2025/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/ideal/">理想</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
读书与藏书</title><link>https://guanqr.com/life/hobbies/book-collections/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/book-collections/</guid><pubDate>Wed, 31 Dec 2025 18:11:45 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>喜欢购买实体的纸质书籍。在我看来，电子书缺少了实体书的某些特性：读者与屏下显色的像素之间，永远隔着一面玻璃；而纸质书，读者可以嗅到油墨的清香，触碰到文字本身，用指尖感受文章的气息和脉搏。&lt;/p>
&lt;p>近些年，部分出版社为了降低实体书的印刷成本，打着「环保」的旗号，使用了一种叫作「轻型纸」的纸张。这种纸很容易氧化泛黄，存放在潮湿的环境中很快就会卷曲膨胀，甚至发霉，不宜长久保存。平装书采用轻型纸我尚可理解，但有些标着「纪念」「收藏」版本的精装书也使用这种纸，就有些违背收藏的理念了。现在有不少读者买书的时候会关注纸张的材质。如果想读的书采用了轻型纸，便不得不打消买书的念头，满脸写着失望。&lt;/p>
&lt;p>好在有的出版社察觉到了读者对轻型纸的厌恶。为了迎合读者的喜好，他们对部分书籍重新设计封面与内文排版，书口增加刷边，将纸张升级为纯质纸或无酸纸，甚至增加作者或译者的签名钤印和限量编号。这样的书被称为「特装书」，在市场上非常抢手。两年前的时候，特装书的热度达到了顶峰，有些出版社的特装书上架即秒空。&lt;/p>
&lt;p>我认为，买实体书的目的主要由两个：一是读书，二是藏书。二者之间不分主次，具体可分为四类：先读后藏、先藏后读、只读不藏、只藏不读。我自己应属于「先藏后读」之人，遇到喜欢的书先买下来，待清闲之日再翻阅品读。但清闲之日毕竟是少数，未读之书越积越多，让我逐渐成为「只藏不读」之人，颇为惭愧。「只藏不读」的行为动机很简单，有些书具有特殊价值，更适合归为艺术收藏品，宜远观而不宜翻阅。但我对有些人连书的塑料膜都不拆就直接入柜的行为并不认可。不拆封怎知内文质量如何？图文排版、纸张材质、印刷版次……这些都只有打开书才能知道。就算是我还没来得及看的书，拿到手的第一时间都会先拆封检查一下。既然这些人连内文都不过目，又何必用书砌墙？直接定做一版印有书脊图案的墙纸贴柜子更好。&lt;/p>
&lt;p>参加工作后，我买了一本由译林出版社出版的《尤利西斯》。这是一本很厚的「金砖」，封面和书口有着大面积的烫金和花纹，内页盖有译者的钤印。值得一提的是，我这一版书口花纹图案的《尤利西斯》数量很少。因为印刷厂在做了一小批后才发现，这种花纹很难雕刻清晰，良率低，后续便更换了花纹的样式。美中不足的是，这本书的封面采用了仿皮材质，书脊的烫金很容易磨损。但不论如何，这本书是我藏书的起点。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-0.jpg" alt="book-collections-0.jpg">&lt;span class="caption">※ 《尤利西斯》&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-1.jpg" alt="book-collections-1.jpg">&lt;span class="caption">※ 译者钤印&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-2.jpg" alt="book-collections-2.jpg">&lt;span class="caption">※ 书口刷金和花纹&lt;/span>&lt;/p>
&lt;p>我的藏书大致可以分为这几种类型：世界名著、文言古籍、当代小说、历史社科通识读物。在此，我想分享一些我认为的在装帧设计上花费心思的藏书，以及他们的购买渠道。&lt;/p>
&lt;ul>
&lt;li>&lt;strong>草鹭出品的世界名著&lt;/strong>。该系列书籍限量发售，第一发售平台是摩点。每一本书基本都会同步推出漆布封面版和真皮封面版两个版本。在摩点众筹结束后，剩余数量的书会上架在他们的微信小程序商城。此外，他们偶尔还会在商城中上架另一种封面设计的定制版本。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：无论是漆布还是真皮版，封面用料、烫金工艺和装帧技术都远超其他出版社；内文采用无酸纸，印刷清晰；每一本书都是一版一印，盖有限量编号，附赠藏书票；每一本书都有函套。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：价格昂贵；为降低出版成本，内文常选用过时的译文，校对错误率较高；草鹭不是出版机构，需要挂靠出版社出书，这些出版社并非市面上的主流出版社。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-3.jpg" alt="book-collections-3.jpg">&lt;span class="caption">※ 草鹭的封面设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-4.jpg" alt="book-collections-4.jpg">&lt;span class="caption">※ 草鹭的书脊设计&lt;/span>&lt;/p>
&lt;ul>
&lt;li>&lt;strong>后浪出品的「插图珍藏版」系列&lt;/strong>。该系列也是世界名著系列。每一本书的封面上都会印有「插图珍藏版」的标记。一般情况下，该系列会先推出普通精装版，后续会选取部分书籍再推出特装版。特装版相较于普通精装版，增加了书口刷边，更换环衬图案。该系列在各平台官方店即可直接买到。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：价格实惠；不通过限量进行饥饿营销；不论是黑白插图还是彩色插图都很多。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：同一系列的装帧风格不统一，封面有纸面和布面，书脊有圆脊和方脊，有纸脊和布脊，更有布面纸脊的奇葩操作&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/hobbies/book-collections/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>；有的书无函套，有的书有侧开口的函套，有的书有全包的书盒。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-5.jpg" alt="book-collections-5.jpg">&lt;span class="caption">※ 后浪的封面设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-6.jpg" alt="book-collections-6.jpg">&lt;span class="caption">※ 后浪的书脊和书口设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-7.jpg" alt="book-collections-7.jpg">&lt;span class="caption">※ 后浪的藏书票设计&lt;/span>&lt;/p>
&lt;ul>
&lt;li>&lt;strong>译林出版社的「方尖碑」系列&lt;/strong>。该系列是社科历史类书籍，均为国外作家的非虚构世界史作品。该系列特装书为限量版，在早期基本采用淘宝预售的方式发售，现在直接在各平台官方店现货发售。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：内文质量高；装帧精美，内外封面设计都很用心，书口有刷边，有些书还会赠送藏书票。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：出特装书的频率较低，一些评分很高的书没有特装版。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-8.jpg" alt="book-collections-8.jpg">&lt;span class="caption">※ 方尖碑的封面设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-9.jpg" alt="book-collections-9.jpg">&lt;span class="caption">※ 方尖碑的书脊和书口设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-10.jpg" alt="book-collections-10.jpg">&lt;span class="caption">※ 方尖碑的藏书票设计&lt;/span>&lt;/p>
&lt;ul>
&lt;li>&lt;strong>社科文献出版社的「甲骨文」系列&lt;/strong>。该系列和「方尖碑」一样，也是社科历史类书籍。该系列的特装书早期通过淘宝直播发售，现在也是直接上架各平台官方店。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：出特装书的频率较高，基本每个月都能看到新书发售预告。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：选题质量参差不齐；大部分特装书的装帧设计，无论是封面还是书口刷边，都很普通，达不到我心中特装书的标准。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-11.jpg" alt="book-collections-11.jpg">&lt;span class="caption">※ 甲骨文的封面设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-12.jpg" alt="book-collections-12.jpg">&lt;span class="caption">※ 甲骨文的书脊和书口设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-13.jpg" alt="book-collections-13.jpg">&lt;span class="caption">※ 甲骨文的译者签名&lt;/span>&lt;/p>
&lt;ul>
&lt;li>&lt;strong>上海古籍出版社的「新古典」系列&lt;/strong>。该系列整理了我国古代的一些经典文言著作，加以翻译和注释。内容其实都不是新的，只是请设计师重新设计了封面，升级了装帧和内文排版。目前只推出了第一辑，共五部作品：《传习录》《搜神记》《子不语》《洗冤集录》《古文观止》。每一部都推出了四个版本，版本间只有书口差异：黑金版、鎏金版、毛边版、喷绘版。四个版本都有限量编号。该系列的发售渠道有很多，但我推荐直接在壹书堂的微店购买，因为这一系列是壹书堂联合上海古籍出版的，他家店里上架的数量最多，更容易抢到。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：采用布面装帧，封面纹样设计精美，烫金精度极高；有限量编号；部分书籍还有译注者签名。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：该系列仅仅是换皮，内文并未重新校对，以前版本的错误仍然存在；古籍更应采用古字（繁体字）竖排，但该系列为简体字横排；热度太高，必须守着时间才能抢购到。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-14.jpg" alt="book-collections-14.jpg">&lt;span class="caption">※ 新古典的封面设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-15.jpg" alt="book-collections-15.jpg">&lt;span class="caption">※ 新古典的书脊和书口设计&lt;/span>&lt;/p>
&lt;ul>
&lt;li>&lt;strong>壹书堂定制的小说&lt;/strong>。壹书堂经常会与出版社合作，选取一些以前出过的小说，改为布面装帧，增加书口刷边，进行限量发售。有些书还含有作家亲签，热度很高。这些书在发售前会提前预告，到时间直接在壹书堂的微店购买即可。
&lt;ul>
&lt;li>&lt;strong>优点&lt;/strong>：价格很便宜；封面布料和颜色的选择都很用心；书口刷边图案是独家定制的。&lt;/li>
&lt;li>&lt;strong>缺点&lt;/strong>：由于价格很便宜，为了保证利润，同一系列每一本书的限量数量不一致；同系列书籍的出书效率较低，开的坑很多，但都没有填完。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-16.jpg" alt="book-collections-16.jpg">&lt;span class="caption">※ 壹书堂定制的布面版刘震云小说集&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-17.jpg" alt="book-collections-17.jpg">&lt;span class="caption">※ 刘震云小说集的书脊和书口设计&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-18.jpg" alt="book-collections-18.jpg">&lt;span class="caption">※ 壹书堂定制的布面版波拉尼奥小说集&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/book-collections-19.jpg" alt="book-collections-19.jpg">&lt;span class="caption">※ 波拉尼奥小说集的书脊和书口设计&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>这里依然要从收藏的理念出发进行解释。「插图珍藏版」的重点是「珍藏」。如果查阅一些欧式古典装帧的书籍便可发现，一些便宜的精装书会采用漆布封面而不是纸质封面，因为布要比纸更耐磨；一些工坊定制的精装书，即便不使用全真皮封面，也会在书脊处用真皮包裹，因为书脊要比封面更易磨损。因此，采用布面纸脊华而不实。&amp;#160;&lt;a href="https://guanqr.com/life/hobbies/book-collections/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/book-collections/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/book-collections/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/binding/">装帧</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/novel/">小说</category></item><item><title>
难以管理的「人才」</title><link>https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/</guid><pubDate>Sun, 28 Dec 2025 17:26:00 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>年秋季的时候，我们团队来了一位社招的工程师老哥。虽然挂着工程师的职称，但经过简单的沟通，我了解到他此前并未接触过这个领域的研发，也就是说和校招进来的人没什么区别，都是零基础——那好办，没基础就教他呗。我给他整理了很多参考资料，有讲解产品类型、产品工作原理的，还有产品开发流程、性能仿真分析教程等等。然后制定了一个简单的计划，给他安排了到哪一天要完成哪一部分的学习，提交一个分析报告。刚开始的时候我肯定不能直接把一个项目全交给他来做，只是让他跟着另一位同事，一起做设计和分析，逐步了解我们的工作内容。&lt;/p>
&lt;p>其实仔细想想，用对待零基础校招人员的方式对待一个工程师，有些过于宽松。团队里还有助理工程师，一个工程师，怎么能比助工做的事还少？如果只让他跟着别人的项目做，不自己单独做些什么，那只能成为一个小跟班，无法承担设计的责任。而且我这时候已经发现了一丝端倪：如果我不推着他去做一件事，他不会主动去做的。入职的时候发给他这么多资料，他从未打开过，给他制定的学习计划也只是一张废纸。后来正好来了一个简单的项目，我就直接交给他来做了。&lt;/p>
&lt;p>这是一个简单到不能再简单的代加工项目，客户设计，我司加工。我们只需要仿真一下客户输入的设计，看看加上制造公差的性能能不能满足客户的规格即可。这里需要先介绍一些基本概念。一般镜头的性能规格有：FOV、EFL、FNO、DIST、CRA、RELI、MTF&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。但这个项目是一个激光发射镜头，对像质要求不高，客户只关注 FOV、EFL、MTF 这三个性能，这就更简单了。在我的概念里，这种纯仿真分析的事，老手两个小时以内就可以完成，新手的话修修改改估计要一天。考虑到这是他的第一个项目，日程上也不急，就留了两天的时间。&lt;/p>
&lt;p>然而两天过后，他并没有把分析结果发给我，这期间他也没有找我问过任何一个问题。我只好主动找他，向他要分析报告。&lt;/p>
&lt;blockquote class="quote">
&lt;p>我：这几项分析完了吗？&lt;br>
他：分析完了。&lt;br>
我：分析完你找我看一下啊，我不问你就不发出来？谁知道你分析完了？&lt;/p>&lt;/blockquote>
&lt;p>他慌里慌张地在某个盘里的文件夹中翻找着报告，打开一个 Excel 文件，里面是一个没有填写完整的表格。&lt;/p>
&lt;blockquote class="quote">
&lt;p>我：你这叫分析完了？客户要求的 FOV 公差是多少？&lt;br>
他：百分之二。&lt;br>
我：你分析出来的公差是多少？&lt;br>
他：可以满足百分之二。&lt;br>
我：你分析出来的具体数值是多少？&lt;br>
他：我大概估算了一下，可以满足要求。&lt;br>
我：你的分析报告呢？评估镜头规格能估算吗？如果你答应客户能做到，实际做不到怎么办？&lt;br>
他：我觉得可以做到。&lt;br>
我：我要看到具体的分析过程，数据来源，分析结论。你这表格空着那么多格子，是留着等谁写呢？&lt;br>
他：那我写下报告。&lt;/p>&lt;/blockquote>
&lt;p>好嘛，我想着两天时间，怎么着也能完成报告了，结果他还没动。他说他估算了一下，他都没有做这个类型产品的经验，用什么来估算？如果我当时不找他，他还在那干等着，不知道在做什么。又过了一天，他把报告交了上来，里面还是空着很多地方没有填写数据，或是填写了错误的数据。我给他指出了错误，又打回去修改了一天，再交上来，依然没改，甚至前一天我帮他改过的数据，他又改了回去。我一时竟不知可以说些什么了……只能让他再改。就这样磨磨唧唧了一周的时间，总算有了明确的分析结论。&lt;/p>
&lt;p>类似的对话场景在这半年里多次发生。每一次我都是强压着怒气，反反复复给他指出分析和报告中出现的错误，但他依然我行我素，全然把我之前给他讲的东西抛于脑后。到现在，我唯一能做的事，就是用一张表，记录下每一次他找我审核设计方案和报告时出现的错误，统计同一个错误会重复发生几次——十二月当中，出现了 30 多个分析错误或不规范的地方，有 4 个问题在同一个项目中重复发生超过 3 次，这甚至是前后两天连续发生的问题。&lt;/p>
&lt;p>他在一月份马上要进行转正答辩了。由于新的一年部门要进行调整，他被安排到了另一组里，或许我接下来有机会松口气缓解下压力。不过在答辩前我依然要陪他走完最后这一程。诸位可能无法从前文讲的故事认识到这个人的工作能力到底怎么样，可能觉得：这不就是效率低，错误多了些吗？他还是个新手，学习是个循序渐进的过程。为此，我详细列举下他在工作中出现的问题，或许你能从中感受到一点点我的无奈：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>不按照客户要求进行设计&lt;/strong>。一般来说，镜头的设计和规格的确认需要有一个和客户打合的过程。但在接到客户初版规格要求，开展初版方案设计的时候，一定要尽可能的满足客户的要求，如果不能满足要求，也要说明需要怎么做才能满足要求。比如，客户在规格书中要求采用 3 枚球面镜片进行设计，他交上来的方案却是 4 枚球面镜片的。这显然不符合客户的要求。按照正常的逻辑，你需要提交一版使用 3 枚球面镜片的方案，证明使用 3 枚球面镜片无法达到客户的性能要求，为了满足性能要求，就需要再加一枚球面镜片，或者将其中一枚球面镜片改成非球面镜片。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>总是遗漏某些性能的评估&lt;/strong>。据我观察，他从来没有把客户的规格书从头到尾完整看过一遍。正常来说，你需要把客户所有的要求都看清楚了才能开始设计，他确总爱跳跃着看。比如客户的规格书有 10 页，列出了 30 个评估项。他会按照 3、5、8、15、2、7、1、23 这样毫无规律和逻辑的方式去看。这就导致他总会遗漏某些客户的要求。当我问他客户对产品的工作温度有没有要求的时候，他竟然都不知道这个要求是在规格书中的哪一页。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>擅自修改或增加客户要求&lt;/strong>。这一点更绝了。他总是爱自以为是地修改或增加某些客户没有提到的要求。比如，有一项性能没达到客户要求，他就直接把要求给改了。又比如，客户关注的性能是成像光斑的大小，根本没提到 MTF，他却自行添加了一项 25 线对 MTF 的要求。我问他为什么增加要求，他就说他觉得要加。我在问他就算要加 MTF 的要求，为什么是 25 线对的 MTF 呢？他的回答仍是他觉得是 25 线对。我很想知道这些无凭无据的东西到底是从哪冒出来的。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>无法正确输出设计方案的仿真结果&lt;/strong>。最初在读取 RELI、DIST 这种性能的时候，总是忘记考虑镜头渐晕的影响。现在这样的问题有些改善。但在读取 FOV、CRA 的时候，明明十秒内就能读出来的数据，总能拉扯到五分钟才读出来。打开仿真软件后，还需要思考要读什么性能，需要按哪个按钮才能读出这个性能。甚至反复读了三次，这三次每一次读出的结果都不一样。因为这第 2、3、4 项的问题，我每次审核他的评估报告时，都需要拿出客户原始的规格书一条一条的核对，我根本无法相信他把客户所有的要求都列了出来，进行了准确的评估，这大大增加了我的工作量。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>分析报告书写质量极差&lt;/strong>。我特别注重报告的格式，不论内容如何，一份报告首先要做到整洁美观。我会在字号、行距、图片位置这些细节上花很长时间进行调整。而他呢？在报告的格式方面，混用字体、字号、标点，错别字，语病的问题常常出现，表格连标题、边框都不加。只放上一堆数据，根本无法知道这些是什么东西的数据。内容方面，除了上文 1 至 4 项提到的问题，最突出的问题就是结论不明确。他总是不写结论，或者说写的结论和分析的内容在逻辑上连不起来。这种低质量的报告怎么发给客户看？&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>语言表达能力和理解能力不足&lt;/strong>。沟通是社会活动中必不可少的环节。不论是和亲朋好友聊天，还是和上级汇报工作、协助其他岗位同事解决问题，都需要一个人能准确理解对方的话，并能清晰准确的把自己的观点表达出来。他的理解能力不行。在我给他讲解报告书写要点的时候，他总是点头答应，似乎是明白了我说的内容，但实际上并没有理解，依然会做出错误的行为。有一次，某个他负责的项目出现了问题，需要在 A 和 B 两种解决方案中二选一执行。我告诉他按照 A 执行，他却理解成了 B。过了三天后我才得知他是按照 B 做的，当场吓出一身冷汗，好在最后没有产生严重的问题。他的表达能力也不太行。在汇报项目进展的时候，他总是扯东扯西扯一堆没用的东西，根本无法说清楚当前的项目做到什么程度了，有没有出现什么问题。每一次我都需要问和他一起参加项目会议的其他岗位的同事，才能准确掌握项目进展。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>英语能力极差&lt;/strong>。有一些欧洲客户的项目，在交流的时候需要我们把设计资料翻译成英文。这原本是营销的工作，但由于涉及到很多专业领域光学原理的东西，让研发人员来翻译比让不懂技术的营销来翻译更好。他翻译报告的方法就是：复制报告中的一段文字，直接扔给翻译软件或 AI，再把翻译结果复制回报告。不是说这种方法不可以，能提升效率自然是好事，但他从来不再人工校对一遍看看翻译是否有问题。其实只要从头到尾把句子读一遍，就能很容易发现这些问题。比如专有名词的错误，这是机翻不可避免的，机器不清楚在某些特定领域里某些特定名词的中英文对照关系。甚至有些东西在不同公司都有不同的中文叫法。我审核他的报告时经常发现，对于某个零件，同一份报告里能够出现三种不同的翻译。又比如定语位置的错误。读完一句话，我竟无法判断这个定语修饰的是主语还是宾语。如果直接扔给机器一个过于口语化，啰里啰嗦的中文句子，翻译出来的英文自然会很容易出现混乱。在他中文表达能力就很不好的情况下，机翻出准确的英文更是异想天开。当然，或许是我错怪他了，或许他校对了机翻的内容，但以他的英文水平无法发现其中的问题——一些简单常用的单词他都不会拼写，比如 &lt;em>energy&lt;/em>、&lt;em>solution&lt;/em>。我把英文单词念出来给他听，他都无法顺利写出来。这不应该是一个正常大学生应有的水平吧。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>计算机基本技能水平很低&lt;/strong>。或许他以前没怎么用过计算机，打字的速度非常慢，天天和输入法斗智斗勇。每一句话都会打出错别字，需要反复修改。如果打字快出现错别字可以理解，打字这么慢，每个字都要在输入法里找半天，这也能打错？另外，他在使用 Excel 表格的时候不知道怎么换行，只会通过增加空格进行换行。在查阅报告时，他会先进入「此电脑」，进入「D 盘」，再进入层层文件夹，翻找这个要找的报告。报告找到并打开后，如果我让他打开在同一目录下的另一个报告，他会选择直接退回到最初的「此电脑」页面，重新进入「D 盘」，又在一堆文件夹里找来找去。每打开一个报告都要进行这样的操作，这种难以理解的行为浪费了大量的时间。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>做事效率很低&lt;/strong>。效率低是必然的。上文总结的所有问题都是造成效率低下的原因。如果发生设计错误、分析错误，就需要重新设计和分析；报告写的不行，就需要反复修改；语言表达能力不行，就进一步促使报告的质量低下；计算机水平不行，就会拖慢任何一项任务。至此，所有的问题都捆绑在一起了。最终反映出的现象就是，他所做的每一件事，都要比别人花费超过 3 倍的时间才能完成。我们 1 小时完成的报告，他需要 3 小时；我们 1 天完成的设计，他需要 3 天。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;p>他给我的感觉似乎是不会主动学习、反思问题、总结经验。我问他清不清楚他设计的镜头用的芯片是什么型号的——不知道。我问他清不清楚他设计的镜头是怎么测试的——不知道。这个项目已经做了三个月了，这些很基础的东西他还是不了解，明明问问身边的人就一清二楚了，他什么都不问。我告诉他要做什么事，报告要怎么改——他记不住，转头就忘。那为什么不用本子记下来？非得每天把时间浪费在修改报告上？如果不是脑子有问题的话，那只能说是态度有问题。&lt;/p>
&lt;p>你如果不是一个善于创新的技术达人，最该做到的应是听从指挥，而不是坚持自己愚蠢的行为。你做错了，别人告诉你要怎么做了，你还要坚持自己的想法，做你以为正确的事，那消耗的只有别人的热情和耐心，最终别人会放弃对你的期待。转正后的路，只有自己走了……&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>这几项均为表征镜头光学性能的专有名词。FOV：Field of View，视场角。EFL：Effective Focal Length，焦距。FNO：F-Number，F 数。DIST：Distortion，畸变。CRA：Chief Ray Angle，主光线角。RELI：Relative Illumination，相对照度。MTF：Modulation Transfer Function，调制传递函数。&amp;#160;&lt;a href="https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/an-employee-who-is-difficult-to-control/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/management/">管理</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
东北故事集</title><link>https://guanqr.com/life/books/the-stories-of-northeast-china/</link><guid isPermaLink="true">https://guanqr.com/life/books/the-stories-of-northeast-china/</guid><pubDate>Mon, 10 Nov 2025 18:45:43 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-stories-of-northeast-china.jpg" alt="the-stories-of-northeast-china.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">花&lt;/span>了一晚上的时间，把迟子建在 2024 年出版的《东北故事集》看完了。我原本没有打算买这本书。但在某个卖书的直播间闲逛的时候，看到主播正在卖这部书的毛边本，就买了一本。据主播说，这是出版社自留的一些毛边本，一版一印。但因为办公室要搬走，不想带走这些书了，就让主播卖掉。不知此话是真是假，但我确实没有看过迟子建的作品，价格也不贵，就入手了。&lt;/p>
&lt;p>和其他小说集相比，这本书的书名过于直白。「东北故事集」，根本没有用到任何修饰的手法。如此简单的名字，让我很难猜到里面所要讲述的故事。作者根本没想着从书名上吸引读者。&lt;/p>
&lt;p>阅读完毕。我终于知道，这本书里有三个故事，主人公都是「我」，但都是独立的「我」。三个故事的共同点是，「我」所处的时代背景是疫情的那三年。「我」还要戴口罩，出门要做核酸，查绿码。没想到现在的作家这么快就在作品里使用了「疫情」这样的背景。我以为起码要等个五、十年，这样的故事才会出现。现在才过去三年，回顾那段时间，仿佛遥远的像在上个世纪。故事的主体并非是疫情之事，而是「我」通过某些人某些事，与过去建立了联系，经历了一些具有魔幻现实色彩的事。&lt;/p>
&lt;p>这三篇故事分别为：《喝汤的声音》《白釉黑花罐与碑桥》《碾压甲骨的车轮》，我最喜欢的故事是第二篇。「我」划船落水，在生死停留之际，遇到了一位为宋徽宗做瓷器的人的后代。他讲述了宋徽宗囚禁于此地之时，让他的祖先把徽宗的一颗牙磨碎，掺在料里做白釉黑花罐的事。而碑桥的由来，则是当年宋徽宗留在此山中一副碑画，后来人们用此碑修桥了。虽然这只是一篇小说，里面的文物都是虚构的。但我仍感受到了些许国破家亡的悲痛。宋徽宗是我最喜欢的皇帝，他爱山水，爱字画。在文艺上的造诣，令人惊叹。虽然大宋王朝走向了末路，但他又如何能左右呢？&lt;/p>
&lt;p>我喜欢宋朝的辉煌，也认可它注定要灭亡。它晚期的遭遇并非仅有苦难，还在历史长河中留下一曲浩瀚的悲歌。正如「仲尼厄而作春秋」，动荡的时代出了多少文人与豪杰。我在开封生活了十余年，这是我童年所在之地。如今，大宋的辉煌已无痕迹，留下的只是一些传不出胡同的小城故事，以及压在泥土下的平淡岁月。些许有一丝不易被察觉的呐喊在尘土间回荡。&lt;/p>
&lt;hr>
&lt;p>其实我不怎么喜欢毛边本。毛边本的讲究之处在于，书籍在发售的时候，页与页之间未裁开。这其实就是「十六开本」「三十二开本」中「开」的意思：一张完整的纸，做成三十二开的书，就表示能裁开三十二页。在你买到毛边本后，需要自己拿着小刀，看一页裁开一页。在我亲自体验一番之后，感觉这样的行为有些蠢。这种操作十分影响我的阅读速度和思维的连续性。当你看完一页之时，特别是这一段话还没有结束，想要立刻接上下一页的句子，却突然要花费几秒钟裁书，实在是扫兴。所以我在阅读之前，先把每一页都裁开了，地上全是掉落的碎纸屑。所谓文人的「雅」，并不应该体现在这种操作上。&lt;/p>
&lt;p>现在的毛边本还有一个不符合毛边理念的问题——扩封。由于内页未裁，留下的纸张比一般的书要大一圈，所以为了满足封面比内页大的逻辑，出版社选择加大封面。但实际上，难道不应该要保留原本的封面的大小吗。毛边本的定义只是内页未裁，又不是封面未裁。&lt;/p>
&lt;p>我想，我今后还是不要购买这样的毛边本了，这不是我在阅读纸质书时想体验到的东西。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/the-stories-of-northeast-china/" target="_blank" rel="noopener">https://guanqr.com/life/books/the-stories-of-northeast-china/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/magical-realism/">魔幻现实</category></item><item><title>
骑士、死神与魔鬼</title><link>https://guanqr.com/life/ideas/knight-death-and-the-devil/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/knight-death-and-the-devil/</guid><pubDate>Thu, 30 Oct 2025 19:58:15 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-0.jpg" alt="knight-death-and-the-devil-0.jpg">&lt;span class="caption">※ 收到的三幅画&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">十&lt;/span>月底，宁波日益寒冷，今天还下了一整天的雨，室外更显的冰凉刺骨。今天最开心的事便是我在九月份预订的丢勒铜版画《骑士、死神与魔鬼》安全送到家门口了。商家选用的是菜鸟快递，在发出地北京就转了三天，是慢了些。但快递的包装非常好，好几层纸箱包裹着，可以毫不夸张的说，单单这个包装就已经算是艺术品了。我拆的时候都小心翼翼的，想以最完整的状态保留整个包装盒。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-1.jpg" alt="knight-death-and-the-devil-1.jpg">&lt;span class="caption">※ 《骑士、死神与魔鬼》&lt;/span>&lt;/p>
&lt;p>这次买的画有三张，都是丢勒的作品，由 Hildebrand 版画工作室出品。其实算是买二赠一，或是买一赠二，因为重中之重是《骑士、死神与魔鬼》这一幅画，其他两幅都不重要。这幅画的卖点就是，它和一般常见的画作复制品不一样。一般的复制品都采用艺术微喷的工艺，这种工艺可以很好地还原原画细节，不会出现打印的像素点。但这毕竟已经是烂大街的工艺。而《骑士、死神与魔鬼》这一幅画，是完完全全复刻了铜版画的制作工艺。先蚀刻出了一个母版，在母版上涂墨，再覆盖上一张纸，通过压印，把墨汁印在纸上。这才是原汁原味的铜版画。&lt;/p>
&lt;p>这幅画所展现的内容是&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/ideas/knight-death-and-the-devil/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>A stolid armoured knight on a proud horse, accompanied by his faithful dog, rides through a wild narrow gorge flanked by a goat-headed devil and the figure of death riding a pale horse. Death's rotting corpse holds an hourglass, a reminder of the shortness of life. The rider moves through the scene looking away from the creatures lurking around him, and appears almost contemptuous of the threats, and is thus often seen as symbol of courage; the knight's armour, the horse which towers in size over the beasts, and the oak leaves are symbolic of the resilience of faith, while the knight's plight may represent Christians' earthly journey towards the Kingdom of Heaven symbolized by the city on the hill.&lt;/p>&lt;/blockquote>
&lt;p>在我看来，于版画艺术领域，丢勒是前无古人，多雷是后无来者。两位都是我非常喜欢的画家，他们都创作出了很多不朽的作品。希望以后有机会可以多收集一些他们的作品。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-2.jpg" alt="knight-death-and-the-devil-2.jpg">&lt;span class="caption">※ 细节展示（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-3.jpg" alt="knight-death-and-the-devil-3.jpg">&lt;span class="caption">※ 细节展示（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-4.jpg" alt="knight-death-and-the-devil-4.jpg">&lt;span class="caption">※ 细节展示（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/knight-death-and-the-devil-5.jpg" alt="knight-death-and-the-devil-5.jpg">&lt;span class="caption">※ 细节展示（四）&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://en.wikipedia.org/wiki/Knight,_Death_and_the_Devil" target="_blank" rel="noopener">Knight, Death and the Devil | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/ideas/knight-death-and-the-devil/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/knight-death-and-the-devil/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/knight-death-and-the-devil/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/art/">艺术</category><category domain="https://guanqr.com/tags/copper-etching-plate/">铜版画</category><category domain="https://guanqr.com/tags/durer/">丢勒</category><category domain="https://guanqr.com/tags/religion/">宗教</category></item><item><title>
一只猫，一场偶遇</title><link>https://guanqr.com/life/ideas/an-encounter-with-a-cat/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/an-encounter-with-a-cat/</guid><pubDate>Wed, 15 Oct 2025 21:19:37 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>段时间我每天晚上出门散步的时候，都会先穿过马路对面村子的主干道，来到另一边的中山北路，一直往南走，走五公里后再折返，这样来回正好十公里。这条路再往北就正对着余姚北站，晚上车很少，路边很开阔，都是未开发的空地，非常适合运动。&lt;/p>
&lt;p>有天晚上将近零点的时候，我正在这条路上往回走，在一个小工厂的栅栏外遇见了一只很瘦小的狸花猫，身上沾满了土，在栅栏中穿来穿去地玩。我走过去，它也靠近了我，边蹭边叫。我挺想摸一摸它的脑袋，但毕竟家中还有一位公子，我怕带回去细菌或者其他不干净的东西，只好用腿来逗逗它。我准备离开的时候，它还跑过来追我。就在那一刻，我内心突然有了一个念头，想把它带回去，不让它再流浪。毕竟这是马路边，窜来窜去很危险。但我没找到纸箱或者袋子，一般这种东西早就被收破烂的人捡走了——我只好放弃。&lt;/p>
&lt;p>第二天晚上我出发运动的时候，带上了一个帆布袋和一小包猫粮，想着如果还能遇到它的话就带回来。在去的路上，当我走近工厂栅栏的时候，那只小猫就在栅栏里蹲着。看到我过来，一边叫着一边跳了下来，跑到我脚边。我刚开始运动，总不能现在就带走它吧。我只能先倒了点猫粮给它，继续往前走。等我回来的时候，它已无踪影。看来又错过了。&lt;/p>
&lt;p>九月底的一天，下午乌云密布。已经很长一段时间没下雨了，这次估计会很大。我还在公司上班，猛然想起了那只猫。不知道现在它还在不在那一片区域，如果下雨的话有没有避雨的地方。要是我早把它带回来，就不会有这么艰苦的生存条件了。下班后，我匆匆回家带上了猫粮，骑上一辆共享电动车，直奔那个工厂。找寻一小会儿，便发现它在机动车道和非机动车道之间的绿化带里。我又给它撒了一把猫粮，它大口的吃起来。当我整考虑着如何把它带走之时，不远处一位抱着婴儿的大妈朝我这边喊叫，嚷嚷着不知道在说什么。我走了过去，才知道她说的是这并不是流浪猫，不让我带走。&lt;/p>
&lt;p>看来是我多虑了。既然它已有人照顾，我便不必再想此事。可我自始至终都无法相信，这样一个瘦削，脏兮兮的小猫是有主人的，比我见到的其他流浪猫都要瘦。放任它在车来车往的马路边上玩，丝毫没有考虑过有什么危险。可既然事实如此，我也不好说什么，把剩下的猫粮都留给了它，自己骑车返程。&lt;/p>
&lt;p>幸运的是，那天傍晚积压的乌云随着夕阳的落下悄然散去，没有落下一滴雨水。那天好像发生过什么，又好像什么也没有发生。&lt;/p>
&lt;p>十月开启，我出去玩了几天，回来后换了条人更少的线路锻炼。再后来，我体重减到了目标值，就再也没走过十公里的路，自然也未再路过那个工厂。不知道现在它是否还在那里，寒冬降临，能否顺利度过这一年。&lt;/p>
&lt;hr>
&lt;p>最后谈谈动物保护的问题吧。&lt;/p>
&lt;p>如今网上有很多奇奇怪怪的人，要求出台所谓的动物保护法。我认为，他们口中的保护并非全盘保护，而是以个人的主观意愿选择性的保护。如果仔细分析他们的观点便能发现有很多矛盾之处：&lt;/p>
&lt;ol>
&lt;li>为了保护流浪猫，在公共场所放置投喂机，甚至在野生鸟类聚集的湿地搭建猫窝，促进流浪猫的繁殖，危害原本需要保护的鸟类。&lt;/li>
&lt;li>不愿意收留流浪猫狗到自己的家中饲养，任由其暴露在人类活动的复杂场所，称之为「自由」。但放任其在人类活动的环境中，会大大增加死亡的概率。&lt;/li>
&lt;li>经常把「狗是通人性的，是人类的朋友」挂在嘴边。出门遛狗的时候不栓绳，咬到路人了或者引起交通事故了却不愿意负责。&lt;/li>
&lt;li>反对某些地方的特定习俗，比如吃狗肉。但可以接受用鸡、牛、鱼肉做的狗粮。&lt;/li>
&lt;li>……还有很多很多就不一一列举了。&lt;/li>
&lt;/ol>
&lt;p>尽管我们都清楚某些行为是虐待动物。但确实无法明确定义这种行为。你以为的虐待，只是因为你对别人开展的某些行为感到反感。小体形的猫狗带有先天心脏疾病。加菲猫的鼻腔很短导致眼睛经常流泪。矮脚猫的四肢很短导致行动不便。这些畸形的基因本应在自然选择中淘汰，却因为某些人特殊的喜好得以保留，还越来越多。我相信有部分人和我一样很反感此类畸形的品种，我觉得这可以算是一种虐待，因为这给动物造成了永久的基因层面的伤害。但喜欢此类品种的人呢？他们却觉得这样的动物很可爱。包括剪耳、断尾，都是以个人喜好的角度对猫狗进行的某些伤害，却很难说这是虐待。&lt;/p>
&lt;p>说白了，我们生活在人类社会，一切的一切都是以人类为基准的。你的宠物只能算是你的所有物，是一项财产，无法享有人的权利。面对某些人对动物做的某些让你反感的行为，你最多只能对他进行道德层面的谴责。如果你有自己的宠物，照顾好它，保护它不被别人伤害就好了。不要干涉别人的行为，因为这与你无关。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/an-encounter-with-a-cat/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/an-encounter-with-a-cat/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/cat/">猫咪</category></item><item><title>
夏日一梦</title><link>https://guanqr.com/life/ideas/a-summer-dream/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/a-summer-dream/</guid><pubDate>Sun, 13 Jul 2025 18:54:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">儿&lt;/span>时的夜晚总会做梦。随着待在这个世界里的日子越来越长，做梦的概率越来越低。或许是因为，人在小的时候经历的事情少，大脑中空白的地方太多，梦就很容易趁你最放松的时候溜进来。长大后，生活上的烦恼事太多太多，疲倦的大脑只想休息，无暇做梦。&lt;/p>
&lt;p>大多数时候，在梦醒的那一霎那，你会对刚刚做过的梦有着十分清晰的印象。但再过一小会儿，可能就在你犹豫要不要再睡一会儿的时候，你刚刚「经历」的一切都烟消云散。我之所以能记下此篇梦境，是因为我在刚醒来的那一刻，就抓紧时间用手机的记事本记下来能回忆起的一切。尽管仍有少许遗忘的细节，但至少避免了全部丢失。而我之所以会在梦醒时刻破天荒地记录下所做之梦，是因为这场梦太过深刻。那么真实，却又那么虚无。&lt;/p>
&lt;blockquote class="quote">&lt;p>记录时间：2025 年 7 月 13 日 5 时 23 分&lt;/p>
&lt;p>有些事，虚无缥缈，似乎是场梦。梦醒后，你抛之于脑后，再无留念。&lt;/p>
&lt;p>可不知为何，多年后的一个晚上，辗转反侧中入睡，你又梦见了那些人，又想起了那些事，潸然泪下。&lt;/p>
&lt;p>母女二人，女儿是个盲人，父亲不知在何处。&lt;/p>
&lt;p>初次见面时，是在我上初三的那个冬季。小区的花园里上了一些冰雕。我要去另一座城市念书，临走前在这里停留。我遇见了他们。母亲带着她，扶着她的手，触摸着那些雕塑，去感知冰凉。后来太阳太耀眼了，温度上升了很多，冰雕有些融化。有一位好心人走了过来，说让他们明日再来吧。他在晚上默默填补了冰雕上融化的部分。但我第二天已经走了，再也没见到后来的情景。&lt;/p>
&lt;p>多年后，我再次回到这里，正赶上小区搞活动，展览老式兵器。草地上陈列着一些炮台武器。我在这里又见到了她。当时我还没有想起这是谁，只是看到她在很主动地和陌生人打招呼。我叔叔一家人也在。他在给我们认真科普这些兵器的生产年代。还特意向她讲了这些兵器。但讲了许久，对面却没有任何反应。稍等片刻，对面才说自己是个盲人，没办法知道炮台的样子。她一直在这个花园里，一直面带笑容。&lt;/p>
&lt;p>回家后，我一直忘不掉那个笑容，总觉得在哪里见过她。后来终于想起，那个冬天我们确实见过。于是，我在小区里询问邻居，打听到她住在哪里，想要再见她一面，她同意了。&lt;/p>
&lt;p>在她家里，客厅的中间摆着一个错综复杂的儿童玩具城堡，里面有很多机关。有点像以前公园里常见的那种儿童游乐设施。正常小孩子爬起来很费劲，但她却乐在其中。她早已记下各个机关的位置，通过每一关的时间。每一次都在努力用更短的时间通过。在最高一层，她停下来脚步，说还没有记下这一层的机关，下一次再挑战。&lt;/p>
&lt;p>我告诉她，我们曾经见过，就在那个冬天。已经过去这么多年，不知道她是否还记。她思索了片刻，想到了什么。我问她当时第二天发生了什么。她说，那个好心人真的帮她重做了冰雕，那天她玩的很开心。我脑补了那天后来发生的事，很佩服她的勇敢，很佩服她对人生乐观的态度。&lt;/p>
&lt;p>走后，看着眼前的路，不觉双眼模糊。&lt;/p>
&lt;/blockquote>
&lt;p>以上就是我记录下的全文。你可认为这里所谓的「记录下的全文」是我虚构的故事，也可认为包括这篇文章的引子也是虚构的，亦可认为全篇都是真实的。这都无所谓。梦最奇怪的地方在于，在你刚醒的时候，你总会觉得梦里的一切都是真实的，就算你认定了梦是假的，但梦里的有些事，你依然会觉得是真的。&lt;/p>
&lt;p>我不曾认识什么盲人，亦没有见过什么冰雕。但那场冬季的相遇，是整个故事的源头。我甚至在「多年后」的第二个场景中，去回忆第一个场景，相当于是梦中梦了。在虚假的故事里，回忆起另一段虚假的故事。那么你在第一层中，需要相信自己经历的第二层是真的，而你在现实中，又需要构建真实的第一层。这样一来，第二层的真实感就更重了。&lt;/p>
&lt;p>不得不说，能做出这样的梦，我也是佩服自己的想象力。其实最近我还做过三重梦境。但那时的大脑实在是太混乱了，醒来之后就已经什么都不记得了。电影《奇异博士》对梦境有一种解读。梦里发生的一切都是真实的，只不过梦里的这个主人公不是你所在宇宙中的你，而是平行宇宙中的你。这是一种很浪漫的解释。不论好梦坏梦，都还有另一个世界，另一个你，他也会做梦，也会梦到你在现实经历的故事。&lt;/p>
&lt;p>你在这个宇宙中也许是孤独的个体，但还有不同的宇宙不同的你。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/a-summer-dream/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/a-summer-dream/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/dream/">梦</category></item><item><title>
永不消逝的电波</title><link>https://guanqr.com/life/ideas/the-eternal-wave/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/the-eternal-wave/</guid><pubDate>Fri, 06 Jun 2025 19:02:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-eternal-wave.jpg" alt="the-eternal-wave.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">作&lt;/span>为一个电影爱好者，我很早之前就听过「永不消逝的电波」这个名字。早在 1958 年，王苹导演就拍过一部叫这个名字的电影。那部电影虽然只有黑白画面，音质也比较差，但依然属于我国经典电影之一，跨越六十多年的岁月仍闪耀着璀璨的光芒。我正是通过那部电影，了解到这是一个讲述上海地下党联络员李侠秘密传递情报，为革命事业奉献的故事。&lt;/p>
&lt;p>去年某日在杭州集章的时候，正赶上这部剧在杭州金沙湖大剧院演出。在门口我看到了宣传海报，惊讶于这居然是一部舞剧。我看过音乐剧和话剧，这两种形式都通过大量的台词对话来讲述故事，观众能够很容易沉浸到剧情中。很难想象这种谍战元素的故事，如何用舞蹈来传递情感的。当时的我原本想购票观看，但时间太晚了，我只能带着遗憾离开。&lt;/p>
&lt;p>五月上旬的时候，我得知这部剧会在端午节期间来余姚巡演。正好我假期并无安排，便想着买票来看。巧就巧在，公司的党支部组织了一场观剧的活动，免费发了一些票，我便报名参加了。省了五六百元，这样的机会怎能错过？&lt;/p>
&lt;p>这个故事的主角是李侠与兰芬夫妻二人。李侠是星报报社的编辑，中共华东局情报组发电员。兰芬是上海丝绸厂的工人，中共华东局情报组报务员。全面抗战爆发后，他们潜伏在上海从事地下情报工作，面对特务的阻挠与追查，裁缝、车夫等等战友们的英勇就义，他们冒着危险一次又一次将情报传递给延安。然而，在故事的最后，李侠牺牲在了上海解放前夕。「同志们，永别了，我想念你们！」这是他发出的最后一段信息。&lt;/p>
&lt;p>整部剧中我印象最深的情节是，在特务柳妮娜查出报社的地下党成员后，一群带着镣铐的人从舞台后方出场，踉跄着向前走着。接着，这些被抓的同志们一个又一个倒下，只留下李侠一个人痛苦挣扎。这一幕演员们的动作铿锵有力，和其他场景的舞蹈姿态形成强烈的对比，极具感染力。无不体现着他们坚定的意志，与敌人抗争到底的决心。&lt;/p>
&lt;p>剧中没有一句台词，但从演员们的舞蹈动作，以及不同的配乐、光影，我感受到了雨夜的压抑、战友牺牲时的悲壮、躲避追捕时的紧张……部分情节还使用了插叙和倒叙的手法，展现了「时光倒流」「梦境」「回忆」等等，这在舞剧中称得上是非常巧妙的设计。比平铺直叙的方式更能让观众感受到情节的波动。&lt;/p>
&lt;p>虽然说李侠这一角色是以李白烈士为原型塑造的。但他的事迹代表的不仅仅是李白一个人。他是当时众多地下工作者的缩影。「永不消逝的电波」，从字面来看，表示的是在抗战中永不停歇的情报传递工作；深入来看，是所有参与解放事业的革命者们坚定不移的信念。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/the-eternal-wave/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/the-eternal-wave/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/politics/">政治</category></item><item><title>
初探徽派建筑村落</title><link>https://guanqr.com/life/travels/the-first-visit-to-huizhou-style-villages/</link><guid isPermaLink="true">https://guanqr.com/life/travels/the-first-visit-to-huizhou-style-villages/</guid><pubDate>Mon, 14 Oct 2024 00:44:49 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-0.jpg" alt="the-first-visit-to-huizhou-style-villages-0.jpg">&lt;span class="caption">※ 安徽黄山黔县·卢村&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">国&lt;/span>庆期间，在 10 月 2 日逛完上海 Wonder Festival 展览之后，我便回家收拾装备，准备开启 10 月 4 日至 6 日的黄山之旅。这是一次临时起意的行程。临近放假时我才意识到，每年的这个时候都去上海，缺少新鲜感；如果不利用这七天假期去些以前没去过的地方，就太可惜了。但这已经是小长假的前夕，想去太远的地方肯定买不到火车票了，乘坐飞机又太贵——最终我选择去黄山。&lt;/p>
&lt;p>这次黄山行的主要任务有两个：一是爬黄山，二是游宏村。我忍痛花费了将近每晚一千元的费用，预订了黄山脚下和宏村里的民宿（没办法，这是临近假期才定好的出行计划，便宜的民宿早已被订完了）。大致的行程计划如下。&lt;/p>
&lt;ul>
&lt;li>第一天：上午出发乘坐高铁，下午到黄山北站，再乘坐大巴车到宏村浅逛一下，晚上乘坐大巴到黄山脚下入住民宿。&lt;/li>
&lt;li>第二天：凌晨早起排队进山，下山后再返回宏村深度游玩，晚上入住宏村里的民宿。&lt;/li>
&lt;li>第三天：凌晨早起趁人少的时候拍摄一些村落照片，中午步行至卢村，下午乘坐大巴返回黄山北站。&lt;/li>
&lt;/ul>
&lt;p>虽然这几天我确实是按照这个计划执行的，但非常遗憾的是，黄山的天气变化莫测。假期前几天还晴空万里，可观黄山劲松奇石；等到我爬山的那天却阴雨绵绵。我四点就出发排队了，穿着雨衣，拄着登山杖，跟着队伍缓慢前行。山间只有茫茫的雾气，什么都看不见。我背着的相机和三脚架根本没有用上。什么迎客松、猴子观海，这一次已无缘目睹真容了。我匆匆爬上了光明顶，又匆匆下山。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-1.jpg" alt="the-first-visit-to-huizhou-style-villages-1.jpg">&lt;span class="caption">※ 雨雾中的光明顶&lt;/span>&lt;/p>
&lt;p>好在山下的景色并未受到天气的影响。宏村里，画桥上人来人往；月沼宛如明镜，倒映着粉墙黛瓦和低垂乌云，别有一番诗韵。村外的溪流通过明暗渠道引入纵横交错的巷道中，蜿蜒流淌。有些居住在这里的老人，坐在水渠边，接水刷碗洗衣。正值假期，白昼时巷子里摩肩接踵，我只好先做歇息，等待次日破晓前再出门。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-2.jpg" alt="the-first-visit-to-huizhou-style-villages-2.jpg">&lt;span class="caption">※ 南湖与画桥&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-3.jpg" alt="the-first-visit-to-huizhou-style-villages-3.jpg">&lt;span class="caption">※ 南湖边的房屋&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-4.jpg" alt="the-first-visit-to-huizhou-style-villages-4.jpg">&lt;span class="caption">※ 村中的巷道&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-5.jpg" alt="the-first-visit-to-huizhou-style-villages-5.jpg">&lt;span class="caption">※ 传统房屋内部&lt;/span>&lt;/p>
&lt;p>我住的是树人堂旁边的客栈，入口的木门很不起眼，门后却是一条长廊，两旁种植着花花草草。房屋是中式传统风格的，还有个露天的小阳台，在阳台上正好可以看到树人堂院子里的景象。原本我还想在夜里拍摄星空，但阴云未散，只能放弃。&lt;/p>
&lt;p>早上五点半起床，我急忙带着相机赶到月沼。有几个人和我一样也早早地来了。我们沿着月沼边走边拍，记录下喧嚣前的幽静景象。接着，我前往南湖，走上了画桥。因为电影《卧虎藏龙》，我认识了宏村。电影开场的第一幕，便是李慕白牵着马穿过画桥。在玉娇龙和李慕白打斗的那一幕，他们利用轻功越过月沼，来到木坑竹海。我的脑海里一直回荡着电影的主题配乐。不知为何，在我的认知中，徽派村落本身就带着古韵和诗意，比起传统的江南水乡，我更喜欢这里。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-6.jpg" alt="the-first-visit-to-huizhou-style-villages-6.jpg">&lt;span class="caption">※ 清晨的月沼&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-7.jpg" alt="the-first-visit-to-huizhou-style-villages-7.jpg">&lt;span class="caption">※ 月沼边的房屋&lt;/span>&lt;/p>
&lt;p>游览完宏村后，我沿着村子后面上山的公路，进入卢村。卢村就在宏村的旁边，但游客数量却很少，无需门票。这里离山更近，也有小桥流水，更值得游玩。也许是因为卢村没有开发出什么热门的景点，村子里住的大都是本地人，而不是外来的民宿、商店老板——这是它的幸运。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-visit-to-huizhou-style-villages-8.jpg" alt="the-first-visit-to-huizhou-style-villages-8.jpg">&lt;span class="caption">※ 在观景台上俯瞰卢村&lt;/span>&lt;/p>
&lt;p>这几天的旅程，无论是高铁站和景区之间，还是景区和景区之间，我都乘坐的是专线大巴。假期期间，大巴车增加到了每五分钟一趟，可即便如此，人们依然要等待很久才能坐上车。因为路程中间有一段山路，还要穿越当地的村庄，道路修的很窄；自驾游的人很多，大大小小的车都堵在路上，增设再多的大巴也没用。我第一天前往黄山景区的时候，乘坐的大巴计划是晚上七点到站，但实际在距离站点两公里的地方堵到了八点多，仍未看到任何疏通的迹象。我只好让司机开门，自己下车步行过去。&lt;/p>
&lt;p>假期出行，景区的人数倍增。但人多人少都是一种特色。我以前拍照的时候，不喜欢风景中出现路人，总是要等待眼前人都走了差不多的时候再进行拍摄。现在觉得人也是风景的一部分，无需刻意避让。画面中的人，能更好的反映所拍之景的大小、所处的环境。这正是人文与自然的交融。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/the-first-visit-to-huizhou-style-villages/" target="_blank" rel="noopener">https://guanqr.com/life/travels/the-first-visit-to-huizhou-style-villages/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/huangshan/">黄山</category><category domain="https://guanqr.com/tags/huizhou/">徽州</category><category domain="https://guanqr.com/tags/mountaineering/">登山</category></item><item><title>
小暑·良渚古城遗址公园</title><link>https://guanqr.com/life/travels/liangzhu-ancient-city-site-park/</link><guid isPermaLink="true">https://guanqr.com/life/travels/liangzhu-ancient-city-site-park/</guid><pubDate>Sun, 07 Jul 2024 22:06:24 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">连&lt;/span>续数周的雨水终于停了，在下一波雷雨来临前，浙江迎来了每天将近 40 度高温的烘烤。而我，在如此炎热的天气下，毅然决定前往良渚逛一逛。一是因为，7 月 6 日是二十四节气中的小暑，同时也是杭州良渚日，比较有纪念意义。二是因为，上海某文创品牌将在良渚日活动上推出限定印章，作为入门级盖章爱好者，自然不会浪费这样千载难逢的机会。晒就晒点吧，总比在暴雨里盖章好。&lt;/p>
&lt;p>早上七点半坐高铁来到杭州东站，然后乘地铁，先坐四号线，在金家渡转二号线，到良渚下。再打个出租车到公园门口。到达时已经十点。太阳高照，亮的睁不开眼。我事先查过一些公园的图片，说是公园，其实就是类似于乡下野外，很广阔的一片土地，有的区域种着农作物，有的长着花花草草，唯一缺少的就是作为遮阴用的房屋。而我，早上出发的时候，没有找到伞，只能默默承受着太阳的烘烤。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-0.jpg" alt="liangzhu-ancient-city-site-park-0.jpg">&lt;span class="caption">※ 公园入口&lt;/span>&lt;/p>
&lt;p>公园入口的游客中心门口，可以领到一本观光纪念护照，同时可以盖两个良渚日纪念章。据说下午来的人都没有找到盖这两个章的地方，估计是撤了。还好我是上午来的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-1.jpg" alt="liangzhu-ancient-city-site-park-1.jpg">&lt;span class="caption">※ 杭州良渚日限定章&lt;/span>&lt;/p>
&lt;p>在公园里，我没有选择乘坐游览车，而是步行。第一个目的地是鹿苑。据说里面养了很多梅花鹿。走到时才发现，不知是温度太高还是来的太早的缘故，小鹿们都关在饲养小院里，没有被放出来。我也没什么兴趣拍照了。鹿苑北侧的饭店二楼，有一个梅花鹿特展，出口处可以盖到纪念章。这个章我在年初就看到有人盖了，但因为良渚这个地方是在是太偏僻，到现在才来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-2.jpg" alt="liangzhu-ancient-city-site-park-2.jpg">&lt;span class="caption">※ 梅花鹿特展章&lt;/span>&lt;/p>
&lt;p>继续往北走，在国际研学中心的门口，巨本熊文创的小铺到了。这个地方真的太难找了。原本的活动地址是，上午在鹿苑门口，下午在西门 B2 摊位，但在活动当天，上午的地址临时改到了所谓的「宴会厅」，这个地方在地图上根本搜不出来。我在鹿苑周围绕了很久。后来才知道，所谓的宴会厅，是研学中心。&lt;/p>
&lt;p>巨本熊这次带来的章有很多，线上转发活动可以免费盖到两款「良渚」主题的纪念章。其中一枚，还是和西班牙联动的章，仅会出现在周末两天。我总共盖了三个，另一个是付费印章「鱼化龙」。来小铺盖章的人很多，大家都是顶着高温，深入良渚深处的盖章爱好者。我的汗水，一直在沿着脸颊往下滴着。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-3.jpg" alt="liangzhu-ancient-city-site-park-3.jpg">&lt;span class="caption">※ 巨本熊印章（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-4.jpg" alt="liangzhu-ancient-city-site-park-4.jpg">&lt;span class="caption">※ 巨本熊印章（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-5.jpg" alt="liangzhu-ancient-city-site-park-5.jpg">&lt;span class="caption">※ 巨本熊印章（三）&lt;/span>&lt;/p>
&lt;p>盖章任务完成后，我便开始返程。但此时已经十一点，温度越来越高。想想返程还要走上那么长一段没有遮阴的小路，内心便十分抗拒。我先回到了鹿苑门口的文创店，在里面吹了会空调。等身上的汗水干了后再出发。不知当时我怎么了，突然想到鹿苑里面看看梅花鹿究竟在哪里。文创店在鹿苑的北门，在我的认知里，理所应当地认为鹿苑还有个南门，从鹿苑里穿过去即可。&lt;/p>
&lt;p>我在鹿苑里沿着最外侧围栏走了很长一段的路，里面的路也有些高低起伏，加上极其强烈的紫外线照射，把我累得够呛。看到前面终于有了出口，出口处还有个遮阴棚可以休息，急忙坐了进去。歇了大概二十分钟，出了门，突然看到门口居然也有个文创店，觉得很不可思议——这鹿苑的布局还是对称设计的吗？那我再在文创店里吹会空调吧。再一看文创店周边的建筑，不对，这个出口，不就是我进鹿苑的入口吗，合着我费半天劲绕了一圈，又回来了。不行了，真没力气走出去了。我只好走进一家快餐店，买了瓶芬达，又开始了休息。&lt;/p>
&lt;p>大概是休息了三十分钟吧，我觉得不能再拖下去了。下午的体感温度会更高，要一口气冲出去才行。这次我沿着来时的路原路返回，绕过了让我晕头转向的鹿苑。大中午路上的人很少，观光车也都在停车场停着。回来的路上，我注意到了路边遍布满地的黄色小花——恕我无知，无法叫出黄花准确的名字。于是驻足，拍摄了几张照片。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-6.jpg" alt="liangzhu-ancient-city-site-park-6.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-7.jpg" alt="liangzhu-ancient-city-site-park-7.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-8.jpg" alt="liangzhu-ancient-city-site-park-8.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liangzhu-ancient-city-site-park-9.jpg" alt="liangzhu-ancient-city-site-park-9.jpg">&lt;/p>
&lt;p>回到南门后，直接打了个车，坐到地铁站，又乘坐地铁，回到了杭州市区。接下来的时间，我就在博物馆和商场里吹空调度过了。&lt;/p>
&lt;p>最后，我只想说，在近半年到一年的时间内，我可能不会再来良渚玩了。尽管我还没有逛完整个良渚遗址公园，尽管我还有个杭州博物馆打卡计划，良渚博物馆还没有去。这个地方太偏了，炽热的太阳也让我心生畏惧。作为一个绿色出行的人，这个地方的性价比有些低。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/liangzhu-ancient-city-site-park/" target="_blank" rel="noopener">https://guanqr.com/life/travels/liangzhu-ancient-city-site-park/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/liangzhu/">良渚</category></item><item><title>
我的布偶猫</title><link>https://guanqr.com/life/hobbies/my-lovely-ragdoll-cat/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/my-lovely-ragdoll-cat/</guid><pubDate>Fri, 24 May 2024 01:16:19 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">三&lt;/span>月底的时候，可能是一个人在家里太无聊了，想养一只猫咪的念头在我心中愈发强烈。一个同事的家里养了一只银渐层，一个同事去年年底在雨中捡了只狸花，甚是有趣。我思索了许久。去宠物店买吧，没经验，怕被坑。路上捡呢，为什么别人总能在下班路上遇到小猫，我却根本没见过。&lt;/p>
&lt;p>我对养宠物的观念是，要从宠物小时候开始养，三个月之后都不在我的考虑内了，可能是某种「洁癖」在作祟吧。在刷小红书的时候，发现本地有家宠物店正在出售一只刚两个月大的布偶妹妹，样子十分可爱。那种感觉非常奇妙——自从看到这只布偶后，看别的布偶都不是很顺眼。犹豫了几天之后，我决定试着私聊店家看看。我和店家互加了微信，他发来了几个视频。有在玩逗猫棒的情景，还有在吃猫粮的情景，真的太可爱了。我毫不犹豫地交了定金拿下。等店家给小猫打完第一针疫苗后领回来。&lt;/p>
&lt;p>在等待期间，我已经买好了猫粮、猫砂。那一周连下了好几天的雨，等到放晴后的一天，我联系了店家，在中午把小猫接了过来。店家送来了一个宠物包，两包过渡粮，还有疫苗本。由于下午还要上班，我把小猫放在家里，倒了一盘猫粮后，就出门了。希望小猫能尽快适应新环境吧。&lt;/p>
&lt;p>下午下班后，我就急忙赶回家和小猫玩。它似乎很快就适应了新环境，活蹦乱跳也不怕我，揉肚子也很乖，还会自己埋猫砂。不过，可能是小家伙没有饱腹感，每次给它的猫粮吃完后，没过一会，又跑来嗷嗷叫。我只能强装淡定不搭理它。我发现他的左眼有些睁不开，眼里的分泌物有很多，我就急忙买了瓶眼药水给它滴——当时真的太担心小猫的健康了，生怕一不留神就噶了，现在看来都是多虑的，它真的很皮实。晚上睡觉的时候，它会自己跳到床上来，趴在我身边的另一个枕头上。看似很安稳，但早上就是另一回事了，每天一大早就在床上乱窜，还咬我的脚。&lt;/p>
&lt;p>过了两三天，一件意想不到的事发生了——小猫开始拉肚子。可能是因为我没注意猫粮的过渡，一次喂了太多我自己新买的猫粮。又或者是因为我每次都是倒一碗猫粮，没有控制吃的量，导致消化不良。以前一天也就去猫砂盆里一两次，现在要四五次。起初我查了些资料，以为换回原来的猫粮，每次少喂一些就好了。但某天晚上回来后，小猫上门迎接我的时候，走路都晃晃悠悠走不稳了，甚至还吐了一次。以前每天都很有精神，现在只是在角落里趴着睡觉。我只好寻找别的办法，买蒙脱石散，买益生菌，买消炎药，买进口猫粮。每天定量吃三顿饭，早晚喂消炎药，中午喂益生菌，每次喂完隔半个小时再吃饭。蒙脱石散原本是按照网上说的，混在水里用针管喂食，但小猫每次都十分抗拒，喂一管，能吐出来半管，所以后来只好拌在猫粮里了。&lt;/p>
&lt;p>那些日子天天都很折腾，我中午都顾不上吃饭了，只在晚上吃一点。每天还要提前半个小时起床给小猫喂药。由于布偶的毛很长，粪便太稀就很粘在毛上，我还得天天给它清理干净。就这么折腾了半个月，终于迎来了好转。打第二针疫苗前，它彻彻底底恢复了。我还是每天固定喂两三餐，后来再也没见过它拉肚子。&lt;/p>
&lt;p>我住的屋子是单人公寓，没有隔间，每天晚上小猫会跳到床上来搞些大动作，甚至「泰山压顶」，让我的睡眠质量严重下降。我只好买了一个三层的猫笼，晚上让它进去睡了……虽然这不太好吧，但也没办法。五一假期的时候，我去厦门玩。就买了一个自动喂食机，每天喂三餐，又倒了两大碗水。换了一盆新的猫砂。我一直很担心小猫自己在家会出什么事，但确实是我多虑了，回来后，它还长胖了一些。&lt;/p>
&lt;p>有小猫的陪伴，生活中的确多了一件趣事，让我每天忙碌了起来。希望它能健健康康成长吧，未来的日子还很长，希望一直有它的陪伴~&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/my-lovely-ragdoll-cat-0.jpg" alt="my-lovely-ragdoll-cat-0.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/my-lovely-ragdoll-cat-1.jpg" alt="my-lovely-ragdoll-cat-0.jpg">&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/my-lovely-ragdoll-cat/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/my-lovely-ragdoll-cat/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/cat/">猫咪</category><category domain="https://guanqr.com/tags/pet/">宠物</category></item><item><title>
五一厦门行</title><link>https://guanqr.com/life/travels/a-journey-to-xiamen/</link><guid isPermaLink="true">https://guanqr.com/life/travels/a-journey-to-xiamen/</guid><pubDate>Fri, 10 May 2024 01:03:02 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前期准备">&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/#前期准备" class="anchor-link" aria-label="前期准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前期准备&lt;/h2>
&lt;p>今年三月初的时候，我就开始规划五一假期的出行路线了。之前已经和朋友柏季约好，这次我们俩要一起玩。最初的想法是去云南，我为此规划了三天的游览路线。但最大的问题是，云南的地理位置过于偏远，不论是火车还是飞机，票价都非常昂贵。且这位朋友还在上学，没有收入，我答应帮她承担一些路费。多次考虑下，我决定改变目的地，去厦门。原因之一是，在高中的时候，我们说将来要一起去海边玩。如今已经六年多的时间，也应该兑现这个愿望了。&lt;/p>
&lt;p>我先提前在网上抢到了去鼓浪屿的船票，以及钟鼓索道的票。然后规划行程路线，确定住宿的地方。我们选择了在环岛南路上的一家名叫「塔厝乡情」的民宿，这里距离鼓浪屿、植物园有些远，但远有远的优点，价格实惠，而且沿着环岛南路走，可以路过几个所谓的「网红」沙滩。最终定下的方案是：第一天晚上在高铁站汇合，乘坐地铁去中山路逛一圈，然后打车到住宿的地方。第二天早上去码头乘船至鼓浪屿，在鼓浪屿玩一天，晚上返回。第三天上午去坐钟鼓索道、逛植物园，中午去中山路品尝一些「网红」小吃，下午去白城沙滩，晚上到曾厝垵。第四天返程。&lt;/p>
&lt;h2 id="第一天">&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/#第一天" class="anchor-link" aria-label="第一天">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>第一天&lt;/h2>
&lt;p>乘坐高铁从宁波出发，一路向南。离开宁波后，窗外的景象已从水陆相交的江南村落逐渐转变为连绵不断的丘陵，陆陆续续穿越了不少隧道。不难理解为什么浙江经济发展的核心在宁波、杭州这一带，因为只有这片区域得天独厚，有较为平坦辽阔的土地用于建设。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-0.jpg" alt="a-journey-to-xiamen-0.jpg">&lt;span class="caption">※ 窗外的山水&lt;/span>&lt;/p>
&lt;p>下午四点半到达厦门。出了高铁站，朋友已等候多时。按照计划，我们乘坐地铁前往中山路，准备在那里找家店吃晚餐。当天傍晚刚下了一场雨，街道地上积水尚未散去，映射着店铺招牌上闪烁的霓虹灯，有种别样风情。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-1.jpg" alt="a-journey-to-xiamen-1.jpg">&lt;span class="caption">※ 雨后街景（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-2.jpg" alt="a-journey-to-xiamen-2.jpg">&lt;span class="caption">※ 雨后街景（二）&lt;/span>&lt;/p>
&lt;p>我们选择了一家名叫「1980 烧肉粽」的餐馆，吃了烧肉粽、沙茶面、土笋冻、五香条。又在街头的「上官栗子·四果汤」店铺买了份四果汤。这几样具有当地特色的美食，我觉得沙茶面和五香条最佳。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-3.jpg" alt="a-journey-to-xiamen-3.jpg">&lt;span class="caption">※ 「1980 烧肉粽」&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-4.jpg" alt="a-journey-to-xiamen-4.jpg">&lt;span class="caption">※ 「上官栗子·四果汤」&lt;/span>&lt;/p>
&lt;p>晚餐结束后，我们继续沿着中山路走，逛了几家杂货店，一路摸索到了码头那边。主要是想规划下第二天的路线，看一看鼓浪屿在哪个方向，要在哪里乘船。这一天基本都在赶路了，我们再无精力畅玩，早早打了个出租车前往预订的民宿入住。&lt;/p>
&lt;h2 id="第二天">&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/#第二天" class="anchor-link" aria-label="第二天">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>第二天&lt;/h2>
&lt;p>早晨 5: 30，睡意未散，我们洗漱后便匆忙赶路到码头排队。假期的游客很多，我们不清楚检票的具体规则，只好提前到达码头以避免错过预订的轮渡班次，在码头里面的麦当劳买了一个汉堡和一杯豆浆。好在不同时间班次的人是分开排队的，检票的速度很快。在船上，我们没有和别人抢座位，而是走到甲板上领略海上风光。我们预订的是 8: 10 启航的轮渡，目的地是三丘田码头。这一班次的票价是 80 元，官方称之为「豪华船票」，对应的「普通船票」只有 35 元。然而据我观察，这些船并无豪华与普通的差异。买 80 元的票单纯是因为 35 元的票会早早被抢光。这可以算是当地赚游客钱的一种方式吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-5.jpg" alt="a-journey-to-xiamen-5.jpg">&lt;span class="caption">※ 刚登上鼓浪屿&lt;/span>&lt;/p>
&lt;p>我们属于当天较早登上鼓浪屿的一波人。前一天在网上买了岛内几个旅游景点的 90 元联票。包括日光岩、风琴博物馆、菽庄花园等等大大小小的景点都逛了一遍。最值得去的就是日光岩，那里是整个鼓浪屿地势最高的地方，站在观景台上，可以俯瞰整个鼓浪屿。一座座承载着历史的别墅错落有致地排布在岛屿上，一颗颗榕树在红瓦间点缀，繁茂的枝干与根系相互盘绕，将整个岛屿连接在一起，共生共长。这是在江南以及华北地区难以瞥见的「生命共同体」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-6.jpg" alt="a-journey-to-xiamen-6.jpg">&lt;span class="caption">※ 八卦楼&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-7.jpg" alt="a-journey-to-xiamen-7.jpg">&lt;span class="caption">※ 在日光岩上远眺&lt;/span>&lt;/p>
&lt;p>海边的人很多，但大部分人都是带着孩子在玩沙，真正走到海里的人寥寥无几。我走上前来，换了拖鞋，挽起裤脚，感受一波又一波的浪花。海水冰凉，再无他感。我以为这里的海岸能和儿时去过的大连、威海或海南一样：粗糙的砂砾中混杂着被磨去棱角的玻璃和细碎的贝壳，胆小的螃蟹在刨沙打洞。但这里只有细腻的白沙。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-8.jpg" alt="a-journey-to-xiamen-8.jpg">&lt;span class="caption">※ 沙滩与海水&lt;/span>&lt;/p>
&lt;p>我们穿梭在错综复杂的小巷中，寻找着一些小红书里推荐的小吃店。买了手工鱼丸、蟹黄包、海蛎煎、芋泥香酥鸭。我觉得最坑的就是这个芋泥香酥鸭，包装盒做的挺花哨，但只能吃出芋泥的味道，鸭肉仅仅起到了点缀的作用。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-9.jpg" alt="a-journey-to-xiamen-9.jpg">&lt;span class="caption">※ 在岛上买的小吃&lt;/span>&lt;/p>
&lt;p>下午，我们乘坐 5: 40 的轮渡返回了厦门本岛，结束了当天的旅程。&lt;/p>
&lt;h2 id="第三天">&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/#第三天" class="anchor-link" aria-label="第三天">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>第三天&lt;/h2>
&lt;p>上午先去乘坐了钟鼓索道。我们预订的是上午 8: 45 的票，在排队前，先绕进了附近一个小胡同里买包子。包子铺不大，口气挺大，门口挂着一个牌子，上面写着要排队购买，但实际上并没有什么人来。包子的价格很离谱，5 元 1 个。要知道杭州湖滨银泰旁边的南方迷宗大包才 2.5 元 1 个，从早到晚都排着长队，肉很多，还有汤汁，很好吃。这 5 元的包子肉质松散，搀着大片的葱叶，我实在无法理解这包子为何如此之贵。&lt;/p>
&lt;p>钟鼓索道的票很难抢，我只在抖音上买到了两张。检票口还未开，门口已经排起长长的队伍。然而这队伍排的并没有什么用。有厚着脸皮插队的人，有没提前买票一脸懵逼的人，还有想借我的身份信息混进来的人。现场的管理十分混乱。乘坐索道缆车前，你还需要凭借购票信息，换取纸质门票，然后再检票进入。这张票需要保存好，因为在返程的时候，还会进行第二次检票。乘坐缆车一路上升，翻越山林，市区里的一切都尽收眼底。和前一天在日光岩上领略到的风景类似，只不过这次是在海的另一边，绿树红瓦换成了钢筋水泥。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-10.jpg" alt="a-journey-to-xiamen-10.jpg">&lt;span class="caption">※ 钟鼓索道&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-11.jpg" alt="a-journey-to-xiamen-11.jpg">&lt;span class="caption">※ 市区的钢铁水泥&lt;/span>&lt;/p>
&lt;p>植物园的入口和钟鼓索道紧挨着。园区很大，从一个主题区到另一个主题区需要走上一会儿。如果深度游玩的话，可能要花一整天的时间。我们只去了雨林区和多肉区。这两个区域的植物都比较有地域特色，是我们平时在户外很少见到的。其他主题区的路程有些远，还需要坐车前往，便没有纳入此次游览路线。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-12.jpg" alt="a-journey-to-xiamen-12.jpg">&lt;span class="caption">※ 雨林中的丁达尔效应&lt;/span>&lt;/p>
&lt;p>雨林区的植物枝繁叶茂，造型奇特。每一颗植株都伸展出硕大艳丽的叶片，汲取着从树隙间透过的斑驳阳光和空气中弥漫的氤氲雾气，末端还有刚生长出的嫩芽。处处散发着无尽的生命力。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-13.jpg" alt="a-journey-to-xiamen-13.jpg">&lt;span class="caption">※ 生长在雨林区的植物&lt;/span>&lt;/p>
&lt;p>多肉区又是截然不同的一番风景。这里没有绿荫，比人要还高的仙人掌矗立在黄土之上，宛如焦土中坚毅守护的战士。我小心翼翼地穿越在仙人掌丛林中，生怕稍不留神一个踉跄被尖刺划破皮肤。有些小体型的仙人球生长在人工搭建的温室中，顶端绽放的花朵点缀着圆滚饱满的躯体。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-14.jpg" alt="a-journey-to-xiamen-14.jpg">&lt;span class="caption">※ 仙人掌丛林&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-15.jpg" alt="a-journey-to-xiamen-15.jpg">&lt;span class="caption">※ 仙人球丛林&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-16.jpg" alt="a-journey-to-xiamen-16.jpg">&lt;span class="caption">※ 仙人球之花&lt;/span>&lt;/p>
&lt;p>正午时分，炽热的阳光将我的胳膊烤得通红。是时候结束植物园之行了。我们停留片刻，乘坐地铁回到了中山路。此次行程中我们还有两个「网红」小吃还未品尝。一个是某个小店里卖的鸡蛋堡，一个是姜母鸭。鸡蛋堡我们在街道里搜寻了许久，兜兜转转才找到。这家店的店面很小，排队的人很多，只有一位老奶奶在不紧不慢的制作着。鸡蛋堡的做法很常规，但味道的确名副其实。这愈发凸显那家包子铺的奸商特性。姜母鸭很多店铺都在卖，我们随便进了一家，买了半只，又点了两盘菜，当做午饭。这姜母鸭无非就是在鸭肉里多放了很多很多的姜片，姜的味道甚至掩盖了鸭肉本身的味道，有些喧宾夺主；并且价格贵的离谱，很不推荐。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-17.jpg" alt="a-journey-to-xiamen-17.jpg">&lt;span class="caption">※ 鸡蛋堡与姜母鸭&lt;/span>&lt;/p>
&lt;p>下午前往白城沙滩。从中山路到白城沙滩，我们本来坐的公交车，但这边交通秩序出奇的差，过两个路口花了半个小时，还不如走着去，便下了车。途中我们路过了厦门大学，在访客中心逛了逛。原谅我的孤陋寡闻，此前从未见过哪个学校能建这么大的访客中心。在参观学校前，游客需要通过各种店铺。校方能想出用这种方式促进消费，真是天才。&lt;/p>
&lt;p>白城沙滩似乎要比鼓浪屿上的沙滩更有活力。有些小孩在挖沙坑、做游戏：有些专门搞约拍的人，在沙滩上摆放了椅子，将玫瑰花组成了一个爱心图案。我们在沙滩上迎来了落日余晖。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-18.jpg" alt="a-journey-to-xiamen-18.jpg">&lt;span class="caption">※ 白城沙滩&lt;/span>&lt;/p>
&lt;p>夜晚，曾厝垵，热闹非凡。这又是一个营销过度的地方，各种同质化严重的小商铺和饭店。饭店的小二都在很积极地招揽生意，我们随便进了一家叫「闽南堂」的店。点了三四个菜，但等了半个小时都还没开始做。既然你没有那么多人手来做饭，就不要继续揽客了，耽误时间。我们只好回去，在民宿门口的小店解决了晚餐。至此，厦门之行结束，第四天一早，我们便前往高铁站坐上了返程的列车。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-journey-to-xiamen-19.jpg" alt="a-journey-to-xiamen-19.jpg">&lt;span class="caption">※ 曾厝垵&lt;/span>&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>这是我第一次来到福建，来到这座以前在书中认识的城市。厦门的景色很美，特别是夕阳下的沙滩，海风吹拂着脸颊，那是少许的惬意时刻。但和诸多依靠旅游业发展的地方一样，这里充斥着同质化的店铺，眼花缭乱却毫无吸引力，污染了本应让游客感受到的民俗风情。厦门的商业化有些过了头，无论你做什么，都有商家会想尽办法在其中赚点钱，同样的东西，价格要比其他城市高很多。厦门的交通很糟糕，排除因假期游客多导致的大堵车问题，公路上没有自行车道，自行车和行人混在一起，甚至逆行，十分影响旅游的体验。&lt;/p>
&lt;p>这一次参观的地方不多，错过了很多风景，也没有前往博物馆了解下当地的历史印记。将来还有很多机会，但我却不想再来第二次了。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/a-journey-to-xiamen/" target="_blank" rel="noopener">https://guanqr.com/life/travels/a-journey-to-xiamen/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/xiamen/">厦门</category><category domain="https://guanqr.com/tags/seaside/">海边</category></item><item><title>
几位同事离职了</title><link>https://guanqr.com/life/ideas/goodbye-my-colleagues/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/goodbye-my-colleagues/</guid><pubDate>Sun, 21 Apr 2024 20:37:06 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>我从未想过，在工作近三年之时，几位同事的离职能让我怅然若失。&lt;/p>
&lt;p>这三年身边来来走走的人有不少，我甚至和一些人说过的话不超过十句。在我的观念里，这些人只不过是人生中不起眼的一些过客罢了，和我并无明显的交集，走就走了，与我无关。但在这个阴雨绵绵的四月里，接连离职了几位同事，我不由地回想起了和他们一起度过的日子。&lt;/p>
&lt;p>甲和乙是和我同一时间入职公司的。虽然我们都是通过校招进来的，但他们是研究生，比我大五岁（他们都是先工作了一段时间又考研的）。事实上年龄的差异并没有任何代沟，毕竟都是九零后，能聊的话题还是有很多的。&lt;/p>
&lt;p>刚进公司的时候，我们被安排到产线学习镜头的组装和测试流程。先领了无尘服，从头到脚全副武装，消毒除尘，然后进入产线开启「摸鱼」状态。产线里除了领导层都是那种普通工人，可能高中都没读完就从老家出来想着打工赚钱。他们连个坐的地方都没有，就在自己的位置上站着，拿着吸笔，将桌子上的镜片或者隔圈吸起来，放置在托盘里。这些放好元件的托盘会被放置在一个组装机里，机器会自动组装好镜头。镜头组装好之后，又会有一批人对镜头进行出货检测。整个流程用半个小时就学会了，根本不需要脑子——这样的工作也确实不需要思考，只需要照着 SOP（Standard Operating Procedure）做就行。每一个工人都是一个小小的齿轮，每天机械化运转着。我们就在他们的边上看着他们如何操作，聊天聊地，太闲的时候还会帮他们摆几盘镜片。&lt;/p>
&lt;p>在完成各种基础培训之后，我们各自接到了属于自己的第一个项目。分给我的项目是一款用在无人驾驶小车上用的雷达模组，整个光学系统是客户自己设计的，我需要做的就是分析每一个镜片的公差对系统性能的影响，制定出货规格。这个光学系统很复杂，有很多柱透镜用来准直光束，还有挖孔反射镜用来偏转光路。我在懵逼中逐渐熟悉了分析方法。和他们交流设计的经验，如何设计自由曲面镜片，如何进行畸变匹配，如何仿真高低温下的镜头性能……我们逐渐承担起了设计的重任。&lt;/p>
&lt;p>他们两位在学校的研究方向是照明系统，我毕设的导师正是这个领域的专家。聊天的时候无意间问起我：「你认不认识 xxx？他是你们学院的老师。」我说我毕设就是他带着做的。接着我们就聊起了照明和偏微分方程。好几次课室周会拖的时间太久，差点错过公司食堂的饭点，我们一起排队买了食堂仅剩的重庆小面。出门聚餐的时候，不论去什么菜系的餐馆，他们都要点上一盘番茄炒蛋，一盘土豆丝，一碗蛋炒饭。我们还&lt;a href="https://guanqr.com/life/travels/dong-ji-island/">一起去了舟山的东极岛&lt;/a>，傍晚在空旷的悬崖边上呐喊。&lt;/p>
&lt;p>他们离职后，团队里在这个公司工作时间最长的人只剩下了我。尽管后来又有一些校招和社招的人过来，但在工作中再也没有从前的乐趣。一切都回归常态，工作是工作，生活是生活。我终于明白，那段时光只是昙花一现。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/goodbye-my-colleagues/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/goodbye-my-colleagues/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/friendship/">友谊</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
杭州集章特种兵行动</title><link>https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/</link><guid isPermaLink="true">https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/</guid><pubDate>Sun, 28 Jan 2024 18:15:20 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">闲&lt;/span>得无聊的时候，总要找点有意思的事去做。这周六我早上五点半起床出发，坐高铁到杭州，在西湖和吴山这一圈走了将近四万步，直到晚上才回来，一路没有吃任何东西，累了个半死。周日晚上的时候，双腿还很酸疼。&lt;/p>
&lt;h2 id="缘由">&lt;a href="https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/#缘由" class="anchor-link" aria-label="缘由">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>缘由&lt;/h2>
&lt;p>这件事的缘由是这样的。在日本生活的好友在新年寄来了一张明信片。因为我对我住的小区信件收取地址不了解，便在网上搜索了关于平邮信件收取的相关信息。后来我问了一圈邮政和物业的人，终于找到了收件的地方，很顺利的收到了这张明信片。接着，我便想起曾经大一大二的时候，玩了一阵子 Post Crossing。你可以随机抽取几个国外的用户，给他们写明信片，同时，你也会收取到来自五湖四海的人给你寄的明信片。顺便我就在贴吧、小红书上搜搜看现在这些玩明信片的圈子发展到什么样了。于是大数据给我推送了很多关于明信片，邮票，纪念封的玩意。刷着刷着，便出现了收集印章的话题。&lt;/p>
&lt;p>我很久以前也玩过集章。最早是在 2010 年上海世博会，买了个世博护照，盖了一堆第三世界国家的印章。当时在世博园逛了两天，走的时候觉得很遗憾，因为没有去中国馆盖章。大学期间逛了几个博物馆，看到国内各地博物馆联合推出了博物馆的集章册，本想买个玩玩。但似乎有种无形的力量阻止着我。在浙江博物馆的售货机上买集章册——缺货，想把浙江博物馆的印章盖在明信片上——缺墨。算了……算了……&lt;/p>
&lt;p>以前盖章都是盖一些单色章，图案简单，颜色无非就是黑、红、蓝、绿这四种。但现在的章，不仅图案设计很复杂，还发展起来了套色章，就像木版年画一样，一个章一种颜色，在同一个位置依次盖下，最终组合成一个彩色的图案，很有意思。这种前几年已经存在的东西，我竟现在才知道。只能怪自己一直封闭在小圈子里，没怎么了解外界事物啊。在网上一搜，因为临近春节，杭州一些旅游景点推出了限时的新章。在这坐高铁到杭州也就四十分钟，反正闲着也是闲着，趁周末就去盖章吧。&lt;/p>
&lt;h2 id="路线规划">&lt;a href="https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/#路线规划" class="anchor-link" aria-label="路线规划">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>路线规划&lt;/h2>
&lt;p>这次的主要任务是盖杭州文旅推出的「宋福杭州年」五款单色印章，以及望德蘭推出的二十四节气章。对于「宋福杭州年」印章，它分布在杭州100个地点，每个地点可盖一款。我在地图上研究了一下，发现在拱宸桥附近或者河坊街附近的盖章点比较集中，可以很快集齐这五款印章。对于二十四节气章，望德蘭位于湖滨银泰 in77 E 区，而湖滨银泰离河坊街比较近，毕竟都是在西湖边上。所以，我就规划了一条环西湖的行动路线。顺便去岳飞庙和雷峰塔把景点套色章拿下。&lt;/p>
&lt;h2 id="行动开始">&lt;a href="https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/#行动开始" class="anchor-link" aria-label="行动开始">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>行动开始&lt;/h2>
&lt;p>早上定了个五点半的闹钟，起来直冲高铁站坐车到了杭州。出站后先去了岳王庙，因为这里开门时间最早。进去的时候还没有什么人。院子里很宁静，空气也很清新。盖章的地点是在里面的「正气轩」文创店。出来后，沿着苏堤来到花港观鱼。据说里面有家小店有一枚套色章，我在景点里转了五六圈才找到这个小店。接着是雷峰塔，光速上到二楼，找盖章的地方。这几个景点对于我当天天天晚上游西湖的人来说，不知道去过多少次了，丝毫没有欣赏美景的兴趣，本次行动只为在一天时间里尽可能多地收集章。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-one-day-tour-in-hangzhou-0.jpg" alt="a-one-day-tour-in-hangzhou-0.jpg">&lt;span class="caption">※ 副本任务的三个章&lt;/span>&lt;/p>
&lt;p>副本刷完，开始第一个主线任务——「宋福杭州年」印章。第一站是方志馆，对应的是良渚玉琮章。盖章的地方就在入口进门后的右侧小桌子上。接着第二站是去了城隍阁，对应的是拱宸桥的章，盖章的地方在城隍阁二层，二层展厅空荡荡的，光线也不是很充足，有种神秘感。我是从南边登上的城隍阁，这对于一个很久没有爬山的人来说，路途有些坎坷。其实德寿宫也有一枚章，就是印有德寿宫本宫图案的章，德寿宫就在方志馆的旁边，但我预约的是下午场，上午不能进，就先去城隍阁盖章了。第三站是杭州博物馆，对应的是奥体中心体育场的章。从城隍阁下来，就是杭州博物馆，进入后的一楼前台有专门盖章的地方。第四站原本计划是去河坊街游客中心盖雷峰塔的章，但游客中心中午有段时间是关门的，我只好回到最初的起点，去盖德寿宫的章了。第五站，就是河坊街游客中心。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-one-day-tour-in-hangzhou-1.jpg" alt="a-one-day-tour-in-hangzhou-1.jpg">&lt;span class="caption">※ 「宋福杭州年」印章&lt;/span>&lt;/p>
&lt;p>这期间有一个意外之喜，从河坊街游客中心到德寿宫的这一段路途中，我刷小红书的时候，恰巧刷到方回春堂发的新笔记，说之前每周推出两个，总共六个讲述膏方制作步骤的套色章下午会一起返场，我急忙改变路线，先去方回春堂把这六个章盖了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-one-day-tour-in-hangzhou-2.jpg" alt="a-one-day-tour-in-hangzhou-2.jpg">&lt;span class="caption">※ 方回春堂膏方制作步骤&lt;/span>&lt;/p>
&lt;p>「宋福杭州年」印章盖完后，我的最后一站，湖滨银泰 in77，在这里我盖的是望德蘭的节气章，以及九木杂物社的龙年套色章。这两个店的位置花了我不少时间才找到。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-one-day-tour-in-hangzhou-3.jpg" alt="a-one-day-tour-in-hangzhou-3.jpg">&lt;span class="caption">※ 望德蘭节气章 &amp;amp; 九木杂物社龙年套色章&lt;/span>&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>这一天收获满满，也累得够呛。我再一次感受到了十几年前在世博会上收集印章的愉悦与满足。这一天注定是值得纪念的日子，因为这是我踏入新坑的第一天。盖章不仅仅是拿起章盖在纸上这一个动作，还能同时了解章面上的图案背后的含义。我在杭州上学的四年，并未真正认识杭州这座城市。简单来说，之前我就连亚运会上的吉祥物，为什么叫宸宸、琮琮、莲莲都不知道。但通过盖章，我还是「被动」地学习了一些杭州的历史，这是盖章带来的远超一张纸价值的附属品。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/" target="_blank" rel="noopener">https://guanqr.com/life/travels/a-one-day-tour-in-hangzhou/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/seal/">集章</category></item><item><title>
迎接二〇二四</title><link>https://guanqr.com/life/ideas/summary-of-2023/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/summary-of-2023/</guid><pubDate>Mon, 01 Jan 2024 18:46:56 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">二&lt;/span>〇二三年，我认为其最重要的意义是，解除疫情管控后的第一年。人们的生活逐步回归正常，外出不再会被各种奇葩的管控措施困扰。三年时间在历史的长河中虽很短暂，但对于一个人的一生而言，足以改变他的生活习惯，消费观念，甚至三观。这一年中，在国内，我看到了就业变得越来越困难，房地产处在一个很微妙的阶段，官方的媒体平台依然在毫无羞耻地宣传着年轻人要努力奋斗去追求那些虚无缥缈的梦想。在国外，东欧、中东局势依然紧张，大国之间的博弈潜移默化地影响着我们的生活。于我——努力在这大变局中寻找着平稳的日子，学着去生活。&lt;/p>
&lt;p>目前这份工作已经干了两年，主要的工作是设计激光雷达镜头，准确的来讲是激光雷达接收端镜头。接收端镜头的难度比较大，领导对我的能力还算认可，把许多关键项目都给了我。拿了三次月度优秀员工，给了个证书和几百块钱的奖金。但我对我自己的水平还是有正确的认知的，对于激光雷达领域的发展与前景了解的很少。有时候领导之间谈起某个公司的一个产品的规格参数，如芯片尺寸、探测距离什么的。我就一头雾水。十二月我特意关注了几个有关激光雷达行业的公众号，以后要主动获取一些领域内的发展资讯才行。对于这份工作，我的评价是，还可以。我没有对未来的长期打算，不知道以后是否会厌倦这里。我追求的就是平稳一点的生活，不要有太多压力，不要加太多的班，平时能做些自己喜欢做的事，足矣。目前，这些都能做到。&lt;/p>
&lt;p>这一年中，我每天早上醒来洗漱完就去上班，下午六点多下班回家，之后便开始各种娱乐，比如看剧，做模型，看书什么的，很少出门。自我剖析了一下，我的各种爱好都是属于在室内就可以做的小众爱好，基本无法通过兴趣在现实中找到同一圈子里的人一起玩，所以就常宅在家了。&lt;/p>
&lt;p>这一年中，我从公司的公寓中搬了出来，租了新的房子。终于不用再忍受曾经房子极差的隔音效果。终于可以自己想做什么就做什么，不怕有宿管来检查房屋是否有安全风险。我买了个草缸，种了几种比较好养的水草，并放了十几条小灯鱼。&lt;/p>
&lt;p>这一年中，我做了很多的模型，很多都还没有写文章发布出来。但总览这些模型，绝大多数仅仅是「组装」，比如兵人的衣服打理，高达的拼装，帆船的木材切割与胶合。我可以把模型组合到很精致到位，但上色的技能很生疏。因为我缺少喷漆的条件，很怕中毒，所以无法提升该技能的熟练度。希望以后能单独租个屋子做模型吧。&lt;/p>
&lt;p>这一年中，我去得最远的地方就是&lt;a href="https://guanqr.com/life/travels/dong-ji-island/">东极岛&lt;/a>，在海岛上感受到了短暂的宁静。虽然路程比较累，刚回来的时候，还决心说，以后再也不来这个地方了，但现在回味的时候，还是想再单独去一次。&lt;/p>
&lt;p>未来的二〇二四年，我希望，能提升个人专业技能，多出去走走……&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/summary-of-2023/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/summary-of-2023/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/ideal/">理想</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
奥本海默</title><link>https://guanqr.com/life/films/oppenheimer/</link><guid isPermaLink="true">https://guanqr.com/life/films/oppenheimer/</guid><pubDate>Fri, 08 Sep 2023 23:52:18 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/oppenheimer.jpg" alt="oppenheimer.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">诺&lt;/span>兰执导的电影《奥本海默》终于在国内上映了。虽然上映的那天是周三，工作日之中，还下着连绵不断的雨，但我仍然很迫切地买了那一晚的电影票去观看。因为我很喜欢诺兰的电影，我也很喜欢主演基里安·墨菲。&lt;/p>
&lt;p>这部电影讲述的就是奥本海默从求学到任教，到负责曼哈顿计划，再到被审讯的故事。作为一部人物传记片，注定不会有华丽的特效和激烈的打斗。但诺兰并没有将奥本海默的经历交代的像流水账一般，而是使用了他最擅长的非线性叙事和极其精妙的镜头语言将这个故事精雕细琢。三个小时的电影时长并没有令我感到乏味。&lt;/p>
&lt;p>电影的开始便从奥本海默和施特劳斯两个人的视角进行铺垫。正如核反应的两种方式，一个叫做「裂变」，一个叫做「聚变」。在影视作品中，黑白画面常用于讲述过去的事情，表示回忆。诺兰早期的作品《记忆碎片》里，却使用彩色与黑白表示时间的倒序和正序。这部电影的黑白画面更是巧妙。奥本海默的视角是彩色的，施特劳斯的视角是黑白的。或许在奥本海默的眼中，很多事情都带有自己主观意识的色彩，是充满复杂性的，但这些事情在施特劳斯，甚至在整个社会的眼中，只有黑白的对立。湖边，当奥本海默和爱因斯坦交谈后，爱因斯坦连看施特劳斯一眼都没有便走了过去。这让出身卑微又敏感的施特劳斯相信，奥本海默在爱因斯坦那里说了自己的坏话。电影第一次出现这个场景，便是黑白的。但在电影的结尾，再次重复这一场景时，来到了奥本海默的视角，画面变成了彩色的，原来，两位物理学家之间谈论的是人类的生与死的问题，根本没有提及施特劳斯这样的政客。&lt;/p>
&lt;p>电影最精彩的部分是第三个小时————政府对奥本海默的审讯以及施特劳斯阴谋的揭露。在三位一体核爆试验成功，美国向日本投下两颗原子弹后，影响奥本海默，影响世界的链式反应正在悄无声息地进行着。奥本海默无时无刻不在受到核弹对他的折磨。在外界看来，他是一位英雄，教室里的学生们用鞋子跺着地板向他庆祝，但在往后的日子里，那代表庆祝的跺脚声，像无情的轰鸣冲击着他的精神世界，让他充满愧疚。在诺兰的电影《失眠症》中，阿尔·帕西诺饰演的警官受到极昼的影响，无法入眠，窗外的亮光对他而言，像是捅破自己秘密的针头，刺进他的内心。在这部电影里，核爆后的白色光芒，也如同那些审讯奥本海默的政客一样，冲击着他的精神。&lt;/p>
&lt;p>对于因国内未分级的观影制度而不得不对画面进行的修改，我认为，前几段的画面放大和加个裙子遮挡身体也还可以，但有个片段的修改极为可惜。在奥本海默被审讯的那一场景中，有一幕，镜头从左侧跨越一个人的背影，缓缓来到右侧的时候，奥本海默变得浑身赤裸。个人感觉导演是想通过这样的画面，展现出奥本海默的私生活已经被这些审讯他的政客们扒光，自己就像一个赤裸的人，受到数十人的注视，这是一种煎熬。但我在看电影的时候，发现后续有几秒钟，镜头又从右侧开始向左侧移动，我以为又要跨越那个人的背影，顺便回到现实，奥本海默穿衣服的模样。但那个镜头就仅仅向左移动了一点便没有了。我当时就觉得有些突兀。后来看到网上其他人的解释，才了解到，原来这里还删减了一段画面，为了保持声音的完整，将画面倒放了……那段删减的画面是，奥本海默的情人赤裸地和他一起暴露在公众面前。我认为这个画面删了是真可惜，因为这样更具有冲击性。可能原本的冲击力有 100%，缺少了这个画面，冲击力只能达到 80%。虽然不影响故事情节，但还是缺少了点味道。&lt;/p>
&lt;p>当然，还有一个不得不提的人——路德维希。他负责了这部电影的配乐。小提琴的旋律一直带动着观众的情绪，是在是佩服他的配乐能力。在细细欣赏过他为《信条》《黑豹》《曼达洛人》《波巴·费特之书》的配乐后，我感觉，他是继汉斯·季默后，冉冉升起的一位配乐大师。&lt;/p>
&lt;p>最后扯个题外话。作为一个纯粹的影视爱好者，我很不喜欢那些，恰巧发现近些天有某某电影上映，看了眼豆瓣评分，便跟风买票去看，又在网上跟风带节奏的人。他们并不关心他所看的电影，只是想表达自己内心的主义。正如前些日子上映的《芭比》，因为展现了女性、平权的内容，被部分极端女性定义为顺直男性不配去看的电影，又被部分极端男性定义为让女性撅醒的电影。事实上，他们在此前根本没有关心过电影什么时候被立项，什么时候选角，什么时候拍摄，根本没有看过拍摄的片场照，只为了给当前上映的电影贴上一个自己定义的标签，在我看来，这是玷污的行为。&lt;/p>
&lt;p>而《奥本海默》在国内也难逃此命运。有人只关心删减修改的那几秒镜头，有人将其与和非人物传记电影《横空出世》作比较，又贬低其远不如《横空出世》，有人厌恶其中精妙绝伦的配乐和剪辑。如果你无法接受别人所欣赏的艺术，自己默默离开就好，为什么非要当着别人的面将别人欣赏的东西贬得一文不值，以彰显自己的审美才是正确的主流？&lt;/p>
&lt;p>罢了，不和别人争论了，还是静静观看电影吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/oppenheimer/" target="_blank" rel="noopener">https://guanqr.com/life/films/oppenheimer/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/humankind/">人类</category></item><item><title>
唱片机</title><link>https://guanqr.com/life/ideas/a-vinyl-record-player/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/a-vinyl-record-player/</guid><pubDate>Thu, 17 Aug 2023 21:35:05 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">以&lt;/span>前总是看到一些影视大 V 用户在网上分享自己的唱片收藏。唱片对我而言，是个比较陌生的存在。我从未亲眼见过，只知道这东西是个很大的圆盘，上面刻着一圈圈的凹槽，需要通过唱片机上的唱针，将物理的震动转换为数字信号，通过音响播放出来。&lt;/p>
&lt;p>我不是一个喜欢听歌曲的人。身边的朋友、同事，手机里大概率会装上网易云音乐或 QQ 音乐这样的应用，甚至开通会员以欣赏高质量的歌曲；各种流行歌曲，听到前奏就能哼唱出来。但我对此总是一脸懵逼。一次跟别人去 KTV，他们选的歌我 90% 都没有听过，100% 不会唱，我只能在边上尴尬地坐着。&lt;/p>
&lt;p>相较于流行歌曲，我更喜欢欣赏各种电影中的配乐。毕竟我是一个狂热的电影爱好者，对于电影中的各种元素总要好好欣赏一番。电影的配乐总是和故事的情节相互映衬的。每当听到某段乐曲，便能联想到电影中这一段讲述了什么故事，并与主人公共情。&lt;/p>
&lt;p>于是，我就这样入手了第一张唱片——《海上钢琴师》的电影原声。这部经典电影的情感基调就寄托在了钢琴曲之中。莫里康内的配乐对这部电影而言宛如画龙点睛之笔。尝鲜过后，我又陆陆续续购买了一些其他电影的原声唱片。但此时面临的问题是，我还需要一台唱片机，否则无法听到刻录在唱片里的音乐到底是什么样的。那还想什么，买吧。&lt;/p>
&lt;p>我买的是普通入门级的唱片机。网上很多讲究的人说，唱片必须用专业的设备播放，一两千元的唱片机就是个玩具，无法采集到在唱片里刻录的全部声音信息，还对唱片有磨损。在我看来，我就是一普通玩家，不是专业做音乐的，讲究这么多干什么？磨损了买个新的不得了，怕磨损就别听了，放在家里当个摆设吧。&lt;/p>
&lt;p>开启唱片机的开关，唱片开始缓缓旋转，唱针划过凹槽，音响里传来了那动人的配乐。我仿佛又看到了，大雨中，在轮船甲板上，1900 站在那里，看着远处撑着伞的姑娘。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-vinyl-record-player-0.jpg" alt="a-vinyl-record-player-0.jpg">&lt;span class="caption">※ 《了不起的盖茨比》&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-vinyl-record-player-1.jpg" alt="a-vinyl-record-player-1.jpg">&lt;span class="caption">※ 《西部世界》&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/a-vinyl-record-player/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/a-vinyl-record-player/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/music/">音乐</category></item><item><title>
东极岛的周末</title><link>https://guanqr.com/life/travels/dong-ji-island/</link><guid isPermaLink="true">https://guanqr.com/life/travels/dong-ji-island/</guid><pubDate>Tue, 06 Jun 2023 22:35:09 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="准备">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#准备" class="anchor-link" aria-label="准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>准备&lt;/h2>
&lt;p>近两年最想做的事情之一，就是去舟山逛一逛。浙江是一个临海的省份，却并不是一个适合看海的地方，长江携带着途径城市的废水灌入大海，入海口的水质很差，在海边只能看到浑浊的黄色海水。但在远离海岸线的岛屿周围，水质还算清澈。舟山的东极岛，正是这样的地方。&lt;/p>
&lt;p>东极岛并不是一个岛屿，而是几个小岛（庙子湖、青浜、西福山、东福山等）的合称。去舟山玩的最大阻碍就是交通。由于没有直达的火车，必须要通过乘坐具有极稀少班次的大巴或者私家车前往。而且岛与岛之间的船，航次有限，船票也有限，几点去哪里买到哪里的船票，时间卡的死死的，每一步行动都要精确到几时几分来规划，这样在时间上的限制太多。自己一个人去的话，首先在行动规划上就很麻烦，琐碎的事一堆；其次，周末两天根本来不及，当然，如果你选择自驾出发就当我没说。单单这些事情，想一想就觉得还不如在床上躺两天舒服。&lt;/p>
&lt;p>好在几周前的一名同事在周末「调研」了去舟山游玩的可行性。定在了六月三日到四日行动。刚开始发起该计划时，我们凑了五个人，准备租一辆车，自驾前往。但后来不知不觉居然凑到了十个人，于是改成包一辆 11 座的小巴，带有司机，价格很划算，往返只需 1900 元，平均每人 190 元。&lt;/p>
&lt;p>出发前三天，我们就需要在海运的公众号上抢从朱家尖到庙子湖的船票，这一线路一天只有三个班次，非工作日的票非常抢手，如果没有抢到，那么后续的一切计划都仅仅是一张废纸。周六的票在周三的早上五点开票，额……想想就知道，最早班次的票必然是抢不到的。我六点多醒来，第一时间看了看第一班次的余票数量，零。第二班次还有几十张，便直接枪了第二班次上舱的票，票价 150 元。这里需要吐槽一下票价。中舱、卧铺和下舱的票稍微便宜些。中舱和卧铺 130 元，下舱 100 元。我这次游玩只坐过上舱和中舱，上舱的唯一优势是比较宽敞，空气相对而言没那么窒息。但因为船在海上会晃，越往上层，晃得越厉害，所以上舱很晃很晃。我买上舱的一个原因是想上甲板看看，结果上船后工作人员不让我们去甲板，只能隔着窗户看外面的风景。中舱也可以隔着窗户看景，为什么不省下 20 元钱呢。所以我觉得，上舱的环境对不起这个价格，还是中舱比较好。&lt;/p>
&lt;h2 id="出发">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#出发" class="anchor-link" aria-label="出发">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>出发&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-0.jpg" alt="dong-ji-island-0.jpg">&lt;span class="caption">※ 乘坐的汽车&lt;/span>&lt;/p>
&lt;p>八点左右，我们集合完毕，启程。出发的第一时间，我们又在公众号上抢了庙子湖到朱家尖的返程票，这次我买的是中舱。当时不知道不同舱之间的环境有什么区别，所以想感受一下。公路穿过舟山的一个个岛屿，我对这里的生活很好奇。这里的交通不是那么方便，淡水资源也不多，居然还有这么多留在这些岛上生活的人，甚至还建了挺豪华的大楼，高档的小区。老年的时候在这养老挺不错，如果没有台风的话（当然是不可能避免台风的）。&lt;/p>
&lt;p>司机把我们带到在了朱家尖最南端的道路上就走了。朱家尖的游轮码头在岛屿的最北端，我们来南端是觉得时间还早，想看看能不能在这的海边玩一玩，顺便吃顿午饭。然后再去码头。令我们失望的是，海边要买票才能进。周围种上了密密麻麻的树，挡着视野，不掏钱进景区，根本看不到海边是什么样的——那就算了，直接吃饭。到海岛玩当然要吃海鲜大餐。各种贝类，螃蟹、龙虾，点了满满一桌。队伍里的大胃王有很多，觉得这些还不够，于是又点了西红柿鸡蛋，土豆丝等考验厨师基本功的菜。事实证明，可能是在这边点这种传统菜的人太少，厨师有些生疏，做的并不太好吃。但鲍鱼、龙虾这种，确实可以。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-1.jpg" alt="dong-ji-island-1.jpg">&lt;span class="caption">※ 在朱家尖吃的午餐&lt;/span>&lt;/p>
&lt;p>码头外的建筑别具一格，在码头的候船大厅里，我们收整了一下行李，分了分物资。这次游玩，他们买了几大兜子零食，还有一个西瓜，一箱周黑鸭。进了码头，我终于见到了海水——确实浑浊。黄的不能再黄，浑的不能再浑。游轮也比我想象中的要小。这么小的船，居然能坐几百人。船内的卫生很不错，但人的素质有待提高。因为带小孩来玩的人有很多，那些小屁孩根本坐不住，在走廊跑来跑去，大喊大叫，甚是头疼。小孩吵闹也就算了，有些成年人，嗓子里像装了声音放大器一样，说个没完没了。在海上，手机没有信号，我也无法通过水手机来分散噪声的影响。每个人的座位都是有固定编号的。但总会遇到有人想跟你换座，理由就是想和朋友坐在一起。我和同事们就很无所谓，坐哪不都一样。有些人非要挑来挑去，一个多小时的时间，你不老老实实休息，非要玩吗，留着精力到岛上玩不好吗。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-2.jpg" alt="dong-ji-island-2.jpg">&lt;span class="caption">※ 朱家尖蜈蚣峙码头外&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-3.jpg" alt="dong-ji-island-3.jpg">&lt;span class="caption">※ 候船大厅&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-4.jpg" alt="dong-ji-island-4.jpg">&lt;span class="caption">※ 登上码头&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-5.jpg" alt="dong-ji-island-5.jpg">&lt;span class="caption">※ 浑浊的海水&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-6.jpg" alt="dong-ji-island-6.jpg">&lt;span class="caption">※ 我们要乘坐的船&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-7.jpg" alt="dong-ji-island-7.jpg">&lt;span class="caption">※ 船内上舱布局&lt;/span>&lt;/p>
&lt;h2 id="庙子湖">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#庙子湖" class="anchor-link" aria-label="庙子湖">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>庙子湖&lt;/h2>
&lt;p>庙子湖是东极岛之旅的第一站，到达庙子湖的时候已经是下午三点。这里由于远离了长江入海口，海水很蓝。靠码头一侧的海岸上上下下都是民宿。这些五颜六色的民宿房子构成了一道独特的风景线。我们预订的民宿也在这之中。我们先入住民宿休整了一下，然后再去外边转一转。由于淡水资源匮乏，这里的民宿每天供水的时间有限，从下午四点到晚上八点。各家老板会通过自备的水桶蓄满水，供其他时间段使用。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-8.jpg" alt="dong-ji-island-8.jpg">&lt;span class="caption">※ 庙子湖岛的海岸&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-9.jpg" alt="dong-ji-island-9.jpg">&lt;span class="caption">※ 从所住民宿的角度向庙子湖岛码头拍的照&lt;/span>&lt;/p>
&lt;p>这座岛是电影《后会无期》的取景地之一。顺着上山的小路一路向南，可以眺望到其他岛屿以及一望无际的海洋。小山的峰顶屹立着一座雕像，手举火炬目视前方，这是财伯公。这座雕像所在点这座岛屿南端的最高点，再往前下山，便可看到那座建立在礁石之上的灯塔。灯塔周围的礁石极为崎岖，踩上去总感觉随时会晕眩摔倒。灯塔边上拉着警戒线警告游客不要下到礁石底下，但我们几个人还是作死下了下去。傍晚，海水已经开始涨了起来，礁石上都是等待着海水滋润的藤壶，一些积水之处，还长着小海葵。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-10.jpg" alt="dong-ji-island-10.jpg">&lt;span class="caption">※ 一路向南&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-11.jpg" alt="dong-ji-island-11.jpg">&lt;span class="caption">※ 远景抓拍，感谢出镜的路人&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-12.jpg" alt="dong-ji-island-12.jpg">&lt;span class="caption">※ 雄伟的雕像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-13.jpg" alt="dong-ji-island-13.jpg">&lt;span class="caption">※ 继续向南&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-14.jpg" alt="dong-ji-island-14.jpg">&lt;span class="caption">※ 礁石上的灯塔&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-15.jpg" alt="dong-ji-island-15.jpg">&lt;span class="caption">※ 灯塔与游轮&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-16.jpg" alt="dong-ji-island-16.jpg">&lt;span class="caption">※ 灯塔塔顶&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-17.jpg" alt="dong-ji-island-17.jpg">&lt;span class="caption">※ 到礁石底下&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-18.jpg" alt="dong-ji-island-18.jpg">&lt;span class="caption">※ 积水中的小海葵&lt;/span>&lt;/p>
&lt;p>太阳逐渐落下，我们沿着山顶的小路向北走。路过的游客逐渐减少，因为这个方向没有什么特别值得游玩的地方，只有无限的寂静。由于是阴天，天际积压着厚厚的云层，很遗憾并不能目睹太阳落入海平面之下，仅能瞥见一丝的余晖。此刻，我们站在悬崖边，海风拂过，远方的海水与乌云融成一片。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-19.jpg" alt="dong-ji-island-19.jpg">&lt;span class="caption">※ 傍晚的海湾&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-20.jpg" alt="dong-ji-island-20.jpg">&lt;span class="caption">※ 后会无期&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-21.jpg" alt="dong-ji-island-21.jpg">&lt;span class="caption">※ 一处观景台&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-22.jpg" alt="dong-ji-island-22.jpg">&lt;span class="caption">※ 红日与小亭&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-23.jpg" alt="dong-ji-island-23.jpg">&lt;span class="caption">※ 悬崖边&lt;/span>&lt;/p>
&lt;p>时间不早了，赶紧下山，赶在停水前洗个热水澡。我们向北走了很长一段路，相当于绕了半个海岛，所以回到民宿已经七点四十分了。夜晚的海岛也很热闹，路过的各种餐厅酒馆都聚满了游客。我们讨论着明天早上是否早期去看日出，犹豫片刻，还是选择睡觉。太累了，还是阴天，能看到日出的可能性不大。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-24.jpg" alt="dong-ji-island-24.jpg">&lt;span class="caption">※ 夜晚的码头&lt;/span>&lt;/p>
&lt;h2 id="青浜">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#青浜" class="anchor-link" aria-label="青浜">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>青浜&lt;/h2>
&lt;p>第二天早上八点，我们在码头集合，准备前往青浜岛。东极诸岛之间的船票直接在码头购买即可，无需提前抢票。岛与岛之间的船票只有中舱可以乘坐，也可到甲板上欣赏海上风光。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-25.jpg" alt="dong-ji-island-25.jpg">&lt;span class="caption">※ 从海上看庙子湖的灯塔&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-26.jpg" alt="dong-ji-island-26.jpg">&lt;span class="caption">※ 船上甲板&lt;/span>&lt;/p>
&lt;p>青浜岛的开发程度没有庙子湖的开发程度高，个人感觉，开发程度仅有 10%。岛上的码头在西边，出了码头，就需要向山上走。所有的房屋都建在山上。从西海岸到东海岸的这一条道路两旁，上上下下聚集着当地的居民小楼，偶尔也有一些酒吧和民宿。到达东海岸，我们终于见着了一处小沙滩。但这里被海水带上来的垃圾很多，不值得玩。沿着东边的小路向南走，这一片都是废弃了的房屋，杂草丛生。以前居住在这里的人都已经搬走了。在房子的外墙上，甚至可以看到已经成为「历史遗迹」的计划生育标语。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-27.jpg" alt="dong-ji-island-27.jpg">&lt;span class="caption">※ 从房屋间的小路穿过&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-28.jpg" alt="dong-ji-island-28.jpg">&lt;span class="caption">※ 唯一的沙滩&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-29.jpg" alt="dong-ji-island-29.jpg">&lt;span class="caption">※ 计划生育标语&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-30.jpg" alt="dong-ji-island-30.jpg">&lt;span class="caption">※ 被遗弃的村落&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-31.jpg" alt="dong-ji-island-31.jpg">&lt;span class="caption">※ 房屋建造日期&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-32.jpg" alt="dong-ji-island-32.jpg">&lt;span class="caption">※ 小酒吧&lt;/span>&lt;/p>
&lt;p>青浜岛实在是没什么值得看的，我们转了一圈就回到了码头，买票向东福山岛「进军」。&lt;/p>
&lt;h2 id="东福山">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#东福山" class="anchor-link" aria-label="东福山">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>东福山&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-33.jpg" alt="dong-ji-island-33.jpg">&lt;span class="caption">※ 带我们来东福山的游轮&lt;/span>&lt;/p>
&lt;p>东福山岛的最大特点就是有一座比较高的山（当然是和其他岛屿相比）。那么去东福山，必然是要爬山。我们一出码头，就向山顶冲锋。这座岛上生长着茂盛的仙人掌，我第一次见到能长得如此密集的仙人掌。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-34.jpg" alt="dong-ji-island-34.jpg">&lt;span class="caption">※ 仙人掌&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-35.jpg" alt="dong-ji-island-35.jpg">&lt;span class="caption">※ 打卡东福山地标&lt;/span>&lt;/p>
&lt;p>我们挑选的上山路线比较「感人」，是一条沿着海岸线的道路，很陡，很难走，我估计让骡子走这条路都要累得够呛。我甚至觉得，这根本不是官方路线，而是当地人上山的小路。这条山路走得很绝望，当你以为前方就是山顶，可以下山的时候，咬着牙撑了上去，却发现，前方还有一段上山的道路。虽然有些山很高，但你爬山的时候，是知道终点在哪里的，你可以规划什么时候休息，什么时候继续前进。但在这里，一切都是未知的，你没有明确的目标，这是一种对结果未知的绝望。当时我们并不知道还有一条平坦宽阔的水泥路可以上山，那条路汽车都可以通过。这是我们登到山顶之后才发现的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-36.jpg" alt="dong-ji-island-36.jpg">&lt;span class="caption">※ 远眺东极岛的其他岛屿&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-37.jpg" alt="dong-ji-island-37.jpg">&lt;span class="caption">※ 从山顶往下看&lt;/span>&lt;/p>
&lt;p>山顶居然开着一家饮品店，我点了一杯冰镇的柠檬茶。这家店里开着空调，饮品可以无限续杯凉白开。这真的是经历爬山的痛苦之后，获得的最大的幸福。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-38.jpg" alt="dong-ji-island-38.jpg">&lt;span class="caption">※ 山顶小店&lt;/span>&lt;/p>
&lt;p>我们选择从那条宽敞的道路下山，这条路真的舒服多了，道路两旁还有各种民宿和餐厅。和这条路相比，那条上山小路宛如丛林探险。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-39.jpg" alt="dong-ji-island-39.jpg">&lt;span class="caption">※ 下山之路&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dong-ji-island-40.jpg" alt="dong-ji-island-40.jpg">&lt;span class="caption">※ 东福山的礁石&lt;/span>&lt;/p>
&lt;p>下山后，我们便买了返程的票，从东福山到庙子湖，再从庙子湖到朱家尖。我们依然怀念前一天刚到这里吃的那顿海鲜大餐，于是决定在走之前，再吃一顿。我们又点了鲍鱼、龙虾、蛏子、螃蟹，当然还有传统的西红柿炒鸡蛋，炒土豆丝，蛋炒饭。坐车回到家的时候，已经晚上九点多了。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/travels/dong-ji-island/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>这次周末旅途的日程安排很满，每一条路线规划都需要精确的时间。所以很感谢负责行动规划的同事。全程个人总花费约为 1300 元，我觉得很划算。如果自己一个人去的话，再加上吃海鲜，花销肯定会比这个要高很多。他们第一天晚上还租了钓竿去岸边钓鱼，我嫌时间太晚，并且太累了，就没有去，直接躺床上早早睡了。&lt;/p>
&lt;p>东极岛的风景，是人文和自然交汇在一起的。岸边的民宿是这道风景必不可少的部分。这里也是曾经的战士们坚守的阵地，许多英勇的军人安葬于此，山上建有烈士陵园。&lt;/p>
&lt;p>在看电影《伊尼舍林的报丧女妖》时，我感觉主人公生活的海岛很孤寂，有几幕特别展示了主人公在岛上行走的画面，海风、海浪、海岛相交融。那一晚，在庙子湖岛山顶的小道上行走的时候，看着西边下潜的太阳，再回头看到天上的银月，月下缓慢行驶的货船，望不到边际的海洋，耳旁传来海浪拍打到礁石上发出的清脆声音，也感受到了一丝空寂。一个人，对整个世界来说，是如此微不足道。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/dong-ji-island/" target="_blank" rel="noopener">https://guanqr.com/life/travels/dong-ji-island/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/mountaineering/">登山</category><category domain="https://guanqr.com/tags/seaside/">海边</category></item><item><title>
人偶：屠夫比尔</title><link>https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/</link><guid isPermaLink="true">https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/</guid><pubDate>Mon, 15 May 2023 17:11:07 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">早&lt;/span>在二〇一〇年的&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/" target="_blank" rel="noopener">收藏回顾&lt;/a>里，我就提到，屠夫比尔是我入坑预订的第一款人偶。如果没有预订这一款人偶，就不会加入模玩群，不会认识到更多有着共同爱好的朋友，没有机会预订更多题材的人偶。所以屠夫比尔对我来说，意义非凡。&lt;/p>
&lt;p>《纽约黑帮》是由马丁·斯科塞斯导演执导，丹尼尔·戴·刘易斯和莱昂纳多·迪卡普里奥主演的黑帮电影。讲述了纽约建设初期，各民族各帮派之间的斗争。虽然刘易斯并没有凭借这部电影获得奥斯卡奖项，但他在这里饰演的屠夫比尔的形象，丝毫不比他在《血色将至》中饰演的丹尼尔·普莱恩维尤形象逊色。对我而言，我更喜欢屠夫比尔这个角色。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-9.jpg" alt="one-sixth-scale-figures-2021-9.jpg">&lt;span class="caption">※ Mr. Cutting 礼服剧照&lt;/span>&lt;/p>
&lt;p>今年年初的时候，Yunsil 终于做完了这款人偶的衣服，我在春节后收到了它。看着 Toribox 网站上记录的制作过程，再看这手中这套精美的衣服，便觉得，这么长时间的等待是值得的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-0.png" alt="one-sixth-scale-figure-bill-the-butcher-0.png">&lt;span class="caption">※ Toribox 官网上显示的制作过程&lt;/span>&lt;/p>
&lt;p>从本篇收藏分享文章开始，图片的水印会根据画面做适当调整，不再像之前那样，水印过大，过于明显，以至于影响了图片中的主体。另外要说的一点是，这类文章的图片加水印的原因，是怕被圈内人士盗图。&lt;/p>
&lt;h2 id="头雕">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/#头雕" class="anchor-link" aria-label="头雕">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>头雕&lt;/h2>
&lt;p>头雕是一个人偶的灵魂。我在预订各种人偶衣服的时候，就是因为没有相应人物的头雕，总会犹豫很长时间。买了衣服，没有头，人偶组不起来，多没意思。而制作精良的头雕，往往会很抢手，当你知道有这么一款头雕的时候，它已经被预订完了。&lt;/p>
&lt;p>我的屠夫头雕收集之路，颇为坎坷。在二〇一〇年的&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/" target="_blank" rel="noopener">收藏回顾&lt;/a>里，我讲过有关屠夫头雕的故事。当时在机缘巧合之中，获得了阿展屠夫的预订名额。但到现在为止，这款头雕还没有制作好，连个雏形的影子都没有。阿展的手艺发挥时好时坏，这究竟是否会是一款好头雕，也无法做定论。去年年末，我在逛闲鱼的时候，偶然发现有人在出售 Jay 的屠夫头雕。这款头雕限量 35 颗，机不可失时不再来，赶紧抢购。于是，在挣扎了这么长的时间之后，我还是拥有了 Jay 的屠夫头雕——真香。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-1.jpg" alt="one-sixth-scale-figure-bill-the-butcher-1.jpg">&lt;span class="caption">※ 屠夫头雕&lt;/span>&lt;/p>
&lt;p>卖家是一个半退坑玩家，发货的时候再三叮嘱了如何取出头雕以保护胡须不会损伤。这颗头雕的胡子是立起来的，并没有偷懒贴着脸进行雕刻，确实很脆弱。头雕的涂装也很优秀。屠夫的左眼是一个假眼，上面雕刻了一只鹰。这个细节在头雕中也有体现。但我觉得美中不足的一点是，右眼的颜色有些偏蓝，实际上应该偏绿一些。&lt;/p>
&lt;p>前一阵子 Jay 还完成了电影开场对决一幕的头雕制作。个人感觉像真度相对于礼服版，又提升了一些，右眼的颜色也有改进，确实不错。但这一套人偶我没有预订，一个角色收藏一款就够了，否则花销太大，这个绝对不会「真香」。&lt;/p>
&lt;h2 id="衣服">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/#衣服" class="anchor-link" aria-label="衣服">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>衣服&lt;/h2>
&lt;p>不得不说，这套衣服的配色很骚气，印花很复杂。在希斯和芋艿的监工下，Yunsil 对衣服的版型把控和缝纫技术做到了极致。这真的是 Yunsil 制作的诸多题材的衣服中数一数二的佳作，极具收藏价值。当初 2019 年集单的时候花了很久才凑到了 50 套，如今过了 4 年，出货后，却很少见有人转手。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-2.jpg" alt="one-sixth-scale-figure-bill-the-butcher-2.jpg">&lt;span class="caption">※ 屠夫衣服和包装盒&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-3.jpg" alt="one-sixth-scale-figure-bill-the-butcher-3.jpg">&lt;span class="caption">※ 屠夫衣服、头雕和 COA 证书&lt;/span>&lt;/p>
&lt;p>这套衣服打板使用的素体是 HotToys 的 TTM18 素体，我直接在闲鱼上收了一个，直接穿衣即可，省的用祖传第三方 M01 素体进行增肌垫肩等一系列操作了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-4.jpg" alt="one-sixth-scale-figure-bill-the-butcher-4.jpg">&lt;span class="caption">※ TTM18 素体&lt;/span>&lt;/p>
&lt;p>衬衣的材质并不像现代西装那么细腻，采用了较粗纹理的面料，稍有泛黄。马甲和裤子的材质比我想象中的要硬一些，可能是考虑到了印花和面料对光线反射的情况进行的选择。大衣的材质很柔软，下摆插入了铁丝便于摆造型，很容易模仿出真实大衣下摆自然下垂的感觉。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-5.jpg" alt="one-sixth-scale-figure-bill-the-butcher-5.jpg">&lt;span class="caption">※ 衬衣细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-6.jpg" alt="one-sixth-scale-figure-bill-the-butcher-6.jpg">&lt;span class="caption">※ 马甲细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-7.jpg" alt="one-sixth-scale-figure-bill-the-butcher-7.jpg">&lt;span class="caption">※ 大衣细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-8.jpg" alt="one-sixth-scale-figure-bill-the-butcher-8.jpg">&lt;span class="caption">※ 裤子细节&lt;/span>&lt;/p>
&lt;h2 id="配件">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/#配件" class="anchor-link" aria-label="配件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配件&lt;/h2>
&lt;p>去年春节结束后，我预订了夜茶制作的 2.0 版放松手型，今年年初也正好出货了，遂用之。至于靴子，我原本有一款 Creg 出品的打印材质白膜，性价比很低。后来夜茶又制作了一款，相近的价格却能得到涂装版本，而且还原度更高，这有什么理由不去预订？随后我便把 Creg 的那个靴子在闲鱼上卖掉了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-9.jpg" alt="one-sixth-scale-figure-bill-the-butcher-9.jpg">&lt;span class="caption">※ 夜茶出品的 2.0 版放松手型&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-10.jpg" alt="one-sixth-scale-figure-bill-the-butcher-10.jpg">&lt;span class="caption">※ 手型上身效果&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-11.jpg" alt="one-sixth-scale-figure-bill-the-butcher-11.jpg">&lt;span class="caption">※ 夜茶出品的屠夫靴子&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-12.jpg" alt="one-sixth-scale-figure-bill-the-butcher-12.jpg">&lt;span class="caption">※ 靴子细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-13.jpg" alt="one-sixth-scale-figure-bill-the-butcher-13.jpg">&lt;span class="caption">※ 靴子上身效果&lt;/span>&lt;/p>
&lt;hr>
&lt;p>最终的整体效果展示如下。目前的配件还缺少一顶礼帽，Robbie 正在制作中，应该用不了多久就能完成。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-14.jpg" alt="one-sixth-scale-figure-bill-the-butcher-14.jpg">&lt;span class="caption">※ 整体效果（上半身）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bill-the-butcher-15.jpg" alt="one-sixth-scale-figure-bill-the-butcher-15.jpg">&lt;span class="caption">※ 整体效果（全身）&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/" target="_blank" rel="noopener">https://guanqr.com/collections/figures/one-sixth-scale-figure-bill-the-butcher/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/collections/">collections</category><category domain="https://guanqr.com/collections/figures/">figures</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/gangster/">黑帮</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
大岚登山赏樱之旅</title><link>https://guanqr.com/life/travels/mountain-and-sakura-in-dalan/</link><guid isPermaLink="true">https://guanqr.com/life/travels/mountain-and-sakura-in-dalan/</guid><pubDate>Sun, 09 Apr 2023 20:49:55 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">去&lt;/span>年一整年都没有出去玩一玩，今年的春天，万物复苏，许多已经停滞几年的活动开始恢复举办。总在床和办公座椅之间两点一线的生活，确实有些乏味——于是，我守在手机屏幕前，准时抢到了一张参加登山活动的门票。活动举办方给了公司一些免费的名额，我在第一轮抢的时候没抢到，第二轮才幸运地上了车。&lt;/p>
&lt;p>参加活动的人，需要早上在万达广场门口集合，乘坐大巴车前往登山的起点，大岚的一所学校操场。办公室还有两位成功报名活动的同事，我们早上一起坐车去的万达广场。虽然已经提前从地图上了解了大岚所处的环境，但我还是没料到，大巴车在山里沿着山路拐来拐去有多令人难受。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-0.jpg" alt="mountain-and-sakura-in-dalan-0.jpg">&lt;span class="caption">※ 作为起点的校园&lt;/span>&lt;/p>
&lt;p>按照计划，在起点初领取个人物资（背包、地图、短袖）后，会有一个集体热身活动，相当于是开幕式。但毕竟这个活动有结束时间，我们几个人觉得，早出发早结束，不要在这里磨叽，跟着大部队速度就很慢了。于是，在领取物资后，直接开始了登山。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-1.jpg" alt="mountain-and-sakura-in-dalan-1.jpg">&lt;span class="caption">※ 沿路的风景&lt;/span>&lt;/p>
&lt;p>我们出发的路线其实是错的，直接抄的近路。原本的路线是沿着种植茶树的小路上山，但我们走的是山下可以过车的水泥路。不过后来我们及时回归到了正确路线。前面这段路程没有打卡点，也无所谓对错了，殊途同归。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-2.jpg" alt="mountain-and-sakura-in-dalan-2.jpg">&lt;span class="caption">※ 樱花&lt;/span>&lt;/p>
&lt;p>第一个打卡点过于遥远，感觉走了很长很长的路才到。这里的樱花品种和以前在杭州见到的品种不太一样，说实话，我更喜欢那种小花瓣的，春风吹过，宛如雪花飘落。途中我们还穿过了几个村落。村子里的人还有着收集木柴的原始习惯，将柴火劈成一条一条的，垒在墙边。或许是用柴火做饭更方便一些。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-3.jpg" alt="mountain-and-sakura-in-dalan-3.jpg">&lt;span class="caption">※ 路线标记&lt;/span>&lt;/p>
&lt;p>我走的比较快，就脱离了他们的队伍，自己前行。后半段的路程过于痛苦，全程上山的土坡和泥路，爬一步，歇一步，我为了节省力气，再一次抄了近路，直接从土坡下冲了上去，然后倒在了树边，喘了五分钟才缓过来。现在回想起当初的情节，腿部不由地又酸痛起来。中间的路程，其实也没什么所谓的美景。我只顾着走快一些，尽早到达终点，休息。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-4.jpg" alt="mountain-and-sakura-in-dalan-4.jpg">&lt;span class="caption">※ 远眺&lt;/span>&lt;/p>
&lt;p>终点和起点相同，等于说是绕着山转了一大圈。我算是第一批到达终点的人，领取了纪念徽章后，就前往卫生间冲洗着脸。这一路出了不少汗，脸上都是白色的，夹杂着灰土和汗渍的颗粒。大概尿液也随着汗水挥发了。冲了几遍后，从脸上流到嘴里的水依然有着咸咸的味道。我坐在阴凉的走廊里，等待着同事们。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-5.jpg" alt="mountain-and-sakura-in-dalan-5.jpg">&lt;span class="caption">※ 村落中的樱花王&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-6.jpg" alt="mountain-and-sakura-in-dalan-6.jpg">&lt;span class="caption">※ 走在队伍的前面&lt;/span>&lt;/p>
&lt;p>这场旅途，我个人觉得，不如浙大的毅行线路。那条线路起码能登上山顶俯瞰整个杭城，能走到法喜寺吃顿午餐，能穿过茶园问一问茶叶的清香，能在山涧戏水感受清凉。然而这条线，所谓赏樱，也没多少的樱花。山上除了千篇一律的树木，也无其他新鲜的玩意。并且更要命的是，晚上回家后，我发现自己暴露在外的皮肤都已经晒得通红，鼻子和耳朵都晒破了皮，一直流着水。后面的两周我一直饱受晒伤的痛苦……&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-7.jpg" alt="mountain-and-sakura-in-dalan-7.jpg">&lt;span class="caption">※ 地图打卡&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-8.jpg" alt="mountain-and-sakura-in-dalan-8.jpg">&lt;span class="caption">※ 完成证书&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mountain-and-sakura-in-dalan-9.jpg" alt="mountain-and-sakura-in-dalan-9.jpg">&lt;span class="caption">※ 纪念徽章&lt;/span>&lt;/p>
&lt;p>下次还去吗，再说吧……&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/mountain-and-sakura-in-dalan/" target="_blank" rel="noopener">https://guanqr.com/life/travels/mountain-and-sakura-in-dalan/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/mountaineering/">登山</category><category domain="https://guanqr.com/tags/outdoors/">户外</category></item><item><title>
Te Amo, Nellie</title><link>https://guanqr.com/life/films/babylon/</link><guid isPermaLink="true">https://guanqr.com/life/films/babylon/</guid><pubDate>Wed, 01 Mar 2023 22:13:08 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">如&lt;/span>果你喜欢《爆裂鼓手》《爱乐之城》，如果你喜欢爵士乐，如果你热爱电影这一艺术形式，那么《巴比伦》绝对是今年值得一看的电影了。由于平日闲暇较少，我间断地看了几天才看完。不过，当电影结束后，有种莫名的情绪即刻涌了上来，久久无法消散。那种贯穿整部电影的情调，即使没有连贯地看完整部电影，却也可以回荡在心间。&lt;/p>
&lt;p>本篇小文不能算是影评，只是摘录总结一些电影中我最爱的情节。&lt;/p>
&lt;p>电影中最盛大的场景要属开头的狂欢派对。在《了不起的盖茨比》中，纸醉金迷的派对场景刻画就足够让观众感受到那个年代充满金钱又暗藏污垢的上流社会。但在《巴比伦》中，这场派对表现地更为疯狂。夜晚的庄园城堡中，大厅前的舞台上，爵士乐队演奏着欢快的旋律，无数的男女随着节奏舞动着躯体。很多人脱去了遮挡自身肉体的衣物，释放着最原始的野性。甚至有一头大象也加入了派对的现场。这场派对充满了屎尿屁和色情的元素，很好的衬托出了当时的上流人士生活的糜烂。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-0.jpg" alt="babylon-0.jpg">&lt;span class="caption">※ 狂欢派对&lt;/span>&lt;/p>
&lt;p>这场派对同时引出了几位主要角色：协助管理庄园派对的小助手 Manny，渴望称为优秀演员的普通女生 Nellie 还有当时著名的演员 Jack……哦，还有一个不起眼却不可或缺的角色，爵士乐队的黑人小号手 Sidney。&lt;/p>
&lt;p>我经常会问我自己一个问题：为什么我这么喜欢观看电影呢？在派对的后台，Manny 初次遇见 Nellie 后，他们谈论到了此事。&lt;/p>
&lt;blockquote class="quote en">
&lt;p>N：If you could go anywhere in the whole world, where would you go?&lt;br>
M: Anywhere... I don't know. I always wanted to go on a movie set.&lt;br>
N: Tell me why. I wanna go on a movie set too.&lt;br>
M: Why? I just want to be part of something bigger, I guess.&lt;br>
N: Bigger than what?
M: Bigger than this. I don't know. Bigger than my life. Bigger than scooping elephant shit. Bigger. Better. Important. Something important. To be part of something important. Something that lasts, that means something.&lt;br>
N: I love that answer.&lt;br>
M: Yeah. Making movies.&lt;br>
N: I want to go on a movie set too.&lt;br>
M: Or at least I want to be there, work there, learn there. I don't know. I just love watching movies, you know?&lt;br>
N: I love watching movies too.&lt;br>
M: Like... You sit there. And you're watching the movie and ...&lt;br>
N: And you escape. You don't have to be in your own shitty fucking life.&lt;br>
M: Exactly! Exactly!&lt;br>
N: You can be in their life.&lt;br>
M: Or wherever! You can be in the fucking Wild West. You can be in fucking space. You can be like a gangster. And people dance in movies and people die in movies. And they're not really dead. It's fucking amazing. They're not really dead. Like literally, kill me.&lt;br>
N: Pa!&lt;br>
M: And nothing happened, for real, but at the same time, it's something even more important than life. You can feel it. Like... I don't know. Movies are sad sometimes. Movies are fucking happy.&lt;br>
N: They make you feel something. One day, you and me, we're gonna be on a movie set. We can have lunch together.&lt;br>
M: Yeah, for sure.&lt;br>&lt;/p>&lt;/blockquote>
&lt;p>他们发现彼此有着如此相似的地方，都热爱电影，都希望能在电影行业中发展。&lt;/p>
&lt;p>派对结束后，Manny 作为助手开车拉醉酒的 Jack 回家。Jack 在家里对 Manny 说：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>You know what we gotta do? We gotta redefine the form. The man who puts gasoline in your tank goes to the movies, why? Because he feels less alone there. Don't we owe him more than the same old shit? You got the guys in Europe with the twelve-tone. You got Bauhaus architecture. Fucking Bauhaus, you know? And we're still doing costume pictures? It's the dinosaurs, kid. It;s the ones who go to Beverly Hills for meatballs and mint juleps to reminisce about the old days, when they can't see there's so much more to be done! We've got to innovate. We've got to inspire. We got to dream beyond there pesky shells of flesh and bone. Map those dreams onto celluloid and print them into history. Turn today into tomorrow's lonely man, may look up at that flickering screen and say for the very first time, 「Eureka! I am not alone!」&lt;/p>&lt;/blockquote>
&lt;p>Manny 和 Nellie，Manny 和 Jack 之间的这两段对话，是整部电影最核心的两段对话。这正是导演想通过主人公对观众说的话。我相信也是千千万万的电影爱好者们，如此喜欢观看电影的原因。&lt;/p>
&lt;p>Manny 很幸运地跟随者 Jack，找到了在电影片场工作的机会。而 Nellie 由于在派对中的耀眼表现，成为了某个剧组的临时搭戏的演员。在片场，Manny 帮助剧组借来了摄影机，在夕阳的余晖下，为剧组抓住了宝贵的时间，拍摄下来了一段最美的镜头。他成为了剧组中不可缺少的助理。Nellie 由于对哭戏的深刻表现，甚至能够控制双眼滴落泪水的时间和数量，盖过了主演的风采，得到了导演的重视，这部电影也让她名声大噪。两人在电影行业中的事业，似乎有着无限的发展潜力。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-1.jpg" alt="babylon-1.jpg">&lt;span class="caption">※ 余晖下的英雄与美人&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-2.jpg" alt="babylon-2.jpg">&lt;span class="caption">※ Manny 注视着余晖下的场景&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-3.jpg" alt="babylon-3.jpg">&lt;span class="caption">※ Nellie 在电影中展现了出色的演技&lt;/span>&lt;/p>
&lt;p>当有声电影到来的那一刻，一切都变了。演员们在表演的时候需要记下台词，录音师需要和演员配合以保证收音的清晰。默片逐渐在历史中退出舞台。而 Nellie，作为默片时代的影星，有声电影对她而言，是新的机遇，却也是一个沉重的打击。Nellie 放荡的形象，并不悦耳的嗓音，粗鄙的用词，成为了她的缺点。她迷失了方向，开始将自己置身于嗑药和赌博之中。&lt;/p>
&lt;p>有声电影的出现带动了歌舞剧的发展。在摄影棚中录制《雨中曲》合唱的现场，成为制片人的 Manny 发现黑人小号手 Sidney 的表现十分出色。这给了 Manny 创作新电影题材的思路。人们逐渐希望电影中出现黑人角色，黑人音乐，特别是生活在美国南部的人。于是，Sidney 成为了电影界的新星。Manny 也在帮助 Nellie 改变她的戏路，让她参与名流的宴会，接触到更多发展的机会。但 Nellie 对这些时时刻刻装作高雅的上流人士的虚伪感到厌恶。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-4.jpg" alt="babylon-4.jpg">&lt;span class="caption">※ Jack 参加《雨中曲》的合唱&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-5.jpg" alt="babylon-5.jpg">&lt;span class="caption">※ Sidney 的表现引人注目&lt;/span>&lt;/p>
&lt;p>Sidney 在影棚中拍摄的时候，工作人员反映，由于他的肤色和乐队的其他黑人相比，并没有那么的黑，因此在灯光下会显得有些白，导致整个乐队像是黑白混色乐队，可能会影响美国南部的票房收入。他们希望 Sidney 能够在脸上图上黑炭，让他显得更黑一些。Sidney 在现场做了妥协，但在这场戏结束后，他辞职离开了。&lt;/p>
&lt;p>Jack 在影院里看到，电影播放到他饰演的角色和女方表达爱意的浪漫时刻，观众们哄堂大笑。Jack 不解为什么现在的观众不再接受他的表演。女记者 Elinor 采访他之后，发表了一篇名叫《Jack 过气了吗》的文章，这令 Jack 十分生气。他再次找到记者，问她为什么现在的观众会嘲笑他的表演。记者告诉他，没有为什么，不是因为你的声音，不是因为记者写的文章，你也不能做些什么。你的时间已经结束了。Jack 很难接受自己被时代抛弃的事实。记者安慰他，当一百年以后，我们早已离开这个世界，但当人们打开放映机，播放起你演的电影，你就又活了过来，一切死去的东西都会从尘封中醒来……你的时代已经过去了，但你会与天使和幽魂一起成为永恒。Jack 在酒店里遇到了 Fei，向她诉说着自己的过去，自己曾经的辉煌，他累了，走上楼梯，回到自己的房间里，掏出了手枪，结束了自己的生命。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-6.jpg" alt="babylon-6.jpg">&lt;span class="caption">※ Jack 走向自己的房间迎来死亡&lt;/span>&lt;/p>
&lt;p>Nellie 由于赌博欠下了巨额的债款，她已经把自己的积蓄挥霍干净，想要求助 Manny。Manny 和片场的朋友，带着找道具师制作的一包裹假币偿还老板，却被识破。Manny 决定带着 Nellie 逃亡。夜幕下，在 Manny 去朋友家拿逃亡所需物品的时候，Nellie 意识到，由于自己的性格，给 Manny 不断带来麻烦，甚至毁掉了他的电影事业，她选择了离开，走下车，消失在了街道前方的黑暗中。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/babylon-7.jpg" alt="babylon-7.jpg">&lt;span class="caption">※ Nellie 迎接着眼前的黑暗&lt;/span>&lt;/p>
&lt;p>一切都已结束。这些追梦的电影人所在的黄金年代，就像巴比伦一样，辉煌耀眼，却转瞬即逝。电影的最后，Manny 孤身一人来到影院，这次，他作为观众，坐在下面，欣赏着银幕上的传奇故事。记忆将他带回到了那场狂欢派对，第一次遇到 Nellie 的地方。导演在结尾剪辑了从电影诞生到现在为止，具有代表性的众多电影片段。从《火车进站》，到《月球旅行记》，到《宾虚》，到《终结者》，到《黑客帝国》，再到《阿凡达》……从黑白，到有声，到彩色，再到特效。当一部部电影的画面一闪而过，我感受到这些工作者们，为了「造梦」，给观众创造出了电影这样一种独特的艺术，伟大而永恒。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/babylon/" target="_blank" rel="noopener">https://guanqr.com/life/films/babylon/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/music/">音乐</category></item><item><title>
人偶：布鲁斯·韦恩</title><link>https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/</link><guid isPermaLink="true">https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/</guid><pubDate>Sun, 19 Feb 2023 22:27:52 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">由&lt;/span>大本（本·阿弗莱克）饰演的布鲁斯·韦恩是我认为最符合漫画形象的老爷。身材高大，穿着深色 GUCCI 定制西服套装的他一眼就能看出是一位优雅端庄、身处上流社会的老板。如果观察仔细的话，可以看到他在穿西服的时候，经常是衬衣、马甲、外套、大衣的组合，领子上别有领针和领夹，无处不显示出他的 Old Money 形象。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-0.jpg" alt="one-sixth-scale-figure-bruce-wayne-0.jpg">&lt;span class="caption">※ 定妆照&lt;/span>&lt;/p>
&lt;p>我踏入兵人坑的开端就是被 HotToys 出品的梦魇蝙蝠侠（Knightmare Batman）深深吸引。那是 16 年的会展产品，梦魇蝙蝠侠也是我最喜欢的蝙蝠侠形象。在去年，随着导剪版《正义联盟》发售的梦魇蝙蝠侠与黑超人套装出货，我本来想着收一款这次再版的梦魇蝙蝠侠，正好搭配我预订的 Y.M.A. 真皮大衣。不过在当时，子浩兄自己的工作室开启预定蓝紫西装套装，这一套的形象也是很经典的。之前 Yunsil 出过，用料非常棒，不过由于限量，价格十分昂贵。现在既然有这样一个机会摆在眼前，那真不如……犹豫再三后，我选择了收藏西装套。或许你会问，为什么不这两个形象都收藏？因为我的收藏有一个原则，同一个演员，只收藏他饰演的一个角色的一个形象，钱不是大风刮来的。&lt;/p>
&lt;h2 id="头雕">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/#头雕" class="anchor-link" aria-label="头雕">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>头雕&lt;/h2>
&lt;p>我选择的是六等星出品的一款头雕。似乎是一款很早出品的头雕了，数量很多，价格没有被炒上去，市场上翻模泛滥。本来是想去收一颗炎兄出品的头雕，那一款头雕的表情很忧郁，但是那款头雕的脖子向下延伸了些，对于西装角色，特别是大本这种打领带还带领针的，这种头雕的拆卸比较棘手，所以不想再破费了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-1.jpg" alt="one-sixth-scale-figure-bruce-wayne-1.jpg">&lt;span class="caption">※ 六等星出品的布鲁斯·韦恩头雕&lt;/span>&lt;/p>
&lt;h2 id="衣服">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/#衣服" class="anchor-link" aria-label="衣服">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>衣服&lt;/h2>
&lt;p>这款衣服是子浩兄的工作室 Zihao Studio 出品的第一款产品，作为圈子内比较有名的大佬，工作室的第一款产品当然要支持一下。这套衣服价格实惠，附赠手型白膜。领带是找 Dino 定制的。虽然说衣服的质感和缝纫的精细程度和 Yunsil 相比还有些许差异，但版型、颜色甚至价格已经相当可以了。再往上的提升空间已经很小很小，没必要为了追求提升更高水准的裁剪而选择 Yunsil 的品牌。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-2.jpg" alt="one-sixth-scale-figure-bruce-wayne-2.jpg">&lt;span class="caption">※ 子浩出品的西装套&lt;/span>&lt;/p>
&lt;p>所用素体是国产的 NBA 兵人素体，因为大本身高 192 cm，一般的兵人素体达不到这种高度。不过买回来的素体还需要进行改造。切脖子，削肩，切腿，增肌。折腾了我一整天。切下来的碎屑粘的满身都是。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-3.jpg" alt="one-sixth-scale-figure-bruce-wayne-3.jpg">&lt;span class="caption">※ 修改素体中&lt;/span>&lt;/p>
&lt;p>衣服上身的效果很不错。为了能让西服的下摆服帖，我在西服下摆的内侧，马甲下端的内侧粘上了两对小磁铁，能让西服吸附在马甲上不翘起来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-4.jpg" alt="one-sixth-scale-figure-bruce-wayne-4.jpg">&lt;span class="caption">※ 西服细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-5.jpg" alt="one-sixth-scale-figure-bruce-wayne-5.jpg">&lt;span class="caption">※ 衬衣细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-6.jpg" alt="one-sixth-scale-figure-bruce-wayne-6.jpg">&lt;span class="caption">※ 马甲细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-7.jpg" alt="one-sixth-scale-figure-bruce-wayne-7.jpg">&lt;span class="caption">※ 裤子和马甲后端细节&lt;/span>&lt;/p>
&lt;h2 id="配件">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/#配件" class="anchor-link" aria-label="配件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配件&lt;/h2>
&lt;p>除了随衣服赠送的手型外，我还预订了配套皮鞋、领针和领夹。皮鞋由于带有脚踝，如果直接安装在素体上，就显得十分突兀，所以需要参考演员的高度锯腿。大本的身高大概在 192 cm，按照 1:6 的比例，我调整了腿部的长度。在电影的定妆照中，大本穿这身西服时，裤子下端较长，是有褶皱的。锯腿后能够很好地还原。领夹可以将领带和衬衣固定在一起。至于领针的安装，我先用缝线用的针在衬衣领子上穿了小孔，再将领针传过去，能够很好地固定。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-8.jpg" alt="one-sixth-scale-figure-bruce-wayne-8.jpg">&lt;span class="caption">※ 鞋子细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-9.jpg" alt="one-sixth-scale-figure-bruce-wayne-9.jpg">&lt;span class="caption">※ 手型细节&lt;/span>&lt;/p>
&lt;p>不得不感叹，西装的一些小细节真的很讲究。虽然说本人并没有定制过西装，但通过玩这些人偶，对西装的版型、类别有了很多浅显的认知。本次的打理是对我自己手工能力的挑战。虽然小时候经常爱做手工小制作，但这么多年过去了还是有些生疏。从结果来看，自己的技艺还没有衰退……&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-10.jpg" alt="one-sixth-scale-figure-bruce-wayne-10.jpg">&lt;span class="caption">※ 整体效果（上半身）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-bruce-wayne-11.jpg" alt="one-sixth-scale-figure-bruce-wayne-11.jpg">&lt;span class="caption">※ 整体效果（全身）&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/" target="_blank" rel="noopener">https://guanqr.com/collections/figures/one-sixth-scale-figure-bruce-wayne-bvs/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/collections/">collections</category><category domain="https://guanqr.com/collections/figures/">figures</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category><category domain="https://guanqr.com/tags/super-hero/">超级英雄</category></item><item><title>
春节·回家</title><link>https://guanqr.com/life/ideas/spring-festival-2023/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/spring-festival-2023/</guid><pubDate>Sat, 28 Jan 2023 23:22:37 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">终&lt;/span>于要回家了。想当初毕业后，在家里短暂地休息了半个月，就跨入了打工仔的队伍。这一走就是一年半的时间。好在 2022 年末取消了严格的管控措施，让我能够毫无顾虑地走出去，不再担心出站的时候被警察查核酸、扣身份证。并且，在浙江混了五年，这是我第一次体验乘坐飞机回家。因此我很期待这个假期。&lt;/p>
&lt;p>年末的工作量说多也不算多，但有一个坑：如果你走的比较晚的话，会接手那些提前回家的同事们的工作，替他们干活。所以，我还是请了两天的家，提前走人了。这些天很明显地可以发觉到，食堂就餐的人数骤减，晚上走在回公寓的路上，一辆行驶的机动车都没有，十分宁静。&lt;/p>
&lt;p>宁波栎社机场有些小，候机的地方也很迷你，连能够坐下休息的地方都很稀缺。在值机的时候，工作人员给我调到了应急出口的位置，告诉我那个地方宽敞。但登机后才发现，这个地方的弧度有些大，前面虽然能够把腿伸开，但留给我上半身的空间真不如普通座位，而且连个窗户都没有。回家的这趟航班，我特意选了个提供午饭的班次，属于南方航空。因为我第一次坐飞机是在小学一二年级的时候，从郑州到海南，也是南方航空，飞机上的午饭很不错。这一次，午饭果然没有让我失望，哈哈。&lt;/p>
&lt;p>北京大兴机场的内部布局确实挺舒服的，比栎社机场强百倍。母亲开车去大兴机场接我回家。在路上，看到街道边已经空置的核酸采样亭，不知道该说什么是好……这或许会成为我们这一代人的某种印记吧。&lt;/p>
&lt;p>家里，我的房间，心爱的模型还静静等待着我的归来。这些小玩意的上面已经落了一层灰尘。还是家里舒服，脱了外套只用穿着秋衣就行。不知道为什么在浙江这种冬天也能到达 0℃ 的省份，房子里没有暖气。空调制暖的功耗那么大，效果还很差。我特意买了一套加厚的毛绒睡衣，晚上睡觉必须得盖两层被子。&lt;/p>
&lt;p>春节里的「传统」就是去电影院看贺岁档电影。大年初一的上午，我就去看了期待已久的《流浪地球 2》，初二的时候，则是看了《满江红》。最近的网上充斥着这两部电影的影迷互撕的战场。对我而言，我是个科幻迷，对《流浪地球 2》的人物设定和大胆的剧情走向感到很满足。但我也很喜欢张艺谋导演电影中的那种带有中国韵味的艺术气息。最近几年的作品，《影》《一秒钟》《悬崖之上》都挺符合我的审美。这两部电影都不是一个题材的，真没必要撕起来。&lt;/p>
&lt;p>晚上，小区里有卖炮竹的商贩，街道上充满了放炮后的火药味。小时候，在开封，我和小伙伴们经常从父母那里要来钱，买来各种各样的炮，还有各种各样的打火机。把炮埋在雪里，塞进盒子里，丢进水塘里，等待着它们爆炸的瞬间。但最近这些年对炮竹的管制，让我很少再有机会接触这些玩意。没有火药味的春节是不完整的啊——幸运的是，现在住的地方，还残存有一些过去的痕迹。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/spring-festival-2023/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/spring-festival-2023/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/family/">家庭</category></item><item><title>
二〇二三·元旦</title><link>https://guanqr.com/life/ideas/the-first-day-in-2023/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/the-first-day-in-2023/</guid><pubDate>Mon, 02 Jan 2023 23:09:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>新的一年的开始，我喜提十天元旦假期。如果用五个字来形容这个假期，那就是：痛并快乐着。因为，如同这个时期的大多数人一样，我也阳了。&lt;/p>
&lt;p>近期一直在做一个欧洲客户的项目，由于正处在设计评审的阶段，我和负责结构设计的团队成员忙得死去活来。这个时候正赶上新冠的大面积感染，每天来办公室上班的人肉眼可见地减少，有人评价道：现在工作日来办公室的人还没以前周末来加班的人多。身边的同事一个接着一个请假休息，同岗位十多个人就只剩下了三位，他们的工作自然被分到了我们这些仍坚持在「小组晋级赛」人员的身上。此刻的我，其实也希望自己发烧，正好找个理由休息一下，躲开这些别人抛给我的任务。我自己的都还没忙完，哪有空搞他们的。但我如果溜走的话，我的项目的本周节点就会延期，这算是我的责任了，我也不好推给别人。所以，我要苟过这一周，下周阳不阳就无所谓了。&lt;/p>
&lt;p>在 12 月 23 日（周五）的晚上，结束了一周的工作，躺在了床上。我嗓子干燥无比，有异物感，导致凌晨四五点也没能入眠。遂打开手机，看了一眼朋友圈。嚯~白天还在和我一起改图纸的小伙伴，在三点多发了条动态，发高烧了。看来我也在劫难逃了。早上七点多，我出门骑着共享电驴直奔核酸采样点。现在核酸采样点分三种，第一种是阴性多人混检，免费，但在目前这种形势下，混检100%是阳性，没什么用。第二种是阳性单人单检，免费，如果你的健康码是绿的，还不能在这种地方做核酸。第三种是阴性单人单检，一次十几块钱。我要做的就是第三种。早上来排队的人不算多。听同事说周一的时候排队的人很长，可能是大批量的人已经阳过了，就不能在这里做核酸，所以人数就少了些。&lt;/p>
&lt;p>上午回到住的地方之后，嗓子里的异物感越来越严重，开始咳嗽，但没有发烧的症状——或许在某个时间段确实发烧了，但我没有温度计，所以没有测量体温，不知道结果怎样；或许我比较幸运，症状很轻很轻。晚上，我查到了核酸的检测结果，果然是阳性。这下好了，我如愿以偿地可以请病假了，而且一周之后又是元旦假期。我终于可以在忙碌之中喘口气，小小的因祸得福。&lt;/p>
&lt;p>虽然没有发烧，但咳嗽也并不好受。那几天咳得我整个身体都要散架了，嗓子里的浓痰永远吐不干净，说话基本上发不出正常的声音。外面寒风刺骨，我只能躲在被窝里，吹着空调暖风，在网上刷各种剧集。元旦期间我又去做了一次阳性人员的单管核酸，结果显示阴性。&lt;/p>
&lt;p>元旦后的工作日，我返回了公司，生活逐步又恢复到了原来的模样。有人说现在的变异毒株根本不是所谓的大号流感，那些想要放开的人根本就是自私的人。但其实流感的症状要比感冒严重得多。我始终不会忘记，新冠流行后的那年寒假，从学校回家，到达高铁出站口，管理车站的那帮穿着制服的人，不知道是保安还是警察，守在门口查着每一个人的核酸，还扣留了所有人的身份证，需要你住的小区居委会开接收证明才能把身份证还给你。&lt;/p>
&lt;p>事实上，不管是任何人，扣留身份证都是违法行为，更何况这些人是公职人员，知法犯法。当地政府并没有任何白纸黑字的政策显示返乡要居委会的证明，居委会也害怕承担责任，不敢开接收证明。就这样，在冰天雪地与刺骨寒风中，车站外的广场上人挤人，都在等着家里的人来送证明。那些官员们甚至说，可以明天来给证明，明天返还身份证。我不知道这样的防疫有什么意义。我那天在外面冻了三个小时，排到车站基本没有人了，才取回我的身份证。回家后就感冒，上火，牙龈肿痛，无法张嘴，一周后才有所缓解。那次受冻后的症状比这次新冠感染后的症状要严重得多。所以，如果再有一次机会，让我选择，管控还是放开，我依然会选择放开。因为，这样违背马克思主义基本原理的防疫政策根本没有任何的意义。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/the-first-day-in-2023/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/the-first-day-in-2023/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/covid-19/">COVID-19</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
防疫急转弯</title><link>https://guanqr.com/life/ideas/a-sharp-turn-in-epidemic-prevention-policy/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/a-sharp-turn-in-epidemic-prevention-policy/</guid><pubDate>Sun, 11 Dec 2022 12:34:26 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">谁&lt;/span>也不会想到仅仅在 12 月份这短暂的 31 天里，国内的防疫政策会有一个 180 度的急转弯。上周的时候，宁波这边的政策还是，出行必须要 72 小时内的核酸阴性证明，超过时长健康码就会变黄。对此，我天天在公司排队做核酸就浪费了很多很多时间。结果到现在，突然就松绑了，有一种魔幻的感觉。&lt;/p>
&lt;p>优化防疫政策是必然的。在当前变异毒株传播迅速的特性下，再严格的防疫政策，也无法完全隔绝病毒的传播。今年下半年，全国各地在防疫上消耗了太多的财力和人力，天天核酸检测，扩建方舱，但效果并没有变得有多好。有些地方，比如新疆，封了几个月，仍然没有任何有效的结果——那么这样的防疫措施，有什么意义呢？以至于人们对于新冠病毒的恐惧，从恐惧病毒带来的疾病本身，转移到了恐惧被封控、被拉去隔离。封控本身并不有多大的问题，但没有人知道封控终止的日子，这样毫无尽头的漫漫长征，对任何一个被封控的人来说，都是一种折磨。&lt;/p>
&lt;p>在越来越严格的防疫措施下，人们的耐心逐渐耗尽。压抑在内心的躁动随着社会问题的裂缝宣泄出来。各级政府层层加码，某厂大发国难财，某地深夜大巴车祸，某厂的工人和当地警察会战，卡塔尔的世界杯热闹非凡。在某些城市的街头和学校里，人们聚集在一起抗议。国内媒体的操作在我意料之中。他们不会积极主动去报道这些社会矛盾，面对人们的质疑，他们用「敌对势力」「境外势力」给这些人扣上帽子，学生们提出自己的诉求，想要学校的防疫措施更合理化，也被外界嘲笑道，「学生太容易被煽动」。直至现在，在所谓的「放开」之后，仍然有很多追求封控的防疫爱好者们，骂着这些当初举牌抗议的人，说是他们导致了现在的局面，甚是可笑。&lt;/p>
&lt;p>但让我很诧异的是，政策的改变如此之快，让人毫无准备的时间。前一天还在说国外的人因为新冠病毒的后遗症，在水深火热之中，后一秒就说，没有明确的证据表明新冠病毒会导致后遗症。前一天还在说新冠病毒不是大号流感，后一秒就说，新冠病毒的症状不如流感。你要是说奥密克戎毒株比之前的德尔塔毒株，毒性明显下降，还有些说服性。现在是自己跟自己一个月内的言论都前后矛盾，多少让人有点不解。&lt;/p>
&lt;p>不过既然已经如此，自然是要选择接受了。对我而言，我是支持这样的政策的。封控措施给我的生活带来了很多的不便，我从工作开始至今还没有回过家，今年一年除了公司团建，从来没有去过距离公司和住处三公里外的地方，也错过了很多或许可以改变自己未来的事……这让我十分的痛恨之前的封控，在此就不多提了。很多人害怕家里的老人和孩子感染——谁会愿意被感染呢？但做事总要讲科学的，在社会没有能力去对抗自然的时候，一直抱有「人定胜天」这样违背现实的想法，宛如堂吉诃德大战风车，透露着些许的荒谬。放开后，病毒的传播速度会更快，或许过不了多久，你我身边很多人都会阳性，这是必经之路，扛着吧，但愿没有什么大碍。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/a-sharp-turn-in-epidemic-prevention-policy/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/a-sharp-turn-in-epidemic-prevention-policy/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/absurd/">荒诞</category><category domain="https://guanqr.com/tags/covid-19/">COVID-19</category><category domain="https://guanqr.com/tags/politics/">政治</category></item><item><title>
网站更新：为收藏创建了一个新栏目</title><link>https://guanqr.com/tech/website/create-a-new-column/</link><guid isPermaLink="true">https://guanqr.com/tech/website/create-a-new-column/</guid><pubDate>Sun, 20 Nov 2022 15:27:04 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>在网站里创建了一个&lt;a href="https://guanqr.com/collections/">新的栏目&lt;/a>，用来展示我的一些模型、卡牌等有意思的收藏品。原来这些文章是放在「生活」一栏中的「爱素好古」里的，但是如果我频繁更新这些收藏的话，在「生活」的页面里，就充满了这些并不是日常生活随笔的文章，感官上不太好。所以还是单独做一个栏目吧。&lt;/p>
&lt;p>我原本的规划是这样的：因为是展示自己的收藏品，所以最好封面有一个缩略图，文章目录就类似于相册那种。我为这个页面写了很长时间的 HTML 和 CSS，但最后还是放弃了——太费事了，我实在是肝不动。&lt;/p>
&lt;p>我的几个收藏类的兴趣爱好都很小众。在现实生活中，基本接触不到听说过这些东西的人，更不用说真正的玩家了。卡牌，玩的人还算多一些，在由店家创建的交流群里，人数有一两千。但是在兵人收藏这个领域，好几个群都只有二三百人。所以，我基本都是自己玩自己的，很少和别人交流。创建这个栏目，主要就是为了分享一下自己喜欢的东西，讲述为了收集这些东西发生的小故事，顺便多一个认识新的玩家朋友的机会，以及带新玩家入坑——当然，我知道发生这种事情的概率和中奖差不多。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/create-a-new-column/" target="_blank" rel="noopener">https://guanqr.com/tech/website/create-a-new-column/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
自动驾驶</title><link>https://guanqr.com/life/ideas/the-future-of-auto-pilot-system/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/the-future-of-auto-pilot-system/</guid><pubDate>Sat, 05 Nov 2022 10:06:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>一年多的时间里，接触到了国内外大大小小和汽车相关的厂商，粗浅地感受到了自动驾驶行业发展的迅猛，同时也感受到了该行业道路之曲折。&lt;/p>
&lt;p>我先来说一下我对自动驾驶的态度吧。在新技术应用到实际生活的方面，我的态度是比较保守的。比如说，在机械装置中，如果有纯机械传动的和电力驱动的两个方案，我会选择纯机械传动。比如，我喜欢机械表而非电子表。我会选择价格更高的山地车而非电动车代步。在山地车上，我更喜欢机械传动的变速器而非电变，甚至不会去安装电子码表记录公里数。因为我总会感觉到，在能完全使用机械运转的机器里，电能，是不可靠的因素，是有风险的。如果电池没电了，该机器便无法正常运转。因此，汽车自动驾驶功能对于我而言，并不是必要的东西。车辆驾驶的主体应该是司机。就算在汽车上安装了各种类型的传感器以探测周围的环境，提高驾驶的安全系数，但在驾驶的过程中，司机要有绝对的驾驶责任。但现在的自动驾驶发展趋势是，恨不得在汽车的各个空隙中塞进激光雷达，防止出现探盲区——为了实现完全的自动驾驶。但我是无法完全信任算法对信号的判断的……当然，以上这些只是为了表述我的保守的观点而举的比较极端的例子，带有一些调侃的意味，实际上我并非如此固执。&lt;/p>
&lt;p>就在最近的两个月，欧洲的两大开发车载激光雷达技术的龙头企业 Ibeo 和 Argo 前后破产。那天从新闻上看到破产的消息时，我很惊讶。因为最近这几年是自动驾驶发展最快的时候。在激光雷达领域，类型上从机械式激光雷达逐步转向了固态 / 半固态激光雷达，有效压缩了装置的体积。芯片供应商也研制出了适用于固态 / 半固态激光雷达的光源和传感器。这一切都展示出，这一行业的发展势头很猛。然而，这些元老级的公司，还是破产了。或许是因为经济萧条，欧洲的这些公司，已经掏不出钱继续研发这种还没有真正实现量产的，仅在试验阶段的东西了吧。&lt;/p>
&lt;p>好在国内的相关企业还在努力。小米和华为相继推出了他们的智能汽车方案。当然，现在还没有量产化，只存在于理论当中。禾赛科技和速腾聚创也先后发布了新一代的车载激光雷达产品，为国产智能汽车的研发推波助澜。现在国内的势头刚刚起来，并不像欧洲那样坎坷。幸运的是，我也正好随着这股浪潮前进，逐步了解全球的相关企业，熟悉汽车制造行业的生产标准，产品制造流程，车载激光雷达重点关注的性能等等。&lt;/p>
&lt;p>这段时间的工作很忙很累，不断地修改、不断地分析、不断地会议，比去年的这个时候要忙很多。但对经验的积累和对知识的获取也有很多。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/the-future-of-auto-pilot-system/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/the-future-of-auto-pilot-system/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/lidar/">激光雷达</category></item><item><title>
噪声</title><link>https://guanqr.com/life/ideas/noise/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/noise/</guid><pubDate>Sun, 16 Oct 2022 19:02:30 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>我似乎是对噪声越来越厌恶了。其实最初我写的是，「我似乎是对噪声越来越敏感了」，但想了想过去，有一段时间每夜受到楼下狗吠而失眠，有一段时间在宿舍里感到室友的翻书声和写字声尖锐刺耳，到现在，由于不隔音的劣质墙让我轻而易举地听到隔壁的电话与楼上的走动……我一直对噪声很敏感，但越来越厌恶。&lt;/p>
&lt;p>当然，我对耳塞的依赖也越来越重，几年前还没有塞耳塞入睡的习惯，但在大四那年，年久的铁架床在室友睡觉翻身时发出雷鸣般的巨响，总让我从睡梦中惊醒。我的睡眠质量一向不好，一旦吵醒，很难再次入睡，于是尝试了各种方法隔绝外面的声音。至此，睡觉时不戴耳塞，心中便有一种不安，担心被什么声音吵到。&lt;/p>
&lt;p>如果说非要找出一个理由，那可能是「心乱」。当一个人无法全神贯注地去做一件事的时候，就会容易受到环境的干扰。随着时间的推移，对周围事物的兴趣减小，很难找到能够让我专注做的事。虽然我总是在告诉我自己，抛下身上的包袱，去享受一下眼前的美好。但我实实在在地感受到，曾经追求过的事物，逐渐变得触不可及。很矛盾，很困惑，想拥有，又怕失去。我还是没有找到一个理想与现实的平衡点吧，说白了，还没有学会如何生活。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/noise/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/noise/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/pressure/">压力</category><category domain="https://guanqr.com/tags/reality/">现实</category></item><item><title>
人偶：尼根</title><link>https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/</link><guid isPermaLink="true">https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/</guid><pubDate>Wed, 05 Oct 2022 09:43:06 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>本科的某段日子里，看美剧《行尸走肉》是休息时必不可少的环节，特别是吃饭的时候，下饭神剧。虽然讲述的是末世里人类在丧尸世界生存的故事，但从根本上来讲，还是人与人之间，阶级与阶级之间的斗争。不死的丧尸远没有人心险恶。这部剧塑造了瑞克、弩哥、尼根等等鲜活的人物形象。对我而言，尼根，便是一个极具魅力的人。很多观众对于尼根刚刚登场时，拿着露希尔爆了格伦和「魂斗罗」的头表示不满，从而弃剧。但正是这样一个情节，把尼根那种心狠手辣，高高在上的形象展现得淋漓尽致。他不能算是坏人，只能说，作为一个团队的领导，他不能让自己的人受到瑞克的挤压。他也是为了在末世生存。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-0.jpg" alt="one-sixth-scale-figure-negan-0.jpg">&lt;span class="caption">※ 尼根&lt;/span>&lt;/p>
&lt;p>尼根的经典形象，便是身穿皮衣皮靴，脸上永远带着「灿烂」的笑容，手里拿着那根缠着铁丝，名叫露希尔的棒球棒。ThreeZero 几年前出品过尼根的兵人，但是距今时间比较远了，基本上买不到。那款兵人的头雕涂装不太行，并且皮衣的材质是仿皮，很多人的这款兵人到现在皮衣已经破裂。所以，不如直接上定制。&lt;/p>
&lt;p>其实，我最开始并没有打算收藏尼根。主要是没有赶上好机会。去年茶园兄 Rerun 了一波 Yunsil 的尼根衣服，我进了群，但再三犹豫下并没有预订。因为当时我觉得，就算有了衣服，没有头雕和鞋子，这怎么能组的起来。于是乎，因为没有预订衣服，后来有人开了阿展的尼根头雕，我也没订，有人开了 Mr.E 的尼根皮靴，我也没订——这是一个死循环。不过在今年第一季度的时候，某海鲜市场有几位老哥开始出手头雕和皮靴，Yunsil 的衣服也要到货了——干脆直接一次收齐吧！&lt;/p>
&lt;h2 id="头雕">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/#头雕" class="anchor-link" aria-label="头雕">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>头雕&lt;/h2>
&lt;p>气球人出品的尼根头雕饱受争议，因此价格也没有被炒高。这颗头雕的特点是邪笑，脸上的皱纹、胡子和头发的线条刻画都很深，其实还算可以，就是有些角度限定。主要诟病之处是整张脸太过于对称，以至于有些生硬。尼根的大背头形象时期（即两侧的头发剔短）并非出场时刻，应该更加沧桑，且少有邪笑，所以说阿展出品的严肃脸尼根更为合适。不过我更喜欢收藏一些带有表情的头雕，阿展的就略过啦~（希望不要真香）&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-1.jpg" alt="one-sixth-scale-figure-negan-1.jpg">&lt;span class="caption">※ 气球人出品的尼根头雕&lt;/span>&lt;/p>
&lt;h2 id="衣服">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/#衣服" class="anchor-link" aria-label="衣服">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>衣服&lt;/h2>
&lt;p>Yunsil 出品的尼根衣服最初是由 Hosam 集单的，但这已经是很早之前的事了，所以市面上 Yunsil 的尼根衣服很少，被炒到很高。不过去年茶园 Rerun 了这套衣服，我等到出货的时候直接在闲鱼收了一套。这套衣服的皮衣并不是真皮，有些遗憾，也不知道能保存多少年不老化。后续 Y.M.A 会出真皮套装，可以期待一下。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-2.jpg" alt="one-sixth-scale-figure-negan-2.jpg">&lt;span class="caption">※ 尼根衣服与头雕概览&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-3.jpg" alt="one-sixth-scale-figure-negan-3.jpg">&lt;span class="caption">※ 皮衣细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-4.jpg" alt="one-sixth-scale-figure-negan-4.jpg">&lt;span class="caption">※ 内衬细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-5.jpg" alt="one-sixth-scale-figure-negan-5.jpg">&lt;span class="caption">※ 裤子 &amp;amp; 腰带细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-6.jpg" alt="one-sixth-scale-figure-negan-6.jpg">&lt;span class="caption">※ 围巾细节&lt;/span>&lt;/p>
&lt;p>素体我用的是第三方 TTM21 窄肩增高素体。因为尼根的身材是属于瘦高型的，因此肯定要比一般体形的兵人稍高一些。如果直接在素体上套衣服的话，效果一般，素体的肚子并不突出，导致衣服撑不起来，多了很多褶皱。所以我用海绵填充了肚子和腰部。&lt;/p>
&lt;p>这套衣服在上身的时候，最坑的地方有两处。第一坑是拉链。那么小的拉链，很难让两边的金属片咬合整齐，每次拉上拉链都要花费至少半个小时。第二坑就是衣服底部的腰带。这层腰带很难穿过扣环，我是用镊子生拉硬拽才穿了过去。很多玩家收到预订的衣服后，并不会自己去打理，而是专门交给一些比较善于打理的玩家，花钱让他们打理。我是不会这么做的。因为我的手工技艺还算可以，并且我觉得玩这一类东西一定要自己去打理，这样才会获得一种成就感。交给别人去弄，就像是自己真爱的宝物被别人摸来摸去一样，心里不太舒服。&lt;/p>
&lt;h2 id="皮靴">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/#皮靴" class="anchor-link" aria-label="皮靴">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>皮靴&lt;/h2>
&lt;p>Mr.E 是专门做尼根和《疯狂的麦克斯》里主角的皮靴的。从材料上看，应该是真皮喷上黑色油漆再手工缝制。从还原和精细程度上来说，其实并不如直接建模打印的效果好，但毕竟是手工作品，具有独特的收藏价值。这款皮靴的内部是空心的，也就是说，需要连接一双脚，再套入皮靴。这样会导致脚步比较松动，不太平稳，兵人站立的时候容易倒下。所以我在脚部的关节处涂了一些布料胶进行加固。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-7.jpg" alt="one-sixth-scale-figure-negan-7.jpg">&lt;span class="caption">※ 皮靴细节&lt;/span>&lt;/p>
&lt;hr>
&lt;p>最后的整体效果如下。目前还缺了个露希尔棒球棒，以后有机会收一个 Fullmetal 做的吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-8.jpg" alt="one-sixth-scale-figure-negan-8.jpg">&lt;span class="caption">※ 整体展示&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-negan-9.jpg" alt="one-sixth-scale-figure-negan-9.jpg">&lt;span class="caption">※ 上半身细节&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/" target="_blank" rel="noopener">https://guanqr.com/collections/figures/one-sixth-scale-figure-negan/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/collections/">collections</category><category domain="https://guanqr.com/collections/figures/">figures</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
评论功能正在努力维护中</title><link>https://guanqr.com/tech/website/comment-function-is-being-maintained/</link><guid isPermaLink="true">https://guanqr.com/tech/website/comment-function-is-being-maintained/</guid><pubDate>Sun, 14 Aug 2022 10:42:18 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>我在给博客添加评论功能的那篇文章的结尾说过，我其实并不太想有评论区的。评论虽然能够拉近读者和作者之间的距离，但维护起来也比较麻烦。具体来说有以下几条原因：&lt;/p>
&lt;ol>
&lt;li>评论功能的代码更新换代很快，我还要时不时地关注更新，以修改博客中对应的代码来匹配最新的版本。&lt;/li>
&lt;li>互联网的变化也很快，之前还能随意使用的 LeanCloud 国际版，也停止了大陆用户的正常访问使用；使用国内版还要绑定备案的域名，自从上次被国内域名恶心了之后，再也不想备案了。&lt;/li>
&lt;li>此外，不得不说的一点，我还是高估了网民的素质。前段时间总有人在使用评论功能的时候，填写毫无意义的邮箱地址，发送毫无意义的评论内容。我强压着内心的怒火，将评论提示修改成了现在这样。提示用户不要发布无意义的内容。并添加了一些词汇的黑名单。然而，还是有一些闲人，发送诸如 &lt;code>test&lt;/code> 、 &lt;code>asasas&lt;/code> 等评论，发了一遍，被系统认定为垃圾邮件，并未显示，还不罢休，还要重复发好几遍。我不理解这些人的心理状态。或许他们正在前往精神病院的路上吧。&lt;/li>
&lt;/ol>
&lt;p>由于我停止使用 LeanCloud 国际版了，现在正在把评论数据迁移到另一个平台，另一个平台的使用体验还未知，先尝试一段时间吧。数据迁移的过程比较繁琐，以至于现在还没有迁移完，所以，之前的一些评论暂时无法显示，并不是我删除了，请谅解~&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/comment-function-is-being-maintained/" target="_blank" rel="noopener">https://guanqr.com/tech/website/comment-function-is-being-maintained/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
Interstellar</title><link>https://guanqr.com/life/films/interstellar/</link><guid isPermaLink="true">https://guanqr.com/life/films/interstellar/</guid><pubDate>Wed, 03 Aug 2022 13:59:27 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/interstellar-0.jpg" alt="interstellar-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">渺&lt;/span>小的飞船在黑洞边缘游荡，耀眼的光子在吸积盘上环绕。这是我对电影《星际穿越》的第一印象。这部电影上映于 2014 年末，但在那个时候，我还没有把去影院看电影作为日常消费的方式，所以，很遗憾地错过了大银幕的体验。不过，在网络媒体上，经常出现这个奇妙的卡冈图雅黑洞图片。&lt;/p>
&lt;p>前年，在《信条》上映之前，我趁着空闲，在网上欣赏了这部科幻作品。不得不感叹诺兰导演的水平，在这样一部充满着硬物理知识的电影中，阐述着宇宙间最永恒的东西——「爱」。在病菌不断摧残农作物的末日中，父亲库珀仓促地离开子女，探索新家园。他有一个听话独立又靠谱的儿子，还有一个渴望父亲陪伴的女儿。因为爱，儿子在其他人都撤离的时候，依然坚守在田地中等待着父亲的答复。因为爱，女儿才在以为地球被抛弃之时，找到了父亲留给她的答案。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/interstellar-1.jpg" alt="interstellar-1.jpg">&lt;span class="caption">※ 珀在飞船上看着儿女长大&lt;/span>&lt;/p>
&lt;p>影片中的经典场面有很多，比如，爆胎时库珀向女儿解释墨菲定律的真正含义，库珀带着儿子一起在田野上追逐无人机，库珀在飞船上面对儿女的录像痛哭流涕，像高山一样的浪潮逼近，飞船掉落前的极限对接……我最喜欢的一幕其实还是电影的开头，库珀向女儿解释墨菲定律。墨菲定律并不是说，想到的坏事一定会发生，而是说，只要有可能发生的事就一定会发生。这句话是整个故事的线索，让女儿相信父亲找到了拯救人类的答案，从而不断思索和等待，也让父亲坚信人类终究拯救了自己。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/interstellar-2.jpg" alt="interstellar-2.jpg">&lt;span class="caption">※ 返回地球时库珀与女儿相见&lt;/span>&lt;/p>
&lt;p>当然，这部电影的成功，离不开汉斯·季默的神之配乐。几个音阶的重复跳动，管风琴庄严而又空灵的声音不断回荡。让我感受到了宇宙的深邃，人类在自我救赎之路显得如此渺小。我其实在其他影视作品中听到过类似的配乐，同样是管风琴，同样是重复的音阶——一部讲述人类破坏自然的纪录片，《失衡生活》。原名叫做 &lt;em>Koyaanisqatsi&lt;/em>，这是源自美洲原住民的词汇，表示了疯狂、混乱、失去平衡、崩溃。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/interstellar-3.jpg" alt="interstellar-3.jpg">&lt;span class="caption">※ 茶园出品的头雕&lt;/span>&lt;/p>
&lt;p>同样是前年，茶园兄在论坛上开了一套库珀的便服形象人偶集单项目，参与项目的人挺多，有 55 人。茶园联系了巴西的老哥制作头雕，头雕的制作过程充满了坎坷。先是在计算机上 3D 建模，打印下来之后在用泥雕手工添加细节，一直修改到今年的 8 月才算完工。我有幸赶上了项目的末班车。真心感受到茶园在这个项目当中付出了很多心血，我觉得这一套人偶在出货的时候一定十分惊艳。不过，在他的那个帖子上，有一个人一直在唱反调，觉得不会有人想要这套便服的人偶模型，宇航服的形象才是经典，并且他认为茶园的头雕做错了，在末世人们根本笑不出来，言语中夹杂了不屑与嘲讽：&lt;/p>
&lt;blockquote class="quote en">&lt;p>One of my favorite movies ever BUT, who actually wants this?? 😂&lt;/p>
&lt;p>Unless the space suit is made, this is pointless, no? The hair is wrong. He has short waves in his hair. And why smiling? It's creepy. People are starving. The world is dying. Tf is he smiling for?
I don't get this sculpt. People like what they like though.&lt;/p>
&lt;p>Make TARS. Make a miniature of the ship. Something. Just a Matthew McConaughey sculpt? 😅 Weird.&lt;/p>
&lt;/blockquote>
&lt;p>随后，茶园兄十分耐心的写了很长一段文字，来反驳这位「小丑」。我觉得很有必要和诸位分享一下茶园兄写的内容，下面摘出了几段，虽然说这是有关《星际穿越》周边模型的小故事，但也算是从另一个角度感受这部电影。（这里就不放英文原文了，我直接翻译一下）&lt;/p>
&lt;p>茶园回答道，电影开头的三十分钟，奠定了整个故事的基调，展示了库珀的乐观，温柔，谦逊，特别是对女儿的父爱。也展示了面对末日时人类的渺小。简单来说，这部电影讲述了一个男人离开地球去拯救他的家庭，但最终却被女儿拯救的故事。虽然电影中充满了深奥的科学知识，但故事的核心，终究是一个父亲和他孩子的关系。「你」想过我们集单的这套服装是和之前已经完成的墨菲的服装搭配的吗？「你」是否也注意到了，在父亲离开了几十年之后，墨菲仍然在穿着她父亲的夹克？&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/interstellar-4.jpg" alt="interstellar-4.jpg">&lt;span class="caption">※ 茶园的墨菲服装项目&lt;/span>&lt;/p>
&lt;p>为什么他会微笑？对于库珀来说，他想要在孩子面前展示一个坚强的父亲形象，成为他们的榜样。在学校的老师面前为他们挺身而出，和孩子们一起去捕获无人机，告诉他们在沙尘暴来临前把门关好。当地球逐渐荒漠化时，库珀小心翼翼地向孩子们灌输着一种观念——唯一的解决办法就是继续前行。&lt;/p>
&lt;p>茶园的回答我觉得很棒，他能有如此深刻的理解并表达出来。我想，这也是我对收藏影视类人偶十分热爱的原因吧。将银幕上的人物形象实物化，每当看到某个角色，就能够想起他在电影中的表现，从而对影片有更深一层的理解。&lt;/p>
&lt;p>最后，我想以电影中反复出现的诗歌结尾：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Do not go gentle into that good night.&lt;br>
Old age should burn and rave at close of day.&lt;br>
Rage, rage against the dying of the light...&lt;/p>&lt;/blockquote>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/interstellar/" target="_blank" rel="noopener">https://guanqr.com/life/films/interstellar/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/humankind/">人类</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/sci-fi/">科幻</category></item><item><title>
看着自己设计的东西开始生产</title><link>https://guanqr.com/life/ideas/what-is-the-feeling-of-watching-the-lens-i-designed-produced/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/what-is-the-feeling-of-watching-the-lens-i-designed-produced/</guid><pubDate>Sat, 16 Jul 2022 09:33:05 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">从&lt;/span>去年的十二月初，到今年的七月，由我负责设计的一款镜头终于结束了它的研发阶段，开始走向生产。这是我第一个完完全全从头跟到尾的项目，我觉得这可以算是我在这条路上取得的第一个小成就吧，从中积累到了很多设计的经验。有关镜头设计相关的细节不宜透露，就简单说说我的感受吧。&lt;/p>
&lt;ol>
&lt;li>
&lt;p>在设计中，「严谨」比「才能」更重要。无论你有多聪慧，设计出了性能多么极致的方案，别人看到的只有你输出的各种参数数值。当你写下这些数值的时候，是需要十分慎重的，稍有不慎，出了差错，最终生产出来的产品性能和你输出的参数无法对应，那就基本凉了。我在设计和分析的过程中，犯了一些小小的错误，但还好能够及时发现并改正，避免了后续的链式反应。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>这是一个锻炼英语能力的好机会。接触到的很多客户是外企，交流的时候说的是英文。每次开会的时候，大脑都要高负荷运转，聚精会神地听对方说的是什么，记下关键点。每次写报告的时候，也是写的英文报告。这一点我就想吐槽一下了。明明应该是销售人员和客户对接的，翻译工作不应该他们负责吗，每次我都要先写一份中文报告，再翻译成英文。有时候偷懒，就直接让有道词典翻译了。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>遇事要淡定。有时会有别的部门的人，特别是项目经理，来催你干活，比如让你在 x 月 x 日之前提交 xxx 表，所谓的理由是，这个项目时间安排比较紧迫。但毕竟我的工作比较忙，不可能全天都有时间专门留给某一件事，所以，按照自己的计划时间完成自己要做的事就行，别人催你？淡定！你催你的，我做我的。客户都不急，你替客户着急什么？&lt;/p>
&lt;/li>
&lt;/ol>
&lt;p>看着自己写了那么多份分析报告，还有一次又一次地完善设计留下的各种文件，才恍惚觉得，过去的这半年时间并没有虚度，自己的能力得到了较多的提升。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/what-is-the-feeling-of-watching-the-lens-i-designed-produced/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/what-is-the-feeling-of-watching-the-lens-i-designed-produced/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/lens/">镜头</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
一个关于蝙蝠侠的新故事</title><link>https://guanqr.com/life/films/a-new-batman-story/</link><guid isPermaLink="true">https://guanqr.com/life/films/a-new-batman-story/</guid><pubDate>Sun, 03 Jul 2022 19:14:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">万&lt;/span>圣节，犯罪分子们的狂欢。交叉路口，灯红酒绿。探照灯将耀眼的蝙蝠图案照在夜晚的云层中，它在注视着哥谭的每一个黑暗角落。电影开场，混乱的城市与阴郁的音乐交织在一起，让我看到了一个与以往讲述蝙蝠侠的电影不一样的哥谭。于是，心跳加快，一股热泪涌上心头。那一刻的我已经知道，终于又在影院中，看到了在我心中真正能够称得上是电影的艺术品。&lt;/p>
&lt;p>我经常提到，在我的观念中，一部好的电影，高水准的摄影和配乐是必不可少的因素，这两者甚至可以弥补故事剧情的缺陷。因此，我特别喜欢张艺谋、维伦纽瓦，扎克·施耐德等导演的作品。所谓的质感，正是如此。上一部让我在影院沉醉的电影，即维伦纽瓦的《沙丘》。而这一部《新蝙蝠侠》的摄影，和《沙丘》是同一个人：格雷格·弗莱瑟。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-new-batman-story-0.jpg" alt="a-new-batman-story-0.jpg">&lt;/p>
&lt;p>电影主要讲述的故事很简单，布鲁斯·韦恩成为蝙蝠侠的第二年，他称自己是一位复仇使者。在谜语人的引导下，他逐渐扯下隐藏哥谭韦恩家族和阿卡姆家族的阴暗往事的幕布。谜语人揭露了哥谭政坛的腐败，炸毁了哥谭的堤岸。他在即将沉沦的哥谭中，成为了唯一的炬火。电影中的主要人物都是大家熟悉的角色，法尔科内、马罗尼、企鹅人、谜语人、猫女等等。可能有些人对两个黑帮人物法尔科内和马罗尼较为陌生，推荐看一下美剧《哥谭》，主要讲述的就是哥谭各路黑帮斗争的故事。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-new-batman-story-1.jpg" alt="a-new-batman-story-1.jpg">&lt;/p>
&lt;p>我特别喜欢猫女这一角色。有人看到这一部中的猫女是黑人扮演的，就说是所谓的政治正确，拿诺兰电影中海瑟薇版猫女与之对比。但我确确实实觉得，佐伊版的猫女把出身卑贱，短发，娇小却身手敏捷的特点展现的淋漓尽致，特别是在这部电影的原著故事中，猫女就是一位深色皮肤的拉丁裔，电影中的形象十分还原漫画……总之，长在了我的审美点上。反而，海瑟薇的猫女，仅仅只演出了一个身穿紧身衣，金色长发的工具人而已，并没有交代猫女本身的身世。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-new-batman-story-2.jpg" alt="a-new-batman-story-2.jpg">&lt;/p>
&lt;p>谜语人的形象在影视作品中有所创新。以往的谜语人经典形象，就是穿着绿色西装和礼帽，身上印满了夸张的问号。而这部电影中谜语人的形象源自现实中的真实人物——十二宫杀手。十二宫杀手每次作案后都会留下线索挑衅警察，谜语人的做法与之极其相似。十二宫杀手的形象是身穿大衣带着头罩，谜语人的形象与之毫无差异。此外，还有谜语人的标志，就是十二宫杀手标志中间，加了一个问号。这种形象设计，更能让电影的故事贴近现实。谜语人的饰演者保罗·达诺，也是神棍专业户了。我是在《血色将至》中认识的这位演员，当时他饰演了一个神棍牧师的形象，和丹尼尔·戴·刘易斯演对手戏，真的很过瘾。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-new-batman-story-3.jpg" alt="a-new-batman-story-3.jpg">&lt;/p>
&lt;p>我最喜欢的场景是冰山俱乐部，在爆闪的红色灯光与冲击的音乐下，是藏匿在混乱中的不可告人的秘密。蝙蝠侠前后三次以不同的形象进入冰山俱乐部，和守门兄弟的对手戏充满了戏剧性。也展现出了蝙蝠侠从最开始的莽撞到后来的适应法则。在成为蝙蝠侠的第二年，布鲁斯·韦恩还未成为那个「黑暗骑士」，而是自称「复仇使者」。对自己家族的产业不管不问，隐匿在韦恩塔中，对哥谭市进行「复仇」。电影的最后，他终于明白自己的使命，「复仇」并不是弥补自己创伤，拯救哥谭的正确途径，他终于向「黑暗骑士」迈进了一步。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-new-batman-story-4.jpg" alt="a-new-batman-story-4.jpg">&lt;/p>
&lt;p>我以为，在电影发展萎缩的今日，这一部算是近两年来比较优质的电影，能为影院带来些许的复苏机会，但事实并非如此。一个客观的环境因素就是，国内好几个大城市由于疫情，公共场所已经关闭，特别是上海。这样一来，不难想到，电影的票房不佳。其次，电影中的反派，谜语人，是影响母语非英语观众的观感的。因为几乎所有的谜语，都和谐音有关，中文翻译可以看出很努力了，但仍然翻译不出那种原生的味道。特别是其中一个谜语，「长翅膀的老鼠」，电影中，蝙蝠侠和戈登警长猜测了很多人都没有猜对。我看网上很多人都在吐槽这个谜语拉低了主角的智商，也有几个关注度比较高的影评公众号也在带节奏，说长翅膀的老鼠不就是蝙蝠吗，这种幼儿园小孩都能猜到的谜语，电影中猜了那么长时间。我真的想问，这些人到底看懂电影没有，「老鼠」指的是线人，「长翅膀的老鼠」指的是鹰隼，谐音「法尔科内」。谜底根本不是蝙蝠。就算是蝙蝠吧，黑帮中的线人怎么可能是蝙蝠侠？就因为这一点，我取关了好几个公众号，乱带节奏黑电影来赚取流量。&lt;/p>
&lt;p>很多人拿这一部和诺兰三部曲相比，说不如诺兰。《蝙蝠侠：黑暗骑士》确实是几乎无法触及的天花板，但《新蝙蝠侠》只是新故事的第一部电影，如果和《蝙蝠侠：侠影之谜》相比，我觉得，这一部不论是剧情还是画面都更出彩。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/a-new-batman-story/" target="_blank" rel="noopener">https://guanqr.com/life/films/a-new-batman-story/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/batman/">蝙蝠侠</category><category domain="https://guanqr.com/tags/gangster/">黑帮</category><category domain="https://guanqr.com/tags/super-hero/">超级英雄</category><category domain="https://guanqr.com/tags/warner/">华纳</category></item><item><title>
被生活套住的人</title><link>https://guanqr.com/life/ideas/trapped-by-life/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/trapped-by-life/</guid><pubDate>Sun, 12 Jun 2022 18:48:33 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>的山地车就停放在我的房间里。这是当初大学刚刚入学后，跑去距离学校最近的捷安特专卖店购买的旗舰车，车友们称之为「四公主」。经历了风吹日晒，磕磕撞撞，白色的漆面已经泛黄和开裂。但实际上，这辆车的总行程不超过 200 km。当年它载着我往返两个校区，环绕西湖，最远的一次，仅仅是从玉泉骑到了萧山。曾经，还在中学阶段的我，经常做着骑行的梦。希望自己能有一辆专业的山地车，从一座城市骑到另一座城市，享受路途中的一切。曾经，我从网上浏览了很多博主写的骑行游记，特别是川藏线，当年还没有如此完善的公路，我却收藏了很多人的日记，希望有一天，我也能用到……然而从中学，到大学，再到现在工作，过去了如此之久，我却依然没有行动。&lt;/p>
&lt;p>最近在 b 站关注了一位旅行 up 主，徐云。他选择了一条打破常规的人生道路——流浪。一人，一自行车，走遍中国的万水千山。我是从他骑行阿里开始关注的。穿越在荒芜的草原或戈壁上，晚上经常在羊圈或者涵洞中搭帐篷睡觉。虽然每日的行程很艰苦与枯燥，但他领略到了在城市中根本无法想象的边疆壮丽自然风景。在我看来，这是真正的自由的生活。&lt;/p>
&lt;p>以前经常会做一些白日梦，计划着自己在工作后，攒多少多少的钱，买哪个牌子的相机，去哪里玩。可现实却像是一幅褪了色的画，多彩的颜料早已氧化挥发，只剩下饱和度极低的淡淡的画痕。忙碌的工作侵占了一天的大部分时光，甚至没有机会去用新的颜料填充褪色的部分。最近一个已经忙了半年的项目设计终于到了制造的阶段，做性能分析，写相关报告，开项目评审……两周的周末都是在为公司创造剩余价值，包括本月的端午节假期。晚上下班后回到自己的小屋中，想到自从今年之初，我竟没有走出过宿舍到公司周围超过 3 公里的地方，不觉有些叹息。&lt;/p>
&lt;p>2018 年夏天的那次去日本的旅程，当汽车驶入滨松市那天，正是工作日。道路两旁虽然有很多私人住宅，但街道上颇为宁静——居民们都去上班了。当地最大的公司就是滨松光子学株式会社，这也是我们当时去参观的地方。走进公司也是十分安静，员工们都穿着灰色的工作服在自己的岗位上工作，在楼道里或在食堂的人们，也是非常有秩序。似乎所有的人都是被程序设定好的机器，安分守己的做着自己的工作。当时在公司里看到过一种运输光电设备的机器人，橡胶地面上标记了一条行动路线，机器人只会跟着这条路线往返行驶——人又何尝不是这样。机器被程序控制，人被生活控制。&lt;/p>
&lt;p>有时候我会想，人们为什么要这么勤恳的工作呢？每个月虽然得到了应有的工资，但根本没有什么自由的时间去做自己想要做的事，甚至没有机会去消费。从网上淘来了一些自己喜欢的东西，但真正能让自己快乐的时光，仅仅只有开箱的那几秒。而后就是乏味，接着，无休止的工作又涌了上来，把那仅有的快乐抛到了身后。我什么时候才能再次骑上山地车去四明山转一圈？我什么时候才能和朋友去海宁的海边逛一逛？我不知道。现在的我，只是一个被生活套住的人。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/trapped-by-life/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/trapped-by-life/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/cycling/">骑行</category><category domain="https://guanqr.com/tags/freedom/">自由</category><category domain="https://guanqr.com/tags/reality/">现实</category></item><item><title>
一个送外卖的博士生</title><link>https://guanqr.com/life/ideas/a-doctoral-student-delivering-takeout/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/a-doctoral-student-delivering-takeout/</guid><pubDate>Sun, 08 May 2022 09:04:23 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">自&lt;/span>从毕业后，了解学校各种动态的渠道主要是 CC98。大概在三月底的时候，有人在 CC98 上发帖上了热门，大概就是讲有个浙大的博士生出名了，因为他在空闲时间去送外卖。好像那个时候，博士生送外卖的新闻还上了微博热搜。当时我只是觉得，这估计又是哪个人无聊制造话题蹭高校热度赚流量，便没有详细看过这个新闻的具体细节。&lt;/p>
&lt;p>五月初的时候，有同学发帖说，这个博士生开了一个抖音账户，天天发表一些有损学校形象的东西，希望相关学院和教师能够多关注这个博士生的状况。我当时也只是在工作摸鱼的时候看了几眼帖子，并没有仔细阅读其他同学是如何看待这件事的。过了几天，又有人发帖，这个人发了个声明，说自己就是那个送外卖的人，想要把这件事解释清楚，有什么问题都可以问他——这倒是个很新鲜的事，当事人竟然自己发帖了。这种事当然对爱吃瓜的我有十足的吸引力，当时正处在五一假期，闲得无聊，便点进去细细品读他的帖子。&lt;/p>
&lt;p>他在帖子的标题就介绍了自己的抖音账户叫什么名字——「外卖员孟伟在读博」。然后提供了一张他的用户主页的截图，以证明自己就是本人。在抖音的个人简介里，他写明自己是浙大控院（控制科学与工程学院）的学生，本科和博士都在控院就读，目前在延毕阶段。他还特意标注了该学院专业为双一流 A+ 学科。此举想必是为了凸显自己的个性。我看到这里，第一时间的想法是，原来这个人是控院的啊，我还以为是哪个外面学校考博进来的人，控院居然还有这种奇葩的人存在？控院和我所在的学院都是信息学部的学院，相当于兄弟学院，学的课程都差不多。我也认识不少控院的同学，还认识控院的辅导员。很难相信，控院居然出现了这种有些不可思议的事。&lt;/p>
&lt;p>而后我又回过头来看了他的用户名和头像，这个人叫「孟伟」，头像是他坐在 CCTV 演播室的照片。孟伟，孟……等等……我突然意识到一件事，我认识一个叫「孟伟」的人，这不就巧了。我努力回想起我认识的这个叫「孟伟」的人。他是我在大二阶段，参加学长组工作时，负责管理的那个新生班级的兼职辅导员。他那年还获得了「浙江大学十佳大学生」称号，毕业前，他晒了自己的高薪 Offer，是某个公司的算法工程师岗位，我十分羡慕他的成功，十分佩服他的优秀。当时我还经常给朋友说起这个学长。但在毕业后，他居然再也没有发过任何QQ空间和朋友圈。我试图对这一现象做合理的解释：或许是他屏蔽了我，或许是他把我从好友列表中删除，又或许，他只是不再爱展示自己的生活。&lt;/p>
&lt;p>我再一次看了看那张抖音截图，放大看了看他的头像，又打开抖音搜索他的账号，看了几个他发的视频。其中有一个视频是他在食堂吃饭时的情景，他在那个视频中漏了脸。他的头像，他的视频……不会吧，我直接蹦出了三个英文单词——What the Fuck？我急忙在微信好友列表中搜索「孟伟」，看到他的头像，还有他的微信号，和抖音一模一样。这个人，居然就是我认识的那个人！&lt;/p>
&lt;p>这绝对是那一天最震惊我的事情了。我一直以为，他已经顺利毕业，有着大好前程。我实在是无法把我印象里的那个学长，和眼前这个延毕三年，开始摆烂的人划上等号。这件事也太荒诞了吧！&lt;/p>
&lt;p>于是我重新找到了当初上热门的帖子，仔细浏览了同学们的评论，把学长在抖音上发布的视频都看了一遍……感慨万分。当初他取得了无数的荣誉，他为了取得这些荣誉付出了很多的努力，这一点不假。但作为一个博士生，想要毕业，还需要有学术上的成就。学术上缺少的研究成果，并不是说可以通过无数的社会工作来弥补的。很显然，他当年经常在朋友圈花式秀自己的各类奖装证书，就是想把自己打造成一个精英。我还记得他在获得「浙江大学十佳大学生」称号时说，下一个十年，他的目标是获得「杰出校友」的称号，看样子是无法实现了。&lt;/p>
&lt;p>不要忘了自己的本职工作。作为一个正在读博的人，本职工作即在自己的研究领域潜心探索。有余力时，才可将闲心放在那些只是为自己锦上添花的学生工作中。我不知道他在延毕的这三年里发生了什么，但永远不能把自己能力不足这一事实以导师存在问题为由进行掩饰。或许导师确实存在问题，但同行的其他人都能够毕业，你却永远无法翻过眼前的大山，这是否是因为自己选择的目标太高远？同学们都建议他转硕，但他却拒绝，因为他不愿意放弃这些年花费的时间，不愿意放弃博士这一响亮的名号。但我认为，有时候，需要选择放弃。看清眼前的事实，如果最后只拿到了结业证书，连研究生的文凭都没有了。那么只剩下本科学位证书，这对得起自己这八年的时光吗？并且，他在延毕前的那一年选择结婚，现在还有了孩子。如此的行为，作为学生，作为丈夫，作为父亲，都显得及其不负责任。&lt;/p>
&lt;p>这是一个悲剧，却也成为了同学之间的笑柄。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/a-doctoral-student-delivering-takeout/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/a-doctoral-student-delivering-takeout/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
人偶：张牧之</title><link>https://guanqr.com/collections/figures/one-sixth-scale-figure-zhang-muzhi/</link><guid isPermaLink="true">https://guanqr.com/collections/figures/one-sixth-scale-figure-zhang-muzhi/</guid><pubDate>Sat, 07 May 2022 00:08:09 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-0.jpg" alt="one-sixth-scale-figure-zhang-muzhi-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span> 2010 年贺岁档上映的电影《让子弹飞》可谓是近些年来最经典的国产电影。每一句台词，每一个场面，都被人熟记，津津乐道。电影上映时，年少的我只看懂了表层的故事，随着近几年关于这部电影的解析和一些名场面的发酵，我愈发敬佩姜文这位很有内涵的导演。后来在《邪不压正》上映之前，姜文导演来到我校进行路演宣传，小剧场的观众爆满，有些人没有抢到座位，就干脆坐到楼梯、底板上去观看对姜文导演的采访。&lt;/p>
&lt;p>电影中讲述的故事发生在民国期间。麻匪一行人的装扮可谓是给人留下深刻的印象。最经典的两套服装，其中一个是头戴麻将面具，全身黑衣的经典麻匪装，另一个就是在电影结尾抗击黄四郎时穿着的十八星旗蓝色军装。出城剿匪前，张牧之和马邦德、黄四郎和几大家族登上擂台。那时候他背靠十八星旗，穿着这一身军装，戴着墨镜和白色礼帽。而后大吼一声：出发！霸气外露。&lt;/p>
&lt;p>我一直都想拥有一款《让子弹飞》电影的兵人。在过去几年，定制服装基本只能选择韩国裁缝的时候，这个愿望基本无法实现，因为在定制圈里，这是小众电影，愿意集单的人不多，也没有人开集单。不过最近国内的几个工作室的发展蒸蒸日上，创造了很多的机会。去年范哥的工作室先后集单了张牧之、马邦德的头雕以及麻匪和军装两套服装，参与建模和制作的都是国内的工作室。&lt;/p>
&lt;p>我最开始是在贴吧里看到 J 佬分享麻匪套装，深入了解才发现，头雕和服装已经截单，完美错过。但当时我在范哥的帖子里瞥见了他的那套军装，瞬间觉得，这套军装真的比麻匪装帅气。后来的某一天，我无意间看到范哥在闲鱼发布了姜文 2.0 头雕开启预订的链接，链接里说，军装套后续也会开订。这么好的机会，怎么能不抓住？于是联系了范哥，预订了头雕和衣服。事实证明，在定制圈子里，这部电影确实小众，大概只有 15 个人参与了衣服的集单……&lt;/p>
&lt;p>头雕是最早制作完成并到货的。这是我收到的第一个定制类的头雕，到货时间比托尼·斯塔克的头雕到货时间要早。看材质，应该是用高精度 3D 打印的工艺。其实比起打印的头雕，我更喜欢倒模成型的头雕，因为 3D 打印的材料，不太稳定，容易开裂，并且涂装有些难。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-1.jpg" alt="one-sixth-scale-figure-zhang-muzhi-1.jpg">&lt;span class="caption">※ 头雕正视图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-2.jpg" alt="one-sixth-scale-figure-zhang-muzhi-2.jpg">&lt;span class="caption">※ 头雕侧视图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-3.jpg" alt="one-sixth-scale-figure-zhang-muzhi-3.jpg">&lt;span class="caption">※ 头雕 CoA&lt;/span>&lt;/p>
&lt;p>衣服是由 Y.M.A Studio 工作室制作。蓝军装上的扣子都是金属材质，白色衬衣上的扣子虽然很小，但依然坚持使用真扣缝制。裤子所用的布料很薄。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-4.jpg" alt="one-sixth-scale-figure-zhang-muzhi-4.jpg">&lt;span class="caption">※ 衣服开箱图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-5.jpg" alt="one-sixth-scale-figure-zhang-muzhi-5.jpg">&lt;span class="caption">※ 衣服全套概览&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-6.jpg" alt="one-sixth-scale-figure-zhang-muzhi-6.jpg">&lt;span class="caption">※ 军装细节（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-7.jpg" alt="one-sixth-scale-figure-zhang-muzhi-7.jpg">&lt;span class="caption">※ 军装细节（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-8.jpg" alt="one-sixth-scale-figure-zhang-muzhi-8.jpg">&lt;span class="caption">※ 衬衣细节&lt;/span>&lt;/p>
&lt;p>后来范哥又陆陆续续开了腰带，墨镜和帽子的预订。腰带和帽子我订了，腰带采用纯皮材质，手工制作。帽子是最近四月份才开订的，软胶材质，带有颜色涂装。但墨镜的预订在当时犹豫了很久。因为当时觉得墨镜的价格有些昂贵，而且是个可有可无的配件。在当时，我一直在说服自己，这个墨镜，用里昂的墨镜也可，闲鱼上有更便宜的选择。于是，放弃预订墨镜。后来墨镜出货的时候，我真的有些后悔了，好在有个哥们原价出给了我一套，真是幸运啊。后来我还参与了这个哥们的集单项目，在未来的文章中会进行分享。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-9.jpg" alt="one-sixth-scale-figure-zhang-muzhi-9.jpg">&lt;span class="caption">※ 纯皮腰带，金属腰带扣&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-10.jpg" alt="one-sixth-scale-figure-zhang-muzhi-10.jpg">&lt;span class="caption">※ 腰带细节（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-11.jpg" alt="one-sixth-scale-figure-zhang-muzhi-11.jpg">&lt;span class="caption">※ 腰带细节（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-12.jpg" alt="one-sixth-scale-figure-zhang-muzhi-12.jpg">&lt;span class="caption">※ 墨镜&lt;/span>&lt;/p>
&lt;p>至于鞋子，本来我选好了使用军事类兵人经常穿的那种皮靴，但正准备下单的时候，居然没货了。后来我想起，之前子浩兄打理衣服的时候，使用了星战里达斯·摩尔的靴子，虽然靴子上有稍复杂的纹理，但看起来还不错。遂模仿了这一操作。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-13.jpg" alt="one-sixth-scale-figure-zhang-muzhi-13.jpg">&lt;span class="caption">※ 靴子&lt;/span>&lt;/p>
&lt;p>本次依然使用了 M01 素体，因为裁缝打板的时候就用的该素体。最后，展示一下整体的效果。理论上，姜文的身体很壮，但我能力有限，效果还凑合。现在我的头雕还没有进行涂装。因为在我看来，头雕涂装什么时候涂都行，但集单时间错过了就没有了。所以在现阶段，我更倾向于节省下来涂装费，参与其他题材兵人的集单。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-zhang-muzhi-14.jpg" alt="one-sixth-scale-figure-zhang-muzhi-14.jpg">&lt;span class="caption">※ 整体效果&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-zhang-muzhi/" target="_blank" rel="noopener">https://guanqr.com/collections/figures/one-sixth-scale-figure-zhang-muzhi/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/collections/">collections</category><category domain="https://guanqr.com/collections/figures/">figures</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
很久没有更新技术类文章</title><link>https://guanqr.com/life/ideas/i-have-not-updated-the-tech-articles-for-a-long-time/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/i-have-not-updated-the-tech-articles-for-a-long-time/</guid><pubDate>Sat, 23 Apr 2022 08:29:19 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>已经很久没有更新过技术类的文章了，上一次更新还在去年的 6 月，并且，2021 年技术类文章也仅仅只有屈指可数的 7 篇，有些惭愧。&lt;/p>
&lt;p>我越来越少写这一类文章的原因很简单，随着大学生活的结束，可自由支配的时间越来越少。能够通过自己摸索、学习而获得的这一类在学校不会有人教你的知识的机会也就越来越少。特别是计算机方面的东西，由于我不是计算机专业出身，除非是需要用到某些代码的时候会搜一搜前人的成果，平时基本很少会看有关编程的东西，自然就无法写出有什么质量的文章。&lt;/p>
&lt;p>在光学方面，其实我有计划分享我在校期间做的最后一件很有意思的项目，也就是我的毕业设计。但我觉得，太早分享出来不太好，有些劳动成果被别人窃取了就很麻烦。在工作的这半年多时间里，我的光学设计技能也有了很明显的提升。这一点我觉得毫无疑问，因为现在再回顾当年我大二的时候设计的那个镜头，感觉不太行。我觉得可以写一些有关 Zemax 软件的使用心得和技巧。但写这些文章的时候，我也要避开公司的一些涉及商业机密的东西，也很麻烦。&lt;/p>
&lt;p>此外，还有一个原因——懒。因为现在每周属于自己的时间很少，写一篇技术类文章耗时耗力，我更愿意多刷一会手机，多在床上伸伸懒腰。惭愧啊。还是立一个 Flag 吧，定一个小目标，今年写出至少 5 篇技术类文章。希望不要再变得更懒了。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/i-have-not-updated-the-tech-articles-for-a-long-time/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/i-have-not-updated-the-tech-articles-for-a-long-time/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
现阶段的新冠防控与普通人的生活</title><link>https://guanqr.com/life/ideas/coronavirus-prevention-and-peoples-life/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/coronavirus-prevention-and-peoples-life/</guid><pubDate>Sat, 16 Apr 2022 12:56:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>周日的中午，心血来潮去附近的电影院看了刚刚上映的电影《神奇动物·邓布利多之谜》。买票的时候，我看到当天还有很多场次可以选择，可是到了电影院却发现，我买的那一场之后的下午和晚上的全部场次，包括第二天的预售场次，全部锁住了，然后眼睁睁地看到那些被锁的场次逐渐消失。我看了看其他的电影场次，也是如此。不会是出什么事了吧，难道这个商场查出阳性了，我现在退票还来得及吗……顿时，我看电影的兴趣全无。不过我看电影院还开着门，和我一场的人还不算少，我还是选择去看了。&lt;/p>
&lt;p>晚上看到宁波市发布紧急通告，关闭公共密闭场所，这才知道，原来是新发布了防疫政策，全市的电影院都要关门了。可我仍有一个疑问，宁波市不是没有发生大规模疫情传播吗，怎么突然就这样了。后面几天公司也开始全体核酸检测，推出了场所码，加强了人员流动的管控。以前还能随意进出公司大门，现在出了上下班时间，禁止外出。唉，这种日子到底什么时候才能结束呢？&lt;/p>
&lt;p>从上个月开始，上海的疫情越来越严重。封城的同时，也影响了周边地区的生活节奏。我感受到的最大的变化就是，我想从网上买的生活用品，50% 以上都买不了，因为以前经常光顾的那些店家都是上海的。还有，我也无法轻松的前往其他城市，甚至在假期回家。我从去年来这里工作之后，还没有回过一次家。我知道有一些人因为严格的疫情管控措施，导致收入降低、失业等等。所以，这才有了网上所说的那些主张「共存」的声音。现在的生活因为种种限制已经够烂的了，大部分人已经注射过疫苗了，重症概率已经明显下降，病毒感染算得了什么。&lt;/p>
&lt;p>而后就出现了所谓的「共存」和「清零」两个派别的争论。我认为，在言论逐渐二极化的今天，不论是「共存」还是「清零」，双方都对对方的观点产生了某些误解。对于「共存」而言，「共存」并不等于是「躺平」，但那些自认为是「清零派」的人，认为与病毒共存就是效仿西方国家的「躺平」政策。而现在国家实施的「清零」政策，也绝不是永久的封闭。没有绝对的「共存」和「清零」，他们的最终目的是相同的：让社会恢复正常运转，减轻防疫的医护人员压力。如果未来很长的一段时间，病毒依然无法消除的话，一直进行清零政策，很多人都是无法承受的。看一看出现多次传播事件的云南某地，封城了很多次，我无法想象那个地区人们现在的生活是什么样的，大概有很多人已经离开了那里。&lt;/p>
&lt;p>我认识的一个朋友，是在大连某医院工作的医生，每次东北三省某地一出现疫情的时候，就要带队前往当地进行支援。一天能够停下来休息的时间不足五个小时。他说他们的领导休息的时间就更少了。还有一个朋友，住在上海，小区被封了，他就主动当志愿者，每天协助医生测核酸以及分发生活物资，有一次，一个老人莫名其妙的用棍子追着他打，还有一次，居民下楼后开始指责辱骂医生和志愿者效率低。他终于忍无可忍，拿起了一个椅子向攻击他的人砸去，并决定不再做志愿者了……疫情下的所有人都是极其压抑的，不论是身体还是内心，都被一种无形的牢笼囚禁。&lt;/p>
&lt;p>在上海封城这一事实情况下，很多普通人每天都要进行抢菜，有的比较富裕的人，开始「包养」能够跑腿的人，送一趟物资除了正常跑腿费之外，还额外给他 200 元以上小费。一个金融大都市，前进的步伐突然就停滞住了。然而，上海政府却在进行一些毫无意义的虚假辟谣，新闻联播里还在给外面的人传达上海人民正在逐步恢复常态，画面里显示商场里的人在有序的买菜。为什么在网上，人们的怨言越来越多？因为人们没有看到真实的报道，官方媒体只宣传了好的一面，却少了真正的人民群众。最让人无语的事件就是那场原计划要举行却被喷的取消了的歌颂晚会，使用一些未经原作者授权的歌曲进行表演，「半路开香槟」……&lt;/p>
&lt;p>前几天半夜的微博广场很热闹。因为新浪的工作人员都下班了，言论的监管程度有所下降，所以大家在广场上畅所欲言，戏称这段时间是「赛博游行」。既然无法进行真正的游行抗议某些不合理的政策，那只能在网上进行一些隐晦的吐槽了。最火爆的那一晚，恰逢央视发了一个叫「美国就是全球最大的人权赤字国」的话题。网友们就在这个话题下面，吐槽官媒不关心疫区内普通人的生活，还在发这些指责美国的毫无意义的东西。既然想指责美国，那就去美国的媒体上发，在微博上用汉语来指责美国，到底是给谁看的呢？有人翻到了外交部发言人前段时间说的「疫情期间生活在中国，你们就偷着乐吧」的言论，来阴阳怪气上海的防疫措施。白天的时候，这些言论都已经消失，搜索有关「人权赤字国」的话题，只能看到各个蓝色大 V 发表着一模一样指责美国的言论，配着一模一样央视主播的视频。大家都说，这是 Call Me By Your Name. 随后，Call Me By Your Name 的话题被新浪删除。顺着「偷着乐」这一话题，大家戏称上海是 La La Land，随后，La La Land 话题被新浪删除……这可是两部电影的话题啊，为什么不能让人讨论呢……不过，让我觉得还有希望的一点是，至少在半夜，我看到了互联网上最真实的声音。&lt;/p>
&lt;p>在校论坛里，讨论时政的帖子也越来越频繁地出现。大家公认的一点就是，过去很长的时间，社会发展太迅猛了，高度的发展让人们忽视了某些弊病。而随着疫情的出现，发展的脚步放慢，大家终于看清了许许多多的问题。随之带来的还有文化娱乐产业的缩减，人们的思想越来越保守。我不知道这到底是一件坏事还是好事。既然发现了问题，那么我们还有充足的时间去树立目标解决问题，我相信这也是政府的规划。但文娱发展到底是否还有机会放宽，疫情到底何时会彻底结束，只有未来的人才能够作出判断了……&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/coronavirus-prevention-and-peoples-life/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/coronavirus-prevention-and-peoples-life/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
被同学删除好友</title><link>https://guanqr.com/life/ideas/delete-friends/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/delete-friends/</guid><pubDate>Sat, 19 Mar 2022 20:36:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>个月的某一天，在查阅 QQ 空间的访客记录的时候，发现一个熟悉的头像，他的昵称却显示的是 QQ 号。因为我把所有的人都备注上了真实姓名，所以用户名直接显示成 QQ 号很奇怪。仔细查阅好友名单后，发现，原来是他把我删了。&lt;/p>
&lt;p>这是我的小学同学。我记得很清楚，小学一年级入学后和同学的第一次对话就是和他。因为那时候他的书包和我的书包是威豹同一款式的，上面的印着同一个卡通人物的不同造型。所以第一句对话就是，「你的书包和我的一样诶。」&lt;/p>
&lt;p>小学前三年和他没有太多的往来，只记得他玩溜溜球玩得很秀，各种花里胡哨的动作，我学了很久都学不会。四年级的时候，当时魔法士干脆面里附赠三国人物卡，我就开始收集起来，当时有几个出现概率比较低的人物，他有，我就用几个爆丸玩具跟他换卡。还记得最后有一张极其稀有的卡，全班只有他一个人有，结果这张卡他放在裤兜里，被他妈放到洗衣机里洗了。&lt;/p>
&lt;p>五六年级的时候，因为面临着小学升初中，所以大家对待学业开始变得认真起来。他是班里比较聪明的那种人，数学学得还算可以，所以我们经常一起讨论课后题，顺便聊一聊摩尔庄园、赛尔号之类的游戏。当时班主任要求我们写好钢笔字，他和我也是男生里钢笔字写的很好的那一批人。我俩经常在课下设计一些乱七八糟的签名玩。为了设计一个特别的签名，还会尝试使用不同粗细的水笔进行测试。我印象最深的是我俩一起编了一篇很长很长的打油诗，仿照三字经，三个字一句，用那种我们最喜欢的型号的水笔，写在自制的小本子上面。&lt;/p>
&lt;p>某次，放寒假前的几天，学校发下来了寒假作业，我利用两三天的工夫，把寒假作业给「水」完了，他说借他抄一下，我毫不犹豫地给他了，结果假期里我上补习班的时候碰到他，向他提起了作业本的事，问他什么时候写好还给我，他每次都说忘了，下次再给。就这样我催债催了一个寒假，直到返校报道的那天他才给我。&lt;/p>
&lt;p>那时候和同学们之间做过很多有意思的事。后来上了中学，和小学的这些同学再也没见过面，交流的机会就更少了，有时候只会在 QQ 上发的动态下面评论几句。随着长大，内心变得复杂，考虑的事情多了很多，我和这些中学、大学同学们之间便没有了小学那么纯真的关系，甚至有了戒备心，能够聊得来的朋友逐渐变得稀有。有时候真的希望能找时间和那些老同学聚一聚，但我知道这真的很难。&lt;/p>
&lt;p>那个时候的我们都没有手机，唯一的联系方式就是 QQ。虽然很多人只会安静的停留在好友列表里，不曾发过一个消息，但那至少还证明了，我们曾经是同学，我们之间有很多故事。我几乎不会主动添加和删除任何好友，可就在那天，他却默默地删除了我。可能是觉得我们之间已经不会再有任何往来了吧，人生道路的差距越来越大，或许已经不是同一个世界的人了。我看着那个熟悉又陌生的头像，感觉到了些许失落。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/delete-friends/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/delete-friends/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/friendship/">友谊</category><category domain="https://guanqr.com/tags/memory/">回忆</category></item><item><title>
La La Land</title><link>https://guanqr.com/life/films/lala-land/</link><guid isPermaLink="true">https://guanqr.com/life/films/lala-land/</guid><pubDate>Sun, 06 Mar 2022 14:50:24 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;blockquote class="quote en">
&lt;p>City of stars.&lt;br>
Are you shining just for me.&lt;br>
City of stars.&lt;br>
There is so much that I can't see...&lt;/p>&lt;/blockquote>
&lt;p>某天晚上，我独自一人看完了 &lt;em>La La Land&lt;/em>。电影的最后一段，时间回到了 Mia 和 Seb 相遇的那一晚，Seb 穿着那件蓝色西服，在自己的舞台上弹奏完那首属于他和 Mia 的旋律，走下舞台的时候，他并没有选择无视台下的 Mia，两个人相拥接吻，整部电影达到了真正的高潮。我也在这一刻流下了感动的泪水。&lt;/p>
&lt;p>我是在《银翼杀手 2049》中认识的演员高斯林，然后才注意到了他演的这部音乐剧类型的电影 &lt;em>La La Land&lt;/em>。去年的时候，我收到了一位朋友的礼物，他自己画了一幅有关这部电影场景的画，并印制成了小卡片。于是我决定找一个宁静的夜晚观看这部电影。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-0.jpg" alt="lalaland-0.jpg">&lt;span class="caption">※ 朋友送我的小卡片（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-1.jpg" alt="lalaland-1.jpg">&lt;span class="caption">※ 朋友送我的小卡片（二）&lt;/span>&lt;/p>
&lt;p>&lt;em>La La Land&lt;/em> 讲述的是 Mia 和 Seb 的爱情故事。两个人从公路堵车的时候第一次相遇，再到某个夜晚 Mia 独自走在街头听到酒吧里 Seb 演奏的钢琴曲，两个人渐渐熟悉彼此。Seb 是一个追求爵士乐的人，他的愿望就是能够开一个属于自己的酒吧，组建一个自己的小乐队，能够自由自在的演奏爵士乐，不会再被老板束缚。Mia 是一个咖啡厅前台，但她一直有一个演员梦，一直在面试，一直在被导演拒绝。她逐渐被 Seb 追求梦想的精神感动，她不愿受到现实对她的控制，勇敢地追逐自己的梦想。然而，Seb 为了让 Mia 实现她的梦想，必须维持收入的稳定，他不得不向现实妥协，将自己追求爵士乐的梦想抛到脑后，加入了普普通通的乐队，随波逐流。Mia 对 Seb 的误解越来越多，也有些许的失望，她要追踪自己的梦想，也希望 Seb 不要放弃自己的梦想。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-2.jpg" alt="lalaland-2.jpg">&lt;/p>
&lt;p>或许两个人终究不是同一个世界的人吧。就像最开始相识的时候，Mia 并不喜欢爵士乐，似乎已经暗示着两人最终的离别。两条线从远处交汇到一起，终究还是会分离。Mia 终于得到了作为演员发展的机会，离开了这座梦幻之都，前往法国。后来，她有了新的爱情，回到了拉斯维加斯，回到了那条街道，回到了那个酒吧。酒吧的牌子已经变成了 Seb's，那是 Mia 曾经为 Seb 梦想中的爵士乐酒吧取的名字。她坐到酒吧中央，舞台上，Seb 注意到了 Mia，说了一句只对她说的话「Welcome to Seb's.」，接着，再一次弹奏起了最初的那首乐曲。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-3.jpg" alt="lalaland-3.jpg">&lt;/p>
&lt;p>电影最后一段的剪辑惊艳到了我。两个人在酒吧中，回想起了彼此共同度过的那些日子，一幕幕的 What if，一次又一次的遗憾，一次又一次的错过。两个人相爱过，一起为梦想追逐过。作为一部讲述爱情的电影，结尾他们并没有重新在一起。但或许这正是这部电影最好的结局。Seb 和 Mia 是两个独立的个体，他们都实现了自己的梦想，抛弃了曾经的自己，虽然有很多遗憾，但也是因为这些遗憾，才促进了彼此的成长。钢琴曲结束后，Mia 选择离开，在出口处，她回头望了一眼 Seb，Seb 朝她点了点头。这是两个人对对方现在的肯定，也为彼此共同生活的日子画上了句号。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-4.jpg" alt="lalaland-4.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-5.jpg" alt="lalaland-5.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-6.jpg" alt="lalaland-6.jpg">&lt;/p>
&lt;p>电影中的两首曲子的旋律深深刻在了我的心中。第一首就是 Seb 在酒吧里弹奏的那首 &lt;em>Mia &amp;amp; Seb's theme&lt;/em>，第二首是 &lt;em>City of Star&lt;/em>。两首曲子都让我联想到了宁静的夜晚，月光洒在海面的情景，温馨，舒适，又有一些深邃。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lalaland-7.jpg" alt="lalaland-7.jpg">&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/lala-land/" target="_blank" rel="noopener">https://guanqr.com/life/films/lala-land/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/music/">音乐</category></item><item><title>
人偶：托尼·斯塔克</title><link>https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/</link><guid isPermaLink="true">https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/</guid><pubDate>Sat, 26 Feb 2022 18:38:31 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">收&lt;/span>藏影视兵人是我很喜欢的一件事，去年年末的时候发了一篇年度兵人收藏汇总的文章——《&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/">二〇二一年兵人收藏记&lt;/a>》。今年准备新开一个系列文章，每一个新的角色兵人，我都会单独写一篇文章来介绍我是是如何折腾的。本篇就是系列文章的开篇，用来介绍我在2022年收藏的第一个兵人，漫威宇宙的重要角色——托尼·斯塔克。&lt;/p>
&lt;h2 id="缘由">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#缘由" class="anchor-link" aria-label="缘由">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>缘由&lt;/h2>
&lt;p>我第一次看的小罗伯特·唐尼主演的电影并不是《钢铁侠》系列，而是《大侦探福尔摩斯》。他演绎的福尔摩斯有一种独特的气质，电影中无不散发着欧洲古典的风味。后来，直到《复仇者联盟》上映，我才关注到他饰演的钢铁侠托尼·斯塔克这一角色。托尼·斯塔克用一个词形容，就是骚气。在他不穿盔甲的时候，永远开着跑车，穿着西装，带着墨镜。如果仔细看电影中他的服装，或者是看片场照，则会发现，他永远穿着一双高跟皮鞋。可能是因为其他演员身高比较高，为了好搭戏，只能增高一些了。&lt;/p>
&lt;p>HotToys 出品最多的角色就是钢铁侠了，各种型号的机型，甚至《钢铁侠 3》中的各种杂牌机都出了一个遍，但从未出过西装造型。从入坑到现在我从未买过钢铁侠的原因，一方面是价格比较高，另一方面就是机甲的合金部分容易掉漆，塑料部分容易老化褪色，到时候还要找人重涂，很麻烦。不过，我还是很想有一个托尼·斯塔克的兵人，不是机甲造型，而是西装造型，毕竟他在漫威电影中有十分重要的地位。其实收藏一个托尼的西装兵人很简单，因为托尼是定制届三大西装角色之一，其他两位是杀神约翰·威克和蝙蝠侠布鲁斯·韦恩。这三个人物在电影中穿过各种样式的西装，大佬们也已经集单过很多对应样式的西装。不过，我该选择哪个场景中的样式作为我的收藏呢，这是个好问题。&lt;/p>
&lt;h2 id="头雕">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#头雕" class="anchor-link" aria-label="头雕">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>头雕&lt;/h2>
&lt;p>去年年末的时候，箱总制作了一款《钢铁侠 3》中的托尼头雕，采用的制作工艺是先泥雕，再扫描建模，最后 3D 打印。因为泥雕成品最大的问题是无法调整大小，翻模时也会造成细节丢失和变形。所以利用现代化的扫描建模，可以自由调整头雕大小来适配身体，并且 3D 打印的品质更稳定。在电影《钢铁侠 3》的结尾，托尼来到海边，将从身上取下的反应堆扔进大海，这一幕他穿着的是蓝色休闲西装，牛仔裤。平时他的西装造型是打着领带的，所以不会露出脖子和胸上方部位。而这一造型的脖子是漏出来的，所以，此前出过的很多有脖头雕都无法适配，因为胸前会露出破绽。其解决办法就是无脖头雕，或者将头雕延伸到胸前。箱总的这一头雕就是采用了延伸的方案。其实，无脖头雕在定制圈逐渐淡出视野，因为无脖头雕需要匹配有脖素体，这样在头雕和脖子的连接处会有明显的分割界限，不完美。有脖头雕的分割界限正好会被衣服挡住，所以现在越来越多的定制头雕都采用了带脖子的解决方案。&lt;/p>
&lt;p>《钢铁侠 3》对我而言是有纪念意义的。这是我第一次在电影院看的漫威电影。所以我选择订了这一款头雕。《钢铁侠 3》中托尼形象的最大特点就是，胡子是延伸到鬓角的。在其他电影中，基本没有这一形象的出现。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-0.jpg" alt="one-sixth-scale-figure-tony-stark-0.jpg">&lt;span class="caption">※ 《钢铁侠 3》中的托尼形象&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-1.jpg" alt="one-sixth-scale-figure-tony-stark-1.jpg">&lt;span class="caption">※ 头雕白膜展示（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-2.jpg" alt="one-sixth-scale-figure-tony-stark-2.jpg">&lt;span class="caption">※ 头雕白膜展示（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-3.jpg" alt="one-sixth-scale-figure-tony-stark-3.jpg">&lt;span class="caption">※ 头雕白膜展示（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-4.jpg" alt="one-sixth-scale-figure-tony-stark-4.jpg">&lt;span class="caption">※ 头雕 CoA&lt;/span>&lt;/p>
&lt;h2 id="服装">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#服装" class="anchor-link" aria-label="服装">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>服装&lt;/h2>
&lt;p>至于服装，本来应该选择与头雕对应搭配的蓝色休闲西装这一套，但 Yunsil 的这一套衣服是圈内一个日本人很早之前集单的，出来的效果一般，而且现在很难收到，价格比较高。其他几款，例如法庭上穿的那一套，由夜茶集单的，更是贵的离谱；《钢铁侠 1》中战场上那一套，结尾宣布自己是钢铁侠的那一套，还有《蜘蛛侠：英雄归来》结尾的那一套，都是正在制作当中，目前转单的人也很少。当前最容易买到现货的，而且价格最接近原价的，就是《钢铁侠 2》结尾颁奖一幕的那一套西装。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-5.jpg" alt="one-sixth-scale-figure-tony-stark-5.jpg">&lt;span class="caption">※ 《钢铁侠 2》颁奖一幕的剧照&lt;/span>&lt;/p>
&lt;p>于是，组装起来。素体采用 M01 素体，无需打磨手臂和大腿，直接穿衣服就能达到很好的效果。不过为了配合这一款头雕的脖子，还是在脖子接口处打磨了一些。鞋子是从草鱼兄那里买的，是搭配这套西装的高跟皮鞋。头雕和鞋子的连接我没有使用传统的连接器，而是直接使用了蓝丁胶——为了方便后期取下进行涂装。蓝丁胶真的很好用，粘性很大，而且去除的时候也不会留下痕迹。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-6.jpg" alt="one-sixth-scale-figure-tony-stark-6.jpg">&lt;span class="caption">※ Yunsil 服装衬衣&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-7.jpg" alt="one-sixth-scale-figure-tony-stark-7.jpg">&lt;span class="caption">※ Yunsil 服装西服&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-8.jpg" alt="one-sixth-scale-figure-tony-stark-8.jpg">&lt;span class="caption">※ Yunsil 服装裤子&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-9.jpg" alt="one-sixth-scale-figure-tony-stark-9.jpg">&lt;span class="caption">※ Yunsil 服装细节展示（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-10.jpg" alt="one-sixth-scale-figure-tony-stark-10.jpg">&lt;span class="caption">※ Yunsil 服装细节展示（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-11.jpg" alt="one-sixth-scale-figure-tony-stark-11.jpg">&lt;span class="caption">※ Yunsil 服装 CoA&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-12.jpg" alt="one-sixth-scale-figure-tony-stark-12.jpg">&lt;span class="caption">※ 配套定制高跟皮鞋&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-13.jpg" alt="one-sixth-scale-figure-tony-stark-13.jpg">&lt;span class="caption">※ 衣服和头雕合体（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-14.jpg" alt="one-sixth-scale-figure-tony-stark-14.jpg">&lt;span class="caption">※ 衣服和头雕合体（二）&lt;/span>&lt;/p>
&lt;p>说来也怪，虽然我很早就接触定制圈子了，但这一款兵人是我到货的第一款完整的定制产品。虽然目前还没有对头雕进行涂装，但已经有了很好的效果。&lt;/p>
&lt;h2 id="领带更换更新于-20220615">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#领带更换更新于-20220615" class="anchor-link" aria-label="领带更换更新于-20220615">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>领带更换（更新于 2022.06.15）&lt;/h2>
&lt;p>六月中旬，我终于收到了订购的 dino 领带。和 Yunsil 的衣服一样，这是我第一次见到 dino 领带的实物。dino 制作的领带要比一般的定制服装里自带的领带更为精致。印花工艺清晰度高，布料选材适中。特别值得称赞的是，dino 使用了和真实领带一样的打结方法，不像 Yunsil，单独做一个绕脖子的结构。下图展示了 dino 领带的细节，和 Yunsil 领带的对比以及上身效果。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-15.jpg" alt="one-sixth-scale-figure-tony-stark-15.jpg">&lt;span class="caption">※ dino 领带细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-16.jpg" alt="one-sixth-scale-figure-tony-stark-16.jpg">&lt;span class="caption">※ dino（左）vs Yunsil（右）（正面）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-17.jpg" alt="one-sixth-scale-figure-tony-stark-17.jpg">&lt;span class="caption">※ dino（左）vs Yunsil（右）（背面）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-18.jpg" alt="one-sixth-scale-figure-tony-stark-18.jpg">&lt;span class="caption">※ dino（左）vs Yunsil（右）（上沿）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-19.jpg" alt="one-sixth-scale-figure-tony-stark-19.jpg">&lt;span class="caption">※ 上身细节&lt;/span>&lt;/p>
&lt;h2 id="头雕更换更新于-20221017">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#头雕更换更新于-20221017" class="anchor-link" aria-label="头雕更换更新于-20221017">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>头雕更换（更新于 2022.10.17）&lt;/h2>
&lt;p>时隔数月，回过头来觉得这款兵人我并没有打理到位，遂拆卸下来重新打理，包括垫肩，垫肚子，增肥一条龙。其中最让我觉得麻烦的一点，就在于头雕。因为这款头雕是脖子向下延伸的头雕，下端的口径偏大，因此需要先安放头雕，再打理衣服，尤其是领带的松紧很繁琐。如此一来，如果我想要找涂装师涂头雕的话，还需要把衣服给拆了。不如再配一颗更适合这套颁奖场景的头雕吧。&lt;/p>
&lt;p>三步工作室的笑脸托尼已经出货，这款头雕在闲鱼市场的价格，相对于该工作室其他头雕而言，便宜很多很多，因为并没有限量，且有早期翻模流出，盗版猖獗。于是我便收入了一颗，到货后仔细欣赏了一番，果然栩栩如生。用这颗头雕搭配颁奖套西装，再合适不过了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-20.jpg" alt="one-sixth-scale-figure-tony-stark-20.jpg">&lt;span class="caption">※ 微笑头雕&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-21.jpg" alt="one-sixth-scale-figure-tony-stark-21.jpg">&lt;span class="caption">※ 证书与头雕&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-22.jpg" alt="one-sixth-scale-figure-tony-stark-22.jpg">&lt;span class="caption">※ 整体效果&lt;/span>&lt;/p>
&lt;h2 id="佩戴勋章更新于-20230915">&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/#佩戴勋章更新于-20230915" class="anchor-link" aria-label="佩戴勋章更新于-20230915">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>佩戴勋章（更新于 2023.09.15）&lt;/h2>
&lt;p>既然是颁奖时的形象，自然不能少了所颁的奖。在《钢铁侠 2》的结尾，托尼被授予了陆军杰出服务勋章。大约是在 21 年底的时候，子浩兄发起了一次勋章的集单，但当时我还没有购入这款衣服，便没有参与。错过那次机会后，偶然发现韩国的工作室 Solid Factory 也在制作这个勋章，遂在 Instagram 上询问是否还能购买,结果人家根本不理我……于是，我只能静静等待一个机缘巧合。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-23.jpg" alt="one-sixth-scale-figure-tony-stark-23.jpg">&lt;span class="caption">※ 杰出服务勋章&lt;/span>&lt;/p>
&lt;p>当我以为彻底没戏了的时候，这样的机缘巧合真的发生了。毛总联系到了 Solid Factory 工作室，准备发起一次拼车。我便上车预订了勋章，另外还有一个里昂的眼镜——关于里昂，我以后再写一篇文章介绍。&lt;/p>
&lt;p>收到货后，对于在 1/6 比例下制作如此精致的勋章，我认为十分惊艳。勋章的后面贴有一个小铁片，可以通过小吸铁石固定在衣领上。为托尼佩戴上勋章后，整个人偶的完成度又上了一层台阶。这个勋章就宛如画龙点睛的一笔。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-24.jpg" alt="one-sixth-scale-figure-tony-stark-24.jpg">&lt;span class="caption">※ 勋章细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figure-tony-stark-25.jpg" alt="one-sixth-scale-figure-tony-stark-25.jpg">&lt;span class="caption">※ 佩戴勋章的效果&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/" target="_blank" rel="noopener">https://guanqr.com/collections/figures/one-sixth-scale-figure-tony-stark/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/collections/">collections</category><category domain="https://guanqr.com/collections/figures/">figures</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/marvel/">MARVEL</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
一个人的春节</title><link>https://guanqr.com/life/ideas/spring-festival-2022/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/spring-festival-2022/</guid><pubDate>Thu, 03 Feb 2022 13:10:13 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">小&lt;/span>时候，每到春节，社区就会安排一场精彩的烟花秀。开场的烟花最为炫目：在两个灯柱之间挂上类似横幅的烟花，点燃一头的引线，飞箭顺着引线引燃另一头的火药，接着，点点星火在两个灯柱之间落下，就像飞流的瀑布，华丽惊艳。后来，由于安全问题，社区的烟花秀取消了，我再也没看过如此绚丽的烟花，只能在小摊铺那里买一些传统的小炮。再后来，全市禁放烟花，除夕夜格外的宁静。&lt;/p>
&lt;p>今年的春节，我没有回家。因为浙江部分地区的疫情最近比较严重，家那边防疫政策层层加码，到站即被隔离——于是，干脆就不回去了，等后面天气转暖再考虑回家的事。&lt;/p>
&lt;p>除夕那天正好是周一，除夕前的那个周五的晚上，部门的领导们请我们所有不回家的员工吃了顿饭。这顿饭很特别，是在同事的家中吃的，大家一起包了很多饺子，做了很多的菜，吃完饭后，大家一起玩谁是卧底和你画我猜。周末两天按照国家规定还需要加班，然而，办公室很多人都已经请假提前溜回了家。周末两天我就在办公室摸鱼，甚至在周日的时候，上午打完上班卡，去食堂蹭了一顿饭，拿着公司发的购物券去超市换了两箱牛奶，直接回到了公寓。因为最后一天不用打下班卡，所以随时可以走。&lt;/p>
&lt;p>假期这几天，时间占比最长的就是睡觉。平时每天都定了早上七点的闹铃，现在直接关掉，每天睡到九、十点，来场彻彻底底地放松。这边的天气和往年的杭州一样，冬季就是连绵不断的雨。这样的天气，让我根本不想出去走动。本来说晚上去看一场春节档的电影，但是看了看票价，所有的电影都是一百多元，一百多元在电影院看一场平庸的电影，还不如多买一些好吃的。如果回家的话，想必也是，在大年初一的时候拜拜年，然后就是待在屋里，打打游戏，看看电视。现在的状态，也差不多吧。&lt;/p>
&lt;p>年味确实越来越淡了，现在的过年，我觉得只剩下短暂的七天小长假这样的形式，最多最多只是多出来一个年夜饭。像放烟花，逛庙会，看花灯这样在小时候每年都会做的事，现在已经几乎不会再去做了。虽然每年依然会有庙会和灯展，但早已失去享受这一切的乐趣。我工作的城市并没有禁止烟花爆竹，走在路上的时候，身边经常会有淘气的小孩点燃小炮随便扔到马路中间「等待「中奖」的人，这倒是仅有的一点能让我回想起曾经过年时和小伙伴们玩耍的情节。当年的我们和现在的他们一样猛，试图将炮竹放在一切能炸的地方——垃圾桶里，窨井盖下，小池塘中。&lt;/p>
&lt;p>今年是虎年，我的本命年。已经走过两轮生肖，十二岁时，才小学毕业，不禁惊叹时光走的如此匆忙，不愿自己在最好的青春中碌碌无为。十二年后，我又会是怎样的生活状态呢……&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/spring-festival-2022/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/spring-festival-2022/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/reality/">现实</category><category domain="https://guanqr.com/tags/work/">工作</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
你好，二〇二二</title><link>https://guanqr.com/life/ideas/hello-2022/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/hello-2022/</guid><pubDate>Sat, 01 Jan 2022 09:38:15 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">二&lt;/span>〇二一年，又一个人生的节点。这一年给我的感觉是，上半年的时间过得很慢，下半年的时间过得飞快。上半年还在学校中，为了完成毕业设计每天忙得焦头烂额，为了达到毕业要求的学分做着最后的努力，那段时间每天都过得很焦虑，度日如年。下半年参加了工作，领导每周给的任务有很多，有时候也会加班到很晚，有时候感觉好像还没做什么，一周就过去了，一个月就过去了……可能是因为工作分散了我对时间的关注。&lt;/p>
&lt;h2 id="学业">&lt;a href="https://guanqr.com/life/ideas/hello-2022/#学业" class="anchor-link" aria-label="学业">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>学业&lt;/h2>
&lt;p>这一年里，我完成了所有课程的学习，为四年的大学生活画上了句号。年初的时候一直在担心体质测试会不合格，找不到合适的工作，为此一直在控制饮食增强锻炼，在网上搜寻专业相关岗位投递简历。返校后做毕业设计时经常感到无助，好在导师是一个十分耐心的人，教会我如何思考问题。至今都不会忘记那一个晚上，我拟合出了想要的曲线公式，解决了一大难题，心情舒畅了许多，和室友一起骑车来湖滨银泰玩。四年之间，虽然说有很多未完成的，甚至是不甘心的事，但所有的一切都已经过去，把这些往事都埋在自己的内心角落里吧。&lt;/p>
&lt;h2 id="工作">&lt;a href="https://guanqr.com/life/ideas/hello-2022/#工作" class="anchor-link" aria-label="工作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>工作&lt;/h2>
&lt;p>我不是一个爱争强好胜的人，不想处在一个竞争非常激烈的环境中工作。因此，我选择了当前的这份工作。六个月的试用期即将结束，当初和我一同入职的应届生有些已经离开，但我觉得这个岗位还不错。这是我最喜欢的光学设计，我在工作中能够积累很多设计经验。虽然有时候为了按时完成方案需要加班到很晚，但工作强度是我能承受住的——其实感觉还没有在校大三的时候为了完成课程设计绞尽脑汁的压力大。工作环境也很舒适，每到节假日还会发很多福利。这样的工作肯定不是我的专业能找到的最好的工作，但我觉得挺适合我的。年轻有试错的机会。我觉得，可以先干满一年再评估一下自身未来的发展吧。&lt;/p>
&lt;h2 id="娱乐">&lt;a href="https://guanqr.com/life/ideas/hello-2022/#娱乐" class="anchor-link" aria-label="娱乐">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>娱乐&lt;/h2>
&lt;p>在娱乐方面，我基本上都是宅在屋子里独自做一些自己想做的事。比如看各种题材的电影和电视剧，养几只乌龟，收藏各种卡牌，收藏兵人。某天和朋友聊天，说道自己一个人在外地，很难再认识到像她这样值得信任的人，总觉得有种孤独感。她说可以发展一些兴趣爱好充实自己的生活。我加了很多相关的群聊，在群里和有共同爱好的人一起聊天，看着群友们分享他们自己的故事，现在看来，这些对我而言很有意思的东西确实带给我很多快乐。&lt;/p>
&lt;h2 id="未来">&lt;a href="https://guanqr.com/life/ideas/hello-2022/#未来" class="anchor-link" aria-label="未来">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>未来&lt;/h2>
&lt;p>工作后，我在博客上的文章更新慢了很多。以前每个月能写上好几篇文章，现在能保证每月一篇就很不错了。倒不是说每有什么可写的，我想写的东西还有很多，但工作实在是有些累，下班后不想再让自己的大脑运转，不想再对着屏幕敲键盘打字，只想着痛痛快快地看一看娱乐节目或者电视剧来放松一下。&lt;/p>
&lt;p>这确实有些偷懒。建立这个「小屋」的一个目的就是写下自己对生活的想法，总结学到的技术。有些想法可能仅仅会在某个时间点上突然从脑子中蹦出，如果没有及时记录下来，就会忘得一干二净。过段时间再来回想的话，就有些后悔自己没有写下什么。以后还是要在保证每月一篇的基础上，写出质量更高一些的文章。对了，我的微信公众号好像很久没有更新过了，惭愧惭愧。&lt;/p>
&lt;p>未来一年，最重要的是好好工作，认真完成安排给我的每一个项目。其次，趁着周末多在宁波转一转，来这里几个月了，还没有真正认识这座城市。还有，我想着买一台相机，记录下生活中的风景，顺便提升一下摄影技术。希望在六月份的时候，能给毕业的朋友拍一拍毕业照~&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/hello-2022/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/hello-2022/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/introspection/">反省</category><category domain="https://guanqr.com/tags/work/">工作</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
二〇二一年兵人收藏记</title><link>https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/</guid><pubDate>Fri, 31 Dec 2021 23:24:52 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-0.png" alt="one-sixth-scale-figures-2021-0.png">&lt;/p>
&lt;p>作为一个对影视作品充满热爱的年轻人，除了在空暇时间会看上几部电影或电视剧外，还会特意去了解一些作品的拍摄背景，作品中的艺术设计等等，甚至会去收藏一些周边的产品。于是，十二寸兵人，就成为了我很喜欢的一个收藏方向。&lt;/p>
&lt;p>在 19 年的时候，我写过一篇文章来介绍十二寸兵人是什么（《&lt;a href="https://guanqr.com/life/hobbies/one-sixth-scale-figure/">影视周边：十二寸兵人收藏&lt;/a>》）。虽然过去了短短的 3 年，但如今的环境变化很大。Hot Toys 的产品质量越来越差，题材越老越少，一直在靠套路和吃老本收割情怀。对于定制，在那篇文章中，我提到过，国内的手艺人较少，想要定制的头雕和服装，需要联系韩国等其他国家的设计师。但现在这样的情况有些转变，国内也有越来越多的人参与到了服装定制和头雕设计之中，比如阿龚、座山猫、阿展、Toys 玩家等等。虽然说这个圈子的人很少，但兵人的题材更加多样化，人们选择集单的方向也多了很多。&lt;/p>
&lt;p>我时常思考自己为什么会进到这个坑里。感觉很大一部分原因是，对于一个兵人，它的服装样式和纹路设计和头雕的雕刻深深吸引了我。并且对于一些定制的兵人，需要不断的升级配件和 DIY 来尽力接近影视中的形象，如此折腾的过程也是一种享受。&lt;/p>
&lt;h2 id="收藏展示">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#收藏展示" class="anchor-link" aria-label="收藏展示">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>收藏展示&lt;/h2>
&lt;p>2021 年，我总共收到了 4 款兵人。都是来自非 Hot Toys 的厂家和第三方小厂。今年 Hot Toys 的产品质量下滑严重，大部分产品的头雕，货不对板，严重缩水。前几年倒爷猖狂，导致预定量激增，供大于求，价格暴跌。但也有一些精品，比如《复仇者联盟：终局之战》中的鳞甲美国队长，《星球大战 9》中的凯洛伦，《曼达洛人》中的丁贾林。这些以后再考虑是否购入。&lt;/p>
&lt;h3 id="詹姆兰尼斯特">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#詹姆兰尼斯特" class="anchor-link" aria-label="詹姆兰尼斯特">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>詹姆·兰尼斯特&lt;/h3>
&lt;p>这一人物来自美剧《权力的游戏》，形象来自后期狮甲造型，由 ThreeZero 出品。《权力的游戏》这部剧很经典，虽然我只看过第一季，但这毫不影响我对这款兵人的喜爱。盔甲上布满图腾纹路，假肢、腰带上也全是细节。特别是这款头雕，其像真度在 ThreeZero 出品的人物中是数一数二的。几年前国外有人出过詹姆狮甲的定制套装。但拿这一款量产兵人与定制的相比，我觉得这一款更顺眼一些。美中不足的一点是，这款兵人盔甲底衬采用了仿皮材质，很容易受到环境影响过快老化掉皮。我也不知道 ThreeZero 是怎么想的。使用小羊皮贵是贵了点，但玩家更愿意加钱选择质量更好的兵人。当初官方发布这款兵人的预订信息的时候，我给官方写了封电子邮件说明这个问题，在微博上也有很多玩家反映这一问题，但 ThreeZero 就是不改。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-1.jpg" alt="one-sixth-scale-figures-2021-1.jpg">&lt;span class="caption">※ 詹姆·兰尼斯特&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-2.jpg" alt="one-sixth-scale-figures-2021-2.jpg">&lt;span class="caption">※ 詹姆·兰尼斯特细节展示&lt;/span>&lt;/p>
&lt;h3 id="沃尔特怀特">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#沃尔特怀特" class="anchor-link" aria-label="沃尔特怀特">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>沃尔特·怀特&lt;/h3>
&lt;p>沃尔特·怀特是经典美剧《绝命毒师》中的主人公，江湖代号「海森堡」，由于「怀特（White）」英文中又有「白色」的意思，所以国内很多人称他为「老白」。这一款兵人由 Mars Toys 出品。Mars Toys 是一个最近两年才出现的第三方玩具厂，我感觉它其实和另一家叫 Daf Toys 的第三方厂是同一家。套装中有蓝和绿两种颜色的衬衣。蓝色衬衣对应剧中老白找毒枭宣传自己毒品时的「Say My Name」经典造型。绿色衬衣对应剧中老白暗杀炸鸡叔时的造型。&lt;/p>
&lt;p>原厂自带的腰带很奇葩，后来我单独在淘宝上某个卖潮玩兵人的店家买了一个质量很好的腰带进行了替换。这一款兵人不包括素体，我最开始用 MX02 素体，很合适，因为厂家就是用 MX02素体给衣服打板的。不过 MX02素体质量太次，关节很软，手部塑料感十足。后来我就更换为了 AT020 素体。AT020 的质量很好，但美中不足的一点是，手臂有些短。手型部分，AT020 的手肤色太白，并且缺少老年人手部的皱纹，剧中老白左手还戴着一枚金色戒指。今年上半年的时候，夜茶开了一轮老白定制手型的预订，当时我还没有买这个兵人，就没有跟着订。后来另一位玩家也推出了自己设计的手型，本来想订的，但无意间发现，教父（在下一节展示的兵人）的左手也带着金色戒指，这不就能用上了吗，天助我也。&lt;/p>
&lt;p>至于头雕，Mars Toys 自带的头雕是翻模很早之前 iminime 的老白头雕，细节很糊，翻模线明显，涂装也不是很好。所以我临时用一个没有涂装的阿展老白翻模头代替。阿展老白头雕很有神韵，但现在基本没人出原膜了。等等看以后还有没有人出新的老白头雕吧。鞋子和眼镜也等以后再换吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-3.jpg" alt="one-sixth-scale-figures-2021-3.jpg">&lt;span class="caption">※ 沃尔特·怀特以及素体、头雕、手型替换&lt;/span>&lt;/p>
&lt;h3 id="维托柯里昂">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#维托柯里昂" class="anchor-link" aria-label="维托柯里昂">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>维托·柯里昂&lt;/h3>
&lt;p>小学的时候，去郑州参加电子琴比赛，我选的曲子就是电影《教父》的主题曲 &lt;em>Speak Softly Love&lt;/em>，但我一直没有看过这部电影。直到今年，在我收到由 Dam Toys 出品的这款教父兵人前，才抽空看了经典的三部曲。电影中最经典的镜头就是开头教父身着西装抚摸小猫的场景。这一款兵人带有很多精致的小配件，木质的椅子，桌子，还有精致的电话，红酒，蜡烛，厂家还附赠了一颗比原头雕更像白兰度的头雕。不过美中不足的是，这一款兵人自带的增肥衣肚子太大了，白衬衣很难打理，裤子总往下掉。不过就整体而言，瑕不掩瑜。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-4.jpg" alt="one-sixth-scale-figures-2021-4.jpg">&lt;span class="caption">※ 维托·柯里昂以及各种精致配件&lt;/span>&lt;/p>
&lt;h3 id="丹尼兰德">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#丹尼兰德" class="anchor-link" aria-label="丹尼兰德">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>丹尼·兰德&lt;/h3>
&lt;p>三四年前，Eleven 就在微博发布动态，正在制作「铁拳」丹尼·兰德的兵人。我还看见了芋艿兄打理后的铁拳，非常喜欢。我之前买过 Eleven 兄的金刚狼头雕和宫本武藏兵人套装。他算是第三方里质量极佳的厂家，制作的兵人也都是原创。不过由于出货太慢，或者是只发布预告却不开预售，之前一直被圈子里的朋友称为「饼厂」。我是从蜘蛛侠动画里认识的「铁拳」这个人物，特别喜欢他胸前的龙图腾。美剧《铁拳》播出后，虽然口碑不太理想，但依旧不影响我对这一人物的喜爱，我一直等待着 Eleven 开预售。遗憾的是，后来我才知道，因为这一款兵人是和某个印度佬合作的，所以不在国内发售。在今年年底，等等党终于迎来了胜利。我无意间在淘宝上的几家模型店里发现有售卖这款兵人的，存货很少，销量也寥寥无几。于是我就捡了个漏，赶紧入手。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-5.jpg" alt="one-sixth-scale-figures-2021-5.jpg">&lt;span class="caption">※ 丹尼·兰德&lt;/span>&lt;/p>
&lt;h2 id="未来计划">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#未来计划" class="anchor-link" aria-label="未来计划">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>未来计划&lt;/h2>
&lt;p>下面这些是我已经预订了但还没有到货的兵人。顺便分享一下预订这些兵人时候的故事。&lt;/p>
&lt;h3 id="布兰迪">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#布兰迪" class="anchor-link" aria-label="布兰迪">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>布兰迪&lt;/h3>
&lt;p>这是东木老爷子克林特·伊斯特伍德在《黄金三镖客》中饰演的人物。头雕和服装来自 iminime，靴子和手枪配件来自第三方 Red Toys。今年八月底的时候，D 佬在某个大群里分享了另一个群，那个群在开镖客的头雕白膜。我很喜欢西部片，对东木的镖客三部曲印象很深，也经常看到有玩家晒 iminime 的镖客兵人，所以便扫码进了群。预订了头雕和衣服。当时因为没有闲钱了，所以就没有订鞋子、手枪这些配件，只能拿第三方代替了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-6.jpg" alt="one-sixth-scale-figures-2021-6.jpg">&lt;span class="caption">※ 布兰迪&lt;/span>&lt;/p>
&lt;h3 id="张牧之">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#张牧之" class="anchor-link" aria-label="张牧之">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>张牧之&lt;/h3>
&lt;p>张牧之是姜文在《让子弹飞》中饰演的人物。在林间做麻匪，截了新任县长马邦德的火车，代替马邦德成为了鹅城县长。随着时间的推移，《让子弹飞》越来越受到人们的喜爱。每一个人物，每一句台词，都是经典中的经典。头雕来自范哥 712 Studio，衣服来自阿龚 Y.M.A Studio。最初我是在贴吧里看到 J 佬在晒一个九筒麻匪的兵人，他说这是范哥开的预订。于是我就在咸鱼找到了范哥，看到姜文的头雕和麻匪套装已经截单，遗憾……后来我就在贴吧里关注了范哥，发现他分享的兵人中还有一个张牧之的军装形象。我觉得军装比麻匪的造型帅气。可是搜了一圈，也没发现开订，遂打消了念头。&lt;/p>
&lt;p>十月底的时候，无意间发现范哥在咸鱼上预售了新款的姜文 2.0 头雕，还说接下来会开订军装！真的是惊喜啊！我毫不犹豫就预订了。头雕现在我已经收到了，是数字建模红蜡打印的，精度很高。这是我第一次接触到 3D 打印的头雕，以前一直玩的是学校精度很低的 3D 打印机，如此高精度的打印件，很惊艳。衣服和腰带是分开预订的，希望 2022 年上半年能出货吧。张牧之在电影后半段出城剿匪前，有一个戴帽子和墨镜的造型。墨镜我没有预订，一是价格太贵了，当时我没闲钱，二是觉得不戴墨镜也挺好的，如果真需要的话，可以买一个便宜很多的里昂用的墨镜给它戴上。帽子现在还没有开订，要是后面有的话，我也会订的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-7.jpg" alt="one-sixth-scale-figures-2021-7.jpg">&lt;span class="caption">※ 张牧之头雕&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-8.jpg" alt="one-sixth-scale-figures-2021-8.jpg">&lt;span class="caption">※ 军装样板&lt;/span>&lt;/p>
&lt;h3 id="屠夫比尔">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#屠夫比尔" class="anchor-link" aria-label="屠夫比尔">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>屠夫比尔&lt;/h3>
&lt;p>屠夫比尔是丹尼尔·戴·刘易斯在马丁·斯科塞斯的电影《纽约黑帮》中饰演的角色。南北战争时期，纽约城汇聚了世界各地的人，形成了不同的帮派。屠夫比尔是纽约五点区本地帮的领袖。刘皇叔在这部电影中的演技超神，完全压盖住了青涩的小李子。在电影中，屠夫的服饰很华丽，且很多镜头中，他的腰间都挂着一圈刀具。不知是不是由于 Rainman 最早推出了屠夫比尔的兵人，他已经成为了定制圈最为喜爱的人物之一。目前关于屠夫的兵人已经推出了三个形象，一个是电影开头雪地中和死兔帮血战的造型，其他两个是礼服装。&lt;/p>
&lt;p>在 2019 年 6 月的时候，我看到芋艿和希斯在微博上发布了新的屠夫衣服集单，由 Yunsil（Toribox） 制作。全新的造型，腰间没有刀具，消除了单独购买刀具的烦恼，随后还会开订新款的头雕和靴子。于是，我上了车。这是我第一次走进定制圈。可以说，如果没有这次参加屠夫集单，就不会有机会接触到其他定制兵人。&lt;/p>
&lt;p>Toribox 的官网上写着会在 2020 年三四月份的时候开始做样板。但实际上，由于其他订单堆积太多，直到今年上半年才开始制作。布料材质和颜色校准花费了很长时间。这款服装的纹路有些复杂，需要大面积印花工艺。现在 Yunsil 嫌麻烦已经不再接受类似大面积印花的订单，也就是说说这个服装基本成为绝唱了，再版都基本不可能。今年 8 月中旬的时候，希斯分享了初版 Sample 的照片。虽然还有很多细节需要调整，但已经可以看出，这么长时间的等待是值得的。9月底的时候，第二版 Sample 公布了，大衣下摆增加了铁丝以固定造型，扣子位置进行了调整，马甲印花颜色和领型进行了调整，口袋增加了怀表链，裤子加长并调整了颜色。12 月底，最终的样板邮寄到了集单人希斯兄那里，接下来就是等待补款和最后的大货生产了。&lt;/p>
&lt;p>靴子方面，原本计划是 Robbie 制作真皮靴子，但久久没有开工。2020 初的时候，芋艿开了一次 Creg 的屠夫靴子白膜集单，我参与了进来，几周后就收到了靴子白膜，不过感觉精度有些次，但也没有其他替代品。后来在 2021 年 10 月的时候，夜茶开了软胶材质的靴子集单，我自然也参与了，这次会和衣服一起发货，值得期待。&lt;/p>
&lt;p>头雕的预订过程很曲折。最开始的时候，说是 Yumi 会开涂装和白膜两个版本的屠夫表情头雕。于是交了订金。几个月后，Yumi 的初版建模图片发布，效果不太理想。希斯兄在和 Yumi 沟通了几次后，修改未果，于是负责的希斯为了不让玩家拿到效果很差的头雕，退还了订金，取消了这次的头雕计划。后来找了 Jay 开屠夫头雕，限量 35 颗。Jay 的头雕只有涂装板，价格很贵很贵，当时觉得，就算我交了定金，也不知道是否有足够的钱交补款，所以就没有参与进来。听希斯说，后面夜茶也会做新的头雕，肯定会比 Jay 的便宜很多，我想到时候再订夜茶的吧。但我等到现在也没有看到任何更新的动态，不知道做出来要猴年马月了。今年 10 月底的时候，由于 Yunsil 已经开始制作最后的样板，希斯兄开始收取 Jay 的屠夫头雕订金，说最近几个月会完成头雕，并且 Robbie 也要开始制作对应 Jay 和 Rainman 两款头雕的帽子。这个时候有部分人跳车了，35 颗头的名额多了很多空位子。原本我挣扎了一下想上车的，但又觉得，样板发布后，很快就会收取衣服的补款，衣服补款后万一没钱补款头雕怎么办，遂再一次放弃了机会。于是，当时的情况就是，我既没有新的 Jay 头，也没有祖传的 Rainman 头。&lt;/p>
&lt;p>到年底了，我想来想去，唉声叹气，总不能到最后没有头雕吧，那不真成「无头骑士」了。我还看到论坛上有国内玩家 9 月初收订阿展屠夫头雕，限量 15 颗，不过也已经订满了。这次真的什么机会都错过了。后悔啊，真的后悔，当初还不如上 Jay 的车。我在咸鱼上收到了一个 Rainman 的屠夫翻模，但翻模的质量很差，只能当做是最保底的方案了。最后只有一个解决方法，在闲鱼上挂个收头雕的链接，等出坑的玩家主动联系我。出乎意料的是，没过几天，就有一位玩家联系了我要出阿展头雕。更让我意想不到的是，这位兄弟就是开镖客集单的那位，也是在论坛上收订阿展屠夫头雕的那位。幸运之神终于降临！&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-9.jpg" alt="one-sixth-scale-figures-2021-9.jpg">&lt;span class="caption">※ 《纽约黑帮》剧照&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-10.jpg" alt="one-sixth-scale-figures-2021-10.jpg">&lt;span class="caption">※ 第一版 Sample&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-11.jpg" alt="one-sixth-scale-figures-2021-11.jpg">&lt;span class="caption">※ 第二版 Sample&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-12.jpg" alt="one-sixth-scale-figures-2021-12.jpg">&lt;span class="caption">※ 服饰细节&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-13.jpg" alt="one-sixth-scale-figures-2021-13.jpg">&lt;span class="caption">※ 样板搭配 Rainman 头雕&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-14.jpg" alt="one-sixth-scale-figures-2021-14.jpg">&lt;span class="caption">※ 夜茶制作的靴子建模图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-15.jpg" alt="one-sixth-scale-figures-2021-15.jpg">&lt;span class="caption">※ Jay 制作的头雕&lt;/span>&lt;/p>
&lt;h3 id="詹姆斯邦德">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#詹姆斯邦德" class="anchor-link" aria-label="詹姆斯邦德">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>詹姆斯·邦德&lt;/h3>
&lt;p>在《007》系列电影中，邦德的经典服饰是黑色西装加白色衬衣。不过我觉得这一套服装搭配太常见了，不够独特。2019 年的时候，芋艿还集过一次《007：幽灵党》中火车上邦德穿的白色礼服套，造型够独特，当时我没有参与。今年丹尼尔·克雷格的 007 谢幕之作《007：无暇赴死》上映，开场的时候，邦德去意大利悼念琳达时卡其色西服形象也很吸引我，于是参与了 V 总的集单。现在还没有开始制作样板，估计还要再等一年吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-16.jpg" alt="one-sixth-scale-figures-2021-16.jpg">&lt;span class="caption">※ 詹姆斯·邦德&lt;/span>&lt;/p>
&lt;h3 id="海上钢琴师">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#海上钢琴师" class="anchor-link" aria-label="海上钢琴师">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>海上钢琴师&lt;/h3>
&lt;p>还记得在 2020 年末的时候，Toribox 开放了新的衣服预订通道，几天内群里的大佬们开放了各种人物服装的集单。上文中提到的邦德服装也是在那个时候发起的集单。当时茶园的团队（T-art）开了海上钢琴师 1900 的服装预订，共有两款，一个是斗琴时穿的白色礼服，一个是下船时穿的米色大衣。白色礼服款的定价还好，下船大衣的定价高的离谱。我猜可能因为是西装的衬衣印花有些复杂，并且需要在普通的西装套外再做一件材质比较特殊的大衣。当时我没有预订，因为说 2022 年才开始制作样板，我想着这时间也太久远了，无息贷款很致命。不过当下就要进入 2022 年了，我却对下船大衣套装心动了。犹豫再三，加了集单人的微信，赶上了末班车。我觉得还是很幸运的，斗琴礼服已经满 35 人截单，下穿大衣我是第 34 位。并且在 2021 年 12 月初的时候，集单人开始收订皮箱的制作费用。我在皮箱截单后走了集单人的后门加了进来。确实很幸运，我没有犹豫，抓住了最后的机会。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-17.png" alt="one-sixth-scale-figures-2021-17.png">&lt;span class="caption">※ 1900&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-18.png" alt="one-sixth-scale-figures-2021-18.png">&lt;span class="caption">※ 1900 头雕&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/one-sixth-scale-figures-2021-19.jpg" alt="one-sixth-scale-figures-2021-19.jpg">&lt;span class="caption">※ 皮箱&lt;/span>&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>兵人和其他影视周边一样，是故事的实体延续。每当我看到某个兵人，就能想起这个角色在某部作品中的故事。通过兵人，也能深入了解人物形象的设计，加深对于电影内涵的感悟。这就是收藏之乐趣所在。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/my-collections-of-one-sixth-scale-figures-in-2021/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
国产电影发展不该如此</title><link>https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/</link><guid isPermaLink="true">https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/</guid><pubDate>Sat, 04 Dec 2021 22:43:00 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">看&lt;/span>一看今年 12 月的影院排片，清一色的国产电影。最近上映的唯一一部引进的欧美片，还是早在 2020 年初就已经在其他地区上映过的《银行家》，我查了一下本地的电影院，根本就没有为这部电影排片。《密室逃脱 2》在确认引进后已无下文；《黑客帝国 4》拖到了 1 月中旬才上映，那时候流媒体资源已经满天飞，两周后就是春节档；《蜘蛛侠 3》更是杳无音信……今年的下半年，我只在电影院看过四部电影——国内的《长津湖》和《扬名立万》，国外的《沙丘》和《007：无暇赴死》。作为一个小小的电影爱好者，面对如此的局面，我对当下的影视现状以及未来的发展感到很不乐观。遂写下此文，分若干部分表达一下我的想法。段落之间思维可能有些跳跃，请见谅。&lt;/p>
&lt;h2 id="电影于我">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#电影于我" class="anchor-link" aria-label="电影于我">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>电影于我&lt;/h2>
&lt;p>我知道很多人只是把电影当作是休闲娱乐的一种，平日并不会过多关注什么时候有哪部电影发布预告，有哪部电影上映，电影的导演是谁，主演有谁。只会在电影上映后，听到朋友说，最近有某某电影票房大爆，便也抽空去打发时间。最近经常在网上看到一些人对某些电影的好坏开展辩论，其实双方观点产生分歧是必然的的，因为可能你很喜欢这部电影，但对面只是一个普通的观看电影的路人。在他眼里，他花了钱，就想放松一下，并不在乎电影讲了什么故事，这个故事有什么含义。&lt;/p>
&lt;p>对我来说，电影是一种独特的艺术形式，通过视听结合的方式向观众讲述一个故事。所以在看电影的时候，我会了解很多有关电影拍摄背景，电影的配乐和服装设计等等一些周边信息。看过电影之后，我会反反复复温故剧情，回味这在两三个小时里导演试图传递给观众的情绪。每当我看到有些没看懂某部电影的人对这部电影挑毛拣刺，我会感到很诧异和无奈。你可以不懂这部电影，但为什么要去见践踏它呢？&lt;/p>
&lt;h2 id="票房对电影评判的影响">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#票房对电影评判的影响" class="anchor-link" aria-label="票房对电影评判的影响">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>票房对电影评判的影响&lt;/h2>
&lt;p>评判电影好坏的标准是什么？我从来不认为是票房，而是电影所讲述的故事本身的质量。但在观看一些视频博主做的影评视频的时候，有些人总是无脑拿票房来评判电影的好坏，说电影 A 的票房有多少多少，再看看电影 B 的票房才多少，B 就是烂片。当你试图取辩驳的时候，这些人就开始用「人民」当挡箭牌，说票房高的电影是人民群众喜爱的电影，人民群众喜爱的电影就是好电影，那些票房低的电影就是烂片。你不同意他的观点，那就是反对人民群众。有些人极端地批判欧美电影，总是说这类电影传播了美式价值观，不值得观看。有些人过渡吹捧国产平庸之作，看不起台湾的电影，认为他们的电影仅仅是岛内的自娱自乐。这些人的言论显然是站不住脚的。由此可以看出，不是所有人都有对电影好坏的认知能力，一些人会受到大环境和其他人观点的影响，从而产生主观偏差。&lt;/p>
&lt;p>然而，现在国内的影视行业，最看重的还是票房。赚钱当然是导演拍摄电影的目的，但拍电影并不仅仅是为了赚钱。我认为更重要的是对艺术的追求，想通过电影将自己构建的故事展示给观众，将自己的想法传播给观众。每次看国产电影，最大的特色就是在开头的龙标之后，黑底白字展示一堆电影投资方。每部电影的诞生都有数十家公司支撑。这些公司为什么会给这部电影投资？当然是觉得，这个故事能赚钱，公司毕竟是需要收益的，他们就想赚取更多地钱。&lt;/p>
&lt;h2 id="国产电影缺少原创">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#国产电影缺少原创" class="anchor-link" aria-label="国产电影缺少原创">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>国产电影缺少原创&lt;/h2>
&lt;p>我还注意到了一个很值得思考的现象——国产电影很多都是非原创故事。比如改编自某某小说，比如翻拍自某某电影，比如根据历史故事、神话传说进行再加工。原创故事很少很少。为什么大多数导演选择了翻拍或改编？我觉得，因为原有的故事情节已经足够吸引人，基于这样一个好故事，拍摄出来的电影，也不会差到哪去。这样既能省去写原创故事的精力，又能在拍摄前就保证剧情的口碑，最后的票房收益风险很低。虽然说很多翻拍或改编的电影都取得了很好的口碑和票房。翻拍也是需要导演有一定能力的，能把一部电影翻拍好，也是本事。但我认为，拍摄原创故事电影，是电影行业发展必不可少的环节。&lt;/p>
&lt;h2 id="某些利益的冲突">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#某些利益的冲突" class="anchor-link" aria-label="某些利益的冲突">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>某些利益的冲突&lt;/h2>
&lt;p>为什么最近一些很受欢迎的好莱坞电影并没有同步在大陆上映？可能和多方面因素有关。首先是中美关系变得不稳定。美国在多方面搞小动作试图破话中国的稳定发展。因此，电影这种作为价值观输出的有效媒介，被审查得死死的。谁会想到，在十二月份，明明还有外国电影的名额，不同步上映同期热门电影，而是选择引进了一些印度俄国几年前就已经上映过的听都没听说过的电影。这就显得有些小家子气，甚至有些恶心——你可以不引进外国电影，但不要白白浪费引进名额。因为就算引进了这些无名电影，影院也不会给这些电影排片。&lt;/p>
&lt;p>其次，年末的影院票房惨淡，电影局却依然在给某些国产电影（《长津湖》）开路，试图榨干它最后一丝价值以维持影院票房的收益。甚至有某部国产电影（《误杀 2》）出现提档的骚操作，以至于为了保证这部电影的票房，让《黑客帝国 4》的上映日期安排在了 1 月份这个尴尬时期。《长津湖》取得国内票房第一的成绩值得称赞，但何必一味冲击票房成绩而出现这样不公平的竞争。&lt;/p>
&lt;h2 id="电影题材应当多元化">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#电影题材应当多元化" class="anchor-link" aria-label="电影题材应当多元化">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>电影题材应当多元化&lt;/h2>
&lt;p>我理解有些人为什么会对《长津湖》这样电影取得的成绩感到不满。因为这部电影拥有主旋律这一优势，掩盖了电影剧情和特效制作的缺陷。主旋律是要有的，因为中华民族需要团结，需要铭记过去经历的磨难。但主旋律不应该是挡箭牌和通行证，主旋律电影也应当接受观众的批评。这些年国内总是想拿一些主旋律和票房高的电影去参加西方的电影奖，想必成功的概率为零。这些电影虽然在国内取得了很好的成绩，但实际质量却很一般。有些人会说，国产电影，没必要关注那些西方国家的奖项。但华语电影中质量还算可以的金马奖，却被台湾玩脱了。再看看现在的金鸡百花颁的那些奖项，有什么价值？和小孩子过家家一样，不知道评价最佳演员的标准是什么。&lt;/p>
&lt;p>电影题材应当多元化，不能说看到什么题材赚钱快，就拍什么题材。什么电影票房高，就给什么电影颁奖。现在的电影题材逐渐同质化，远不及当年的百花齐放百家争鸣了。虽然金马奖现在成为了台湾地区自己玩的奖项，但每年评出的电影确实挺好的，看完后觉得耳目一新。这一点值得我们反思。&lt;/p>
&lt;h2 id="最后的感慨">&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/#最后的感慨" class="anchor-link" aria-label="最后的感慨">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>最后的感慨&lt;/h2>
&lt;p>国内电影不应该故步自封，把自己放在一个受保护的小圈子里自由发展。而应该走出舒适圈，学习接纳更多的新东西，敢于接受其他电影的挑战，提升自身的质量，突破题材的限制。悲哀的是，在当下环境中，就算是陈凯歌和他的父亲拥有当年的水平，也拍不出《霸王别姬》了。就算拍出来，也会被剪得面目全非。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/" target="_blank" rel="noopener">https://guanqr.com/life/films/the-development-of-chinese-movie-should-not-be-like-this/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
写在答辩结束后</title><link>https://guanqr.com/life/ideas/induction-thesis/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/induction-thesis/</guid><pubDate>Wed, 03 Nov 2021 20:27:59 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">昨&lt;/span>天，我终于结束了试用期间的第一次入职答辩。试用期总共有两次答辩，第一次需要总结自己在岗位中的不足之处并提出改进计划。第二次是总结计划的实施情况和提出更进一步的工作计划。这次答辩本应在十月中旬进行的。但上个月部门领导们忙于校招，我们的答辩时间就往后拖延了半个月。&lt;/p>
&lt;p>答辩报告从九月底就开始写了，从开始到现在，中间又做了很多东西，报告里的内容也是删删改改，直到答辩前一天才交给上级领导审核。领导给了很多修改意见，匆忙修改后就提交了。答辩的时候，小小的会议室里各级领导还有企管部的人围坐在一起，我在显示屏前紧张地报告。二十分钟的时间，似乎只是喘了口气就结束了，出门后，看到门口下一个等待答辩的同事，我只是笑了笑便回到了自己的办公桌前。&lt;/p>
&lt;p>那些和我一起入职的同事们之间聊的最多的就是跑路的话题。有的说，他的同学在哪家公司工作，工作压力怎么怎么样，干了多长时间受不了直接跑路了。有的说，隔壁课室又有谁走了，他和上级领导关系僵硬，家里人给他找了份国企的工作。然而我们课室的几位新人，到现在为止没有一个跑路的。可能是由于我们的领导脾气比较好，说话很温和，同事之间的关系不会变得僵硬，也可能是因为他们都是研究生，公司给的待遇不错。隔壁做 HUD 的课室，领导天天在办公桌前训斥他的员工。要是我在他们那里，或许也待不下去了。&lt;/p>
&lt;p>今天那位差不多和我们一起进来的某个 211 大学的研究生，结束了他三个月的实习。他似乎决定毕业后直接来这工作，HR 也答应了他这三个月实习的时间可以算在试用期内。晚上下班后，我们和他一起到公司边上的一家店里吃烧烤，聊天聊地。&lt;/p>
&lt;p>似乎现在愿意做光学设计的学生越来越少，大家都想要选择图像处理这样偏计算机的方向。所以，顶尖学校的学生出来大部分都去了算法岗，光学设计就留给了从其他学校出来的人。我现在的选择正如当初的毕业设计选题，我拒绝了那些做图像处理的课题，而是选择了越来越冷门的镜头设计，因为我觉得这是才是我所喜爱的领域，学了光学就应该做和光有关的东西，想做图像处理，为什么不直接去学计算机。&lt;/p>
&lt;p>十月初的时候，考研开始报名。去年考研失利，那时的我想着再给自己一次机会，想在今年再试一试，于是我又报了名。去年加我好友的一个同样考光工的学长，在成功考上后，今年主动成为了非官方招生宣传员，尽职尽责地为研究所做宣传。他时不时地问我的复习情况，问我时间是否还充裕。我每次都回答他，还好，复习的如何如何。但我不是一个能接受如此「热情」的人。我很反感一个我根本不认识不了解的人，向我展示出一种很关心我的样子。在我成功报名后的某一天，工作的时候，他给我打电话，建议我写邮件问一问招生办的老师今年报名的情况，或许报名学硕的人已经饱和了。我答应了他，却没有写邮件进行询问。此后他接二连三地问我老师有没有回信，我终于无法忍受这样的局面，告诉他我不需要如此地关心，便删了好友。&lt;/p>
&lt;p>后来的几天，我反反复复问自己，又一次参与报名，这是自己想做的事吗？不是。我不想为自己的一次失败找借口，说是发挥失常，再考一次就能考上。不能因为看到身边很多人都读了研，所以自己也必须要读研。我努力找到了一份自己还算认可的工作，我也不想对自己争取到的东西说抛弃就抛弃。于是在报名结束前的那个晚上，我重新登录了研招网，取消了报名。最终我还是退缩了，放弃了。面对现实，我还是没有破釜沉舟的勇气。&lt;/p>
&lt;p>向前看吧，现在最要紧的就是按照自己的计划，努力提升职业技能，顺利在明年年初完成转正。未来的路还有很长，脚踏实地是关键。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/induction-thesis/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/induction-thesis/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/introspection/">反省</category></item><item><title>
理论与实践的差异</title><link>https://guanqr.com/life/ideas/theory-and-practice/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/theory-and-practice/</guid><pubDate>Sat, 02 Oct 2021 21:19:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">大&lt;/span>学期间学会的专业技能，最主要的就是光学系统设计。给定系统各项参数，到 Zemax 或者 Code V 中将整个光学系统构建出来，然后对其进行成像质量的优化。设计完成后，输出的结果包括系统每个镜片每一个面的曲率、半径、厚度、材质等参数以及结构图纸。项目中，考核的主要是镜头的 MTF 在特定频率是否达到要求，以及光圈的大小还有成像面的大小是否达到要求。&lt;/p>
&lt;p>当时的设计，并非仅仅是完成天马行空的设计，也考虑了实际生产中的情况。镜片材质上要选择成都光明库中常用的环保材质玻璃。每一个面的曲率尽量接近学校加工厂现有模具的曲率。这些要求自然是为了考虑降低加工的成本。&lt;/p>
&lt;p>但在公司的研发岗位，我终于了解，真真正正要将设计完成的镜头制作出来，并非仅仅需要解决上述的几个简简单单的问题。比如，需要考虑公差对成像的影响。一个光学系统中的每一个镜片对成像质量的影响大小都是不同的，因此需要对每一个镜片赋予合理的公差以降低成本和保持成像质量。又比如，需要考虑材料的热膨胀。在极端环境和光能转化成热能的过程中，镜片和支架都会产生膨胀或收缩。因此需要合理设计结构，让光学系统的膨胀量和支架的膨胀率相互抵消，以减小因环境变化而引起的成像质量的衰减。&lt;/p>
&lt;p>在一次次培训和实践中，我学到了很多。当我汲取了这些对我而言是完全崭新的知识，我豁然开朗，甚至觉得这些东西很神奇——这是多少前人通过实践总结出来的经验。看着身边有利用假期前来实习的研究生小伙伴，我也有一丝丝的懊悔，为什么我没有想过也利用假期来实习，这样就能早一点学到这些技能，提前学习很多到生产制造需要考虑的关键因素。&lt;/p>
&lt;p>这就是理论和实践之间的差异啊。当我们翻烂了一摞摞的课本，记住了书中的每一个知识点。但我们并没有想过，仅仅靠这些所学的理论就能做出所需要的东西吗。那些做过的物理练习题，都忽略了空气和温度的影响因素，仅仅考虑了理想状态的运动。但在这个世界上并没有理想状态。并且因为制造条件的限制，尺寸也无法达到完美无瑕。&lt;/p>
&lt;p>人生也是如此。学会了很多大道理，面对朋友向自己的倾诉，说的头头是道。但真正到了自己需要面对问题的时候，却真的缺少实战的经验。生活没有理想状态，现实的一切都有棱有角，在阻碍着想要匀速直线运动的你。此时，就需要学会，如何接受这些现实，调整自己的姿态，减少外界对自己的阻力，以运行到最远的距离。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/theory-and-practice/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/theory-and-practice/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/reality/">现实</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
第一次请假外出</title><link>https://guanqr.com/life/ideas/ask-for-leave-for-the-first-time/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/ask-for-leave-for-the-first-time/</guid><pubDate>Sun, 26 Sep 2021 15:18:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>感觉自己是一个比较安于现状的人，习惯于每天规律的生活，不愿意打破现有的规律去做条条框框以外的事。在学校期间，我从未请过假。就算是有什么必须要做的事，我也会选择放在周末空闲的时候去做。形成这样一种行为的原因大概是，我不想让那些意外发生的事扰乱我本应做的事，如果为了意外的事而不得不做出改变，那可能会让我付出更多来弥补这种改变所引起的损失。&lt;/p>
&lt;p>说白了，就是嫌麻烦，多一事不如少一事。然而，就算你极力地避免惹上麻烦，麻烦也会主动找上你。我发现，这样突如其来的事故，会让我措手不及，我拼命想解决眼前的麻烦，好让我重新步入正轨，但这样急切的欲望，更让我陷入恐慌和焦虑。&lt;/p>
&lt;p>以上两段，是我对自己心态的剖析。放于本文的开头部分，是想让我自己看到自己的缺点，今后能够逐渐改正。&lt;/p>
&lt;hr>
&lt;p>八月底的时候，我收到了人生第一份工资。虽然第一份的工资比较少（第一个月只在岗两周），但看着银行卡里突然多出来的那笔钱，心情很愉悦。于是就开始计划怎么使用这笔钱。九月初的时候，我输入银行卡的支付密码——错误。这是张我大学刚入学的时候办理的银行卡，密码已经记不太清了。就这样输错了三次，银行卡被锁定了。然后我就使用银行的 APP 进行解锁，又输错了三次密码，锁上加锁——这下只能去银行解锁去了。&lt;/p>
&lt;p>我赶紧搜索最近的银行在哪里，周末开不开门。我不想在工作日请假去银行，既耽误了工作，又损失了工资。好在公寓附近的那家银行周六开门，我决定周六过去解锁。在这期间，我还询问了，密码锁住后银行卡是否需要挂失，是否需要重新办卡，重新办卡卡号能不能不变等若干问题。因为换号真的太麻烦了，我还要和公司说我工资卡要换个号。于是，在焦急的等待中，我盼到了周六——去银行，在自助机器一番操作，五分钟内，密码重置了，根本没有我想的那么复杂。&lt;/p>
&lt;p>看着我的账户恢复了正常，心里顿时舒畅了许多。&lt;/p>
&lt;p>不过就在上周五的时候，突然想起这个月发上就要发工资了，想看一看卡里有多少钱，结果发现账户状态又异常了——这次是双向冻结，不能取款也不能存款。这次我可记住了密码，并且这一个月以来我并没有动这张卡里的一分钱，怎么就被冻结了？莫非我做了什么违法的事被公安抓到了——那也不应该啊，如果真是那样的话，为什么只有这张银行卡被冻结了。&lt;/p>
&lt;p>于是上网搜索相关问题，发现很多银行卡被冻结的人，他们都是涉及到了网络赌博等非法牟利的行为。我一遵纪守法好市民，坐在家中都能躺枪……眼看就要发工资了，如果发工资那天，我的卡依然是冻结状态，这可真的太糟糕了。于是赶紧回去拿了身份证和银行卡到上次去的那家银行询问冻结原因，工作人员先是问我是不是玩了什么游戏。她的意思其实就是怀疑我参与了线上赌博，只不过说的委婉了一些。我连忙否认。她继续说，这是开户行冻结的，你需要去开户行问他们冻结原因。好家伙！我还要跑到杭州去。打电话问开户行什么时候上班，他们说这周日上班，可以周日过去。但这周日是全国统一的上班时间，我只好打破了自己的准则——请了人生中的第一个假。&lt;/p>
&lt;p>眼看着自己的支付宝里已经没钱了，如果这张卡不能解冻，卡里的钱用不了，新发的工资也入不了账，接下来的日子一定会很艰难。我赶紧预订了周日早上七点多去杭州的车票，算好了时间，到杭州东站后再乘坐地铁到银行，正好九点，赶上银行开门。&lt;/p>
&lt;p>周六的等待很艰难，我的内心很焦灼。我反复思考自己做了什么导致卡被冻结，最终察觉到，可能是因为这张卡我好几年没用了，账户里原本没有钱，直到今年八月份的第一笔工资到账，然后我又操作失误修改了密码，如此操作下来，会被系统认定为存在风险。想来想去，也只能是这个原因了。&lt;/p>
&lt;p>周日，我五点多久起床了，洗漱完，直接奔向了火车站。我一刻也不想多停留，只想赶紧冲去银行解决这个棘手的问题。九点，我准时到达了银行，进去取号，我的前面只有两个人。等到我的时候，我向工作人员说我的卡被冻结了，他查了查冻结原因，原来真的是长时间不用被停止服务了。他问我是否要保留这张卡，我说保留。他便让我提供社保证明，我说我才参加工作，还没有交满三个月的社保，而且是在宁波参加工作的。他就说这样的话就比较棘手了。他又问我之前在杭州开户的原因。我说我之前就在隔壁的浙大上学，这刚毕业参加工作。他说那提供学生证给他也行。我说我都毕业了，学生证都已经被销了，我也不会随身带着。我问他提供毕业证书可以吗，他说可以。我便从手机相册里翻出来之前照的毕业证书，他拍了张照取证。一阵操作后，我的卡终于解冻了。&lt;/p>
&lt;p>工作人员说，我现在在异地工作，一类卡如果出现了问题，只能回到这里办理，比较麻烦，还是建议销户，在工作的地方重新办张卡。我觉得现在处理这些问题还是比较麻烦的，在宁波办新卡，还要提供工作证明。等以后工作状态稳定了一些，再考虑这个问题吧。还好宁波离杭州不远，出问题半天内就能解决。剩下的事，以后再说吧。&lt;/p>
&lt;p>结果就是这样，焦虑了几天后，半个小时问题就解决了。之前的担心都是多余的。我终于能愉快地使用卡里的钱，安稳地等待这个月工资的发放，然后享受十一长达七天的假期。&lt;/p>
&lt;p>此前发生过很多类似这样的事情，突如其来的意外让我措手不及，然后就是一整天的焦虑，把问题复杂化，以最坏的打算考虑问题是否能被解决。可能是因为在过去的日子里我过于求稳，习惯了两点一线的生活，缺少了面对突发事情灵活应对的能力。希望通过这几次类似的经历，我能够吸取教训，尝试在平稳中接受波动。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/ask-for-leave-for-the-first-time/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/ask-for-leave-for-the-first-time/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/introspection/">反省</category></item><item><title>
半途而废：从骑行到货拉拉</title><link>https://guanqr.com/life/travels/give-up-halfway/</link><guid isPermaLink="true">https://guanqr.com/life/travels/give-up-halfway/</guid><pubDate>Mon, 20 Sep 2021 23:13:45 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">毕&lt;/span>业离校的那天，我没有把我的山地车带走，而是锁在了宿舍旁边的电动车充电车棚的栏杆上。当时我想着，反正过几个星期就要到余姚工作，把车子带回家，那我在余姚用什么交通工具？等我有空直接回学校一趟把车子带到余姚吧。&lt;/p>
&lt;p>骑山地车是我为数不多喜欢的运动。因为我喜欢山地车炫彩的涂装，变速器精妙的设计，刹车碟片如刀般的锋芒。无数个机械结构相互配合，让山地车成为了一件能够自由穿梭复杂路况的艺术品。&lt;/p>
&lt;p>趁着中秋假期，我买了张到杭州的车票，准备把那辆车子带回来。毕业后，学院发放了大三暑假那次竞赛的获奖证书，我让一位学弟代领了，这次顺便联系了他，一是取回我的证书，二是让他作为我进入学校的「内应」。&lt;/p>
&lt;p>因为是节假日，再加上杭州正在修地铁，路上的车很多，公交车龟速前进。到达学校门口的时候已经十一点了。学弟把证书给了我，我用他的校园卡穿过了校门。在此感谢一下学弟，百忙之中抽空来帮我。离开学校两个多月，如今再次进来，却是以校友的身份。我走到宿舍楼前，看到停放在电动车充电棚下的山地车安然无恙，心里的一块石头也就放下了。因为以前我的车总是被别人的车子剐蹭，车架已是遍体鳞伤，这次停在车棚下避雨，生怕被哪个没停稳的电动车砸到。虽然没有新的外伤，但由于长时间在外面风吹雨淋，车漆已经有些老化开裂。这是岁月的痕迹，也是我大学时光的见证。&lt;/p>
&lt;p>我的计划是直接骑山地车骑回余姚。查了一下全程大概 120km，按照最慢的速度，半天也能骑回去了。为什么有这个疯狂的想法呢？没有选择使用物流运输是怕我的车子受到磨损，此外，我很想找机会练一练骑行的耐力。高中的时候就很羡慕那些和朋友一起骑 318 国道进藏的人，骑行的路途虽然枯燥，但远离了城市和人群的喧嚣，更能体会生命的绽放。真希望自己这辈子也能走一趟川藏线。虽然现在这辆车算是捷安特高档的山地车，但从来没有发挥过它真正的用途，无论是越野还是长途山马，都没有经历过。所以，为何不借着假期这次机会，实现一次跨市骑行？路途不长，如果当天晚上没有回到公寓，在绍兴住一晚上也无妨。&lt;/p>
&lt;p>这个决定确实有些鲁莽，因为我并没有穿骑行裤，长时间骑山地车屁股肯定受不了，而且我还拎了一个帆布袋用来装证书、水瓶、充电宝、雨伞。没背背包是觉得太热了容易出汗。好在当天虽然是晴天，但温度不高，还时不时有凉风吹过。就这样我从校门口出发，路过西湖，跨过钱塘江。在高架桥上俯瞰到了杭州城站密布的铁轨，在跨江大桥上远眺江边的高楼大厦。我从未从这个角度观察过这座城市，川流不息的车辆，路边不断建设的高楼，这是这座城市律动的脉搏。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/give-up-halfway-0.jpg" alt="give-up-halfway-0.jpg">&lt;span class="caption">※ 远眺钱塘江&lt;/span>&lt;/p>
&lt;p>到了萧山区的某个路段，洒水车正在前方缓慢前行。前方的行人看到水枪中的水即将冲向自己，便急速向前奔跑。这洒水车司机着实没有人情味，见到路边的行人并没有减小水压。我见这洒水车行驶的太慢，这样跟在它身后可耽误不少的时间，便猛地向前冲去。结果，水枪中喷出的水流裹挟着路面的泥沙扑面而来，我的脸上，衣服上，裤子上，鞋上，都是泥点。这下真「爽」了。&lt;/p>
&lt;p>离城镇越来越远，建筑越来越少，道路两旁都是田地或野草，时不时看到有些信奉佛教的村庄建筑，远处还有喇叭播放的经文吟诵的声音。没想到这边信奉佛教的人还挺多。&lt;/p>
&lt;p>下午三点左右，我路过了萧山机场。看了看手机上记录的行驶距离，才走过了 30km，还没到绍兴，这样下去，可能到半夜才能到公寓。这远比我预期的速度慢。要不就在绍兴住一晚上？第二天再在绍兴逛逛？但穿着这身脏了的衣服在外面过夜，也没有什么心思去玩耍。我只想尽快回到自己的小窝，吹着空调。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/give-up-halfway-1.jpg" alt="give-up-halfway-1.jpg">&lt;span class="caption">※ 帆布袋挂在山地车把上&lt;/span>&lt;/p>
&lt;p>看着前路终点遥遥无期，我的内心已经懈怠。罢了，拿出手机，叫了辆货拉拉。坐上车，睡了一觉，回到了公寓。这次计划算是失败了。虽然有了行动，但中途却被自身的懒惰以及无尽的疲倦打败。不过好在我的山地车终于又回到了我的身边。余姚的山有很多，地势很适合山地车骑行。以后的周末有的是机会骑车出去欣赏风景。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/give-up-halfway/" target="_blank" rel="noopener">https://guanqr.com/life/travels/give-up-halfway/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/cycling/">骑行</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/ningbo/">甬城</category></item><item><title>
当下的网民质量堪忧</title><link>https://guanqr.com/life/ideas/netizen-quality/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/netizen-quality/</guid><pubDate>Sun, 29 Aug 2021 08:22:33 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>越来越觉得，现在各种网络平台上的用户质量，不太行。&lt;/p>
&lt;p>我觉得用户质量可以用两各方面进行评估：素质和认知水平。素质是一个无法管控的东西，一个人在现实生活中可能文质彬彬，但在虚拟的网络中，他可能会变成一只恶魔，肆意攻击别人。这张恶魔的皮只是掩盖他外表的工具，还是说这恶魔才是他的内心，无人可知。但认知水平，是可以提升的。认知水平和人的年龄，学历，生活履历都有关系。遇到的事多了，学的多了，自然就懂得多了。懂得多了，就比较容易看清事物的真相。&lt;/p>
&lt;p>每次进微博，我首先看的就是热搜。了解一下当时正在发生哪些大事，或者是哪些奇葩的事。这里说的大事，就是各种国家层面的新闻，以及各种明星的大事件。奇葩的事，就是一些莫名其妙的账号发的莫名其妙的东西。前者上热搜我觉得很正常，因为不论是政治还是娱乐，这都是现在人们日常生活中经常关注的领域，很多人都会使用微博来了解新闻，来追星，我认为这也是微博这种东西能够一直存在的部分原因。至于后者，比如说发了一些所谓的开拓视野的东西，「XX 是 XX」，「XX 居然能 XX」，又如发了一些几百年前都已经为人所知的旧闻，这样的话题竟依然能够登上热门，这是让我很诧异的。&lt;/p>
&lt;p>一些很普通很普通的日常生活的热搜话题，基本格式就是「XX 居然能 XX」，表达了用户对于这一现象感到惊讶。顺着这个话题，看看那些在这个话题下发表言论的人，我才发现，原来很多人对于这些我认为很常见的的东西，竟是第一次接触。&lt;/p>
&lt;p>前段时间，日本准备向海洋排放核废料的消息引起很多人的愤怒，而后很多人拿着畸形或者变异的段子开玩笑。有些营销号借着这个话题，发了一个日本双头乌龟的视频，上了热搜。显然，引爆这个话题的关键词有两个，「日本」和「双头」。人们惊讶于日本竟然真的出现了变异的生物。却根本不会深入思考，双头乌龟究竟是否是极低概率的变异。事实上，乌龟在蛋中的发育阶段很容易受到环境温度湿度的影响而变异，因此变异的龟很常见，双头龟反而能够卖出更高的价格，算是一种「宝物」。&lt;/p>
&lt;p>要不是我养过龟，我是不会知道龟类很容易变异的。可就算大多数人并不知道这件事，双头龟的图片和视频，在各种媒体网站上都能够搜到，有些是几年前就上传的，很显然，乌龟的变异并不能怪罪到日本头上。众多网友面对这一话题，并没有思考过乌龟变异的真正原因。有些知道这一知识的人站出来向那些不了解事情真相的人做了简单的科普，但那些人却选择了无视。他们只愿意相信，是日本造成的变异。&lt;/p>
&lt;p>哔哩哔哩在几年前的环境是很友好的。但随着陈睿&lt;del>叔叔&lt;/del>的做大做强，一些其他视频平台的创作者和用户都涌入了 b 站，现在视频下的用户言论充满了火药味。他们不知道鬼畜是什么，嘲笑作者的剪辑手法很拙劣。他们指着 AI 换脸希特勒的视频，大骂作者支持法西斯主义。他们举着爱国的大旗，在外国人的视频下面阴阳怪气。他们视自己为无产阶级，给记录生活的作者带上小布尔乔亚的帽子，他们感叹 b 站逐渐微博化，却不曾想自己正是其中把水搅混的一员。&lt;/p>
&lt;p>在热门争议的视频下面，很多人会复制粘贴不知道是谁编写的大段文字，试图用所谓的大道理说服别人相信自己的观点。似乎人人都是相关领域的专家——你才多大岁数啊，互联网网民学历统计，本科以上的人所占比例很少很少，怎么到这里人人都变成科学家，历史学家了？&lt;/p>
&lt;p>近期漫威上映了电影《尚气与十环传奇》。这部电影从公布开始，就有很多营销号开始带节奏说辱华。把漫威漫画古早时期的傅满洲拿出来和满大人划等号。攻击主演的长相是西方人眼中的亚洲人刻板印象。说这部电影的剧情就是美国儿子打中国爹的故事。很多人接受了这样的宣传，对那些想要看这部电影的人进行攻击和辱骂，说他们是香蕉人，说他们是卖国贼。说这部电影狗都不看。&lt;/p>
&lt;p>从漫威宇宙的第一部电影《钢铁侠》开始，十戒帮就出现过。托尼·斯塔克在战场上就是被十戒帮抓住，才造出了第一代战甲。在《钢铁侠 3》中，托尼和称自己为满大人的反派作战，而这部电影也是中国投资的。那时候，关注漫威的人还不多，那时候，人们只是觉得电影里出现了满大人很惊喜。为什么到现在，一部填坑之作，一部拓宽宇宙背景的电影，一部成家班动作指导的电影，一部充满了标准普通话和山海经神兽的电影，一部为亚裔拍摄的在艺术上设计考究的电影，让韩国人认为在吹捧中国人的电影，却被中国人指责辱华。&lt;/p>
&lt;p>如此解释，也会被那些激动的「爱国者」们说是为漫威洗地，被西方人洗脑。殊不知，自己已经被国内的媒体洗成了盲目自大的人，在自大的外表下，却透露了骨子里的自卑，永远觉得西方人看不起中国人的自卑。当年，大清的皇帝，坐在富丽堂皇的宫殿中，面对西方来的洋人，展示着自己无限的优越感，却不知将来的某一天，西方先进的武器冲进了京门。如同儿戏一般愈演愈烈的的争论，让外网的吃瓜群众们对墙内的人愈加嘲讽。就像很多人经常嘲笑台湾网友井底之蛙一样，境（井）外的人，也在看着现在境（井）内的这些人。&lt;/p>
&lt;p>这样的例子还有很多，就不一一举例。打开 b 站，打开贴吧，到处都是鲜活的例子。这些无不体现了用户质量之杂。&lt;/p>
&lt;p>现在的年轻人，出生在信息爆炸的时代，生活在信息爆炸的时代，每天接收了那么多乱七八糟的信息，已经懒得去思考自己获取到的信息是否是假的了。看到某处着火了，就凑热闹再去倒上一桶油，盼着火势更旺一些。烧对了，那么就证明自己是正义人士，觉得自己是一名合格的社会主义新青年。烧错了，就立马站到对面，指责其他那些添乱的人，说他们是跟风的墙头草，这样显得自己依然很正义。&lt;/p>
&lt;p>在自己不了解的领域，不要随意发表言论，也不要轻易听信别人的言论。默默看着就好。何必要复制粘贴别人的言论，站在别人的队伍里和持另一观点的人对峙。争论来争论去，双方都认为自己是理中客，你永远相信你认为正确的观点，对面也永远相信他自己的观点，连求同存异的过程都没有，永远不会争论出结果，甚至最终会演变成人身攻击。这样做只会显得你很无知。&lt;/p>
&lt;hr>
&lt;p>为什么总有一种互联网上人们的素质很差很差的感觉？我和朋友们爱称那些发表智障言论的人是「小学生」。我总觉得能发表那些言论的人，如果不是小学生，那可能也是一二十岁的人。但事实上，一些被曝光的「键盘侠」，已经有三四十岁了。由此可见，网民的质量和年龄并没有太多的关联。只是由于互联网普及地越来越广泛，那些低素质的人也会上网了。&lt;/p>
&lt;p>面对这样的互联网环境，我已经很少在那些平台上发表自己的言论了。我总担心，有人会在我的言论下攻击我的观点。和与自己观点不一致的人争论很累，在互联网匿名的环境下争论更累，争论是没有意义的事。看到那些可笑的人发表的可笑言论，我也就一笑而过了。他活在他的世界，我活在我的世界，我们互不干扰。&lt;/p>
&lt;p>我认为，正确引导网民的认知是比较重要的。各种大型媒体一定要做到客观公正，不乱带节奏。但既然是媒体，就很难做到客观公正，因为流量是赚钱的关键，而引爆话题是流量的关键。断章取义，夹带私货是各种媒体常用的手段。不要总是嘲笑西方媒体的那些骚操作，我们国内的媒体也会这样，&lt;del>在这里就不点名观察者网了&lt;/del>。&lt;/p>
&lt;p>让我有些失望的是，共青团中央的媒体账号有时候也会发一些很别扭的东西。在我的心目中，共青团是很神圣的。但共青团下的宣传部门，是不是有些问题……关注共青团账号的大都是年轻人，我相信有很多未成年人，这一群体对于事物的认知还并不全面，他们愿意相信共青团这样的有权威的组织。因此，我觉得，共青团就不要和其他媒体一样，发一些带节奏，或者阴阳怪气的东西。如果过了一段时间，舆论走向变了，那么那些带节奏的言论就垮了，人们心目中那个很权威的形象也垮了。自己煽动的错误舆论很容易反噬自己。&lt;/p>
&lt;p>我还是躺在自己的小窝里，自娱自乐吧，如此甚是惬意。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/netizen-quality/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/netizen-quality/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/introspection/">反省</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
请尊重文章作者</title><link>https://guanqr.com/life/ideas/please-respect-the-original-author/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/please-respect-the-original-author/</guid><pubDate>Sun, 15 Aug 2021 08:11:58 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>周无意间发现，我以前写的几篇文章被人搬运到了某万恶网站 CSDN 上。搬运文章我并不反对，因为这也能让更多的人看到我的文章。但我的文章是「署名」的，搬运到别的平台，并不声明文章原作者也就算了，你好歹将文章类型设置为「转载」啊，为什么直接把设置成了「原创」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/please-respect-the-original-author-0.png" alt="please-respect-the-original-author-0.png">&lt;/p>
&lt;p>我的文章第一发布平台是本博客网站。第二发布平台是微信公众号。这些被搬运到 CSDN 上的文章结尾，都留着我在微信公众号上的文章才会有的「推荐阅读」和「订阅二维码」，而且由于是直接复制粘贴，文章内我精心配置的页面布局并没有体现出来，只有那种类似于网页 CSS 样式未加载完的简陋文本。看来这位搬运工是从我的微信公众号搬运的文章，而且是无脑搬运。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/please-respect-the-original-author-1.png" alt="please-respect-the-original-author-1.png">&lt;/p>
&lt;p>于是，直接从 CSDN 上联系客服，向客服说了有用户侵权的情况，并提交了原文章进行比较。虽然说 CSDN 很烂，但有一说一，客服比很多网站要强。办事效率很高，三分钟内就把侵权的文章删除了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/please-respect-the-original-author-2.png" alt="please-respect-the-original-author-2.png">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/please-respect-the-original-author-3.png" alt="please-respect-the-original-author-3.png">&lt;/p>
&lt;p>而后，我试着搜索和我有关的关键词，竟发现还有人在 CSDN 的平台上卖我的博客前端代码。我竟不知道说什么才好。这种东西有什么价值吗？何必要费尽心思打包后放在网络平台，还按照 5 积分的价格出售。这种东西，真的会有人要吗？&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/please-respect-the-original-author-4.png" alt="please-respect-the-original-author-4.png">&lt;/p>
&lt;p>这样的现象如果只靠被侵权的人独自去制止，肯定是忙不过来的。因为总有一些人会轻而易举的越过别人设置的道德界限。我只是举报了那些在我的文章上声明原创的盗窃者，其他一些文章虽然没有署上我的名，但声明了是转载的，我就睁一只眼闭一只眼，没有前去理论了。如果为了这种事而浪费自己的时间和精力，大可不必。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/please-respect-the-original-author/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/please-respect-the-original-author/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/copyright/">版权</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
初次来余姚</title><link>https://guanqr.com/life/travels/the-first-time-to-yuyao/</link><guid isPermaLink="true">https://guanqr.com/life/travels/the-first-time-to-yuyao/</guid><pubDate>Sun, 01 Aug 2021 08:39:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>七月十五号的时候，我从家乘高铁来到了余姚。七月初刚刚告别学校，两周后匆匆前往入职。这期间做了入职体检，拔了两颗智齿，完全没有留给我一些放纵的时间。&lt;/p>
&lt;p>此前我没有来过宁波。浙江省内，我只去过杭州和嘉兴。在我的第一印象中，宁波是一个制造业发达的城市，需要很多劳动力，吸引了大量外地人来这里打工。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-0.jpg" alt="the-first-time-to-yuyao-0.jpg">&lt;span class="caption">※ 高铁出站口&lt;/span>&lt;/p>
&lt;p>高铁站的出口，集团派了工作人员来接站。我和四个新人一起乘车到北郊公寓办理了住宿手续。公司给应届生提供了两年的住宿服务，省去了一大笔租房的钱，还是很不错的。按照规定，本科生住双人间，研究生住单人间。但宿管告诉我们，单人间余量很多，可以选择住单人间。在我看来，两种选择各有各的好处，单人间比较自由，是属于自己的私人空间，双人间热闹，平时有说话的人，互相有个照顾。宿管说如果只有一个人选双人间，就很可能会分配到和老员工住在一起，那还是算了吧，看到那几位小伙伴都选择了单人间，我也选择了单人间。要说住宿的地方有什么缺点的话，那就是住的地方很偏，远离了热闹的市区就是远离了服务业。吃饭购物什么的很不方便。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-1.jpg" alt="the-first-time-to-yuyao-1.jpg">&lt;span class="caption">※ 我的小屋&lt;/span>&lt;/p>
&lt;p>余姚是宁波的一个县级市。下高铁后看着余姚的建筑和交通，总觉得和我一直生活的四线城市差不多，很多只有一两层的小楼，公交少，交通不太便利，路上的司机也很狂暴——这和杭州形成了鲜明的对比。然而物价却属于浙江的高水平，听说这几年楼价长得也很快。公司的产业基地在北郊。远离了本来就不太发达的市中心，郊区看起来更是不太起眼的小城。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-2.jpg" alt="the-first-time-to-yuyao-2.jpg">&lt;span class="caption">※ 公寓门口的村庄&lt;/span>&lt;/p>
&lt;p>十六号办理了入职手续，签订了正式的合同，我拿到了属于自己的工作证。HR 和我们讲述了接下来的应届生培养计划：一周的集团培训，一天的公司培训，还有产线实习，转正答辩等等。当天的入职手续结束前，集团前台的小姐姐带我们参观了集团的展厅。介绍了集团的发展历程。这些其实我在大学期间就了解得差不多了，毕竟我们学院和集团之间有很密切的合作。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-3.jpg" alt="the-first-time-to-yuyao-3.jpg">&lt;span class="caption">※ 工作证&lt;/span>&lt;/p>
&lt;p>周末的时候，趁着正式入职前的空闲时间，逛了逛余姚的几个景点。余姚最著名的人物要属「王阳明」了。很多景点都用他的名字命名。首先去了龙山公园。大热天的，如果去外面玩的话，到山里的树荫下乘凉是不错的选择。公园里的人很多，有绕着山腰跑步健身的人，有坐在树下椅子上聊天的人，还有带着孩子玩耍的人。山上的建筑都充满着历史的痕迹。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-4.jpg" alt="the-first-time-to-yuyao-4.jpg">&lt;span class="caption">※ 龙山公园（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-5.jpg" alt="the-first-time-to-yuyao-5.jpg">&lt;span class="caption">※ 龙山公园（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-6.jpg" alt="the-first-time-to-yuyao-6.jpg">&lt;span class="caption">※ 龙山公园（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-7.jpg" alt="the-first-time-to-yuyao-7.jpg">&lt;span class="caption">※ 龙山公园（四）&lt;/span>&lt;/p>
&lt;p>下山后，又去了阳明古镇。阳明古镇就在龙山公园的对面。这个地段车水马龙，是北郊荒僻之地不能相比的。说是古镇，看起来其实就是开发的一个旅游景点。仿古的建筑，各种充满优雅风韵的小馆。古镇前就是姚江。江边的店铺在岸边摆放着桌椅，很多游客在这里休息。通济桥横跨江水两岸，将历史与现代连接在一起。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-8.jpg" alt="the-first-time-to-yuyao-8.jpg">&lt;span class="caption">※ 阳明古镇&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-9.jpg" alt="the-first-time-to-yuyao-9.jpg">&lt;span class="caption">※ 通济桥&lt;/span>&lt;/p>
&lt;p>河姆渡遗址距离我住的地方太远了，就没有去参观，以后找机会再去吧。&lt;/p>
&lt;p>入职的第一周，我们开启了新人培训。三天讲座和考试，两天户外拓展活动。我和几位同是车载公司研发二部的以及几位光电公司的新同事分在了一组。通过破冰活动我们熟悉了彼此。接着就是长达三天的无聊讲座。讲座的内容就是宣传集团的企业文化，进行安全教育等等。每天坐在椅子上听上一天的讲座，还要积极回答问题赚取积分卡为小组贡献积分，这部分成绩是转正考核的一部分。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-10.jpg" alt="the-first-time-to-yuyao-10.jpg">&lt;span class="caption">※ 户外拓展：流程球&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-11.jpg" alt="the-first-time-to-yuyao-11.jpg">&lt;span class="caption">※ 户外拓展：品管圈&lt;/span>&lt;/p>
&lt;p>户外拓展的训练基地在北仑区，距离余姚很远，我们是乘坐大巴车过去的。晚上住宿的地方是很壮观的十二人间，这属于只要有一个人打呼噜都别想睡觉的环境。我们去的时候，看到训练基地有一些小孩子在参加训练。不知道是家长自发组织的还是学校要求的，那么小就参加类似军训的集体化训练，确实能够让孩子学习到不少东西。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-12.jpg" alt="the-first-time-to-yuyao-12.jpg">&lt;span class="caption">※ 户外拓展：华为三砍&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-13.jpg" alt="the-first-time-to-yuyao-13.jpg">&lt;span class="caption">※ 户外拓展：终极合作&lt;/span>&lt;/p>
&lt;p>我在大二的时候参加过户外拓展。这次游戏的内容和那时候差不多。就是通过游戏教育我们，要有团队意识，懂得合作，体会职场规则等等。训练基地的伙食很好。可能是我比较喜欢清淡口味饭菜的原因，这里的菜品非常符合我的口味，每次都吃的很饱。在两天的游戏中，我们小组的成绩从第一天的倒数第二名，到第二天逆风翻盘获得第五名，真是充满了惊喜与满足。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-first-time-to-yuyao-14.jpg" alt="the-first-time-to-yuyao-14.jpg">&lt;span class="caption">※ 户外拓展大合影&lt;/span>&lt;/p>
&lt;p>不过说真的，很多公司一说搞团建什么的，就要去这种地方做游戏，我觉得，没什么意思。&lt;/p>
&lt;hr>
&lt;p>我乘坐高铁的时候，是从开封北站出发，到南京南站转车，再到余姚北站。前脚刚离开河南，河南就发生了暴雨水灾，在南京歇息了一个多小时，后来南京疫情爆发。我以为附带了幸运 BUFF 成功脱险，却没想到在余姚正面迎击了台风。公司门口的道路积水很深，正式到工作岗位的第一天，公司就决定放一天假。我也不知道这次经历是幸运还是倒霉。&lt;/p>
&lt;p>转眼间，学生时代就这样悄无声息地结束了。第一份工作，带着无限的期待。希望我能尽快适应新环境，掌握专业技能，在自己的岗位上做到最好。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/the-first-time-to-yuyao/" target="_blank" rel="noopener">https://guanqr.com/life/travels/the-first-time-to-yuyao/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/ningbo/">甬城</category><category domain="https://guanqr.com/tags/work/">工作</category></item><item><title>
三个老实人被人背刺了</title><link>https://guanqr.com/life/school/a-good-hearted-person-was-was-stabbed-in-the-back/</link><guid isPermaLink="true">https://guanqr.com/life/school/a-good-hearted-person-was-was-stabbed-in-the-back/</guid><pubDate>Mon, 12 Jul 2021 10:53:34 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>大二的下半学期到大三的下半学期这一整年的时间，我和我的两个室友在某老师的某个方向的课题组里面做个小项目。这个项目属于学校大学生科研训练计划，学校有集中管理。指导我们研究的有两名博士生学姐。项目完成后学姐说最好发一篇论文，因为这个研究成果课题组可能需要用到。&lt;/p>
&lt;p>就这样我和我的室友开始了痛苦的写论文、改论文的日子。论文里所有的文字，所有的公式，所有的图都是我们三个人写的和画的。论文改动了已经不下三十个版本，每次学姐都是逐字挑毛病，早上给他们看，晚上反馈修改意见。改得差不多了，学姐就联系老师审核论文，老师又联系了自然资源部某所的专家审核论文。这还没到交稿的阶段，只是私下里先给专家看看然后提意见再修改。这里遇到了一个困境，专家所在团队已经做了相关研究，我们所做的工作也有部分参考他们的研究，所以我们的论文创新点不足，而且由于没有实地测量的数据（我们没精力也没钱去采样），所以计算结果的精度也很有限。当时考虑过尝试联系中科院某所要测量数据，但是老师后来也没联系（我们也不敢问到底什么情况）。这段时间里，学姐计划是将论文发在某某国内期刊上，不过老师的意思是要改成英文的发到国外的期刊上，这样的话，工作量就更大了。&lt;/p>
&lt;p>后来按照学校的规定，到了结题答辩的时间，我们的项目研究也就结束了。这时候论文还没有发，我们也不想继续做了。说实话这个改稿子太折磨人了，我们几个人接下来还要准备复习考研以及做毕业设计，没有更多的时间继续把这个研究做下去。所以最后我们把我们所有的研究数据和成果交给了学姐，她继续来做后面的工作。&lt;/p>
&lt;p>到我们大四做毕设的时候，学姐还经常联系我室友（这个室友的研究生导师还是这个老师，不过课题组换了。我们都觉得做这个方向的研究太痛苦了），问这个项目的问题。看样子学姐是把我们写的乱七八糟的代码重新跑了一遍。我们就没有再管过这个论文的发表问题。因为我们几个人认为这篇论文太烂了，没有什么技术含量，要是能发表就是个奇迹，就算成功发表了都觉得尴尬。毕业后，我意外发现这篇论文发表了，不过发的还是某某国内期刊，看来老师最终还是妥协了。这时候我看到的，就是我要说的特别无语也很扯淡的事，我不是一作，也不是二作，而是三作，我的室友则是四作和五作。这篇论文的一作是学姐，二作是个不认识的人。我的血压瞬间上来了，因为按照最初我们写的论文，我是一作，室友是二作和三作。&lt;/p>
&lt;p>说实话，最后论文的第一作者，我知道肯定不会是我。因为老师肯定是想达到利益最大化的目的。后面的论文交稿和修改工作都是由学姐完成的。我们几个人都毕业了，而且我直接就业，室友读研的方向也不是这个课题组的方向。如此看来，第一作者给学姐肯定是最好的，毕竟这篇论文属于这个课题组。尽管数据是我们处理的，公式是我们拟合的，图是我们画的，但文字修改上，学姐也有功劳，这我就认了。&lt;/p>
&lt;p>不过，这篇论文的第二作者，给了某个我们根本就不认识的 18 级的学弟是什么情况？按理来说，应该给我们三个人其中的一个吧。难道说，因为 18 级的马上要开始保研的绩点统计了，这个人想要来这个课题组，所以老师帮学弟，把他的名字插在我们的前面，靠这篇论文加点分？我当第二、第三、第四作者都没问题，但是我们团队总要有个第二作者吧，这个研究好歹是我们三个人做的，我们前面插了个对这个研究根本没有任何贡献的莫名其妙的人是什么意思？这不是欺负老实人吗？如果说，他们在发表这篇文章之前，给我们商量商量说把学弟的名字加进来，或许我们会同意这样的安排，但这件事情的发生我们都不知情，就好像被人背刺了一样。&lt;/p>
&lt;p>现在看来，这篇论文就是一个工具，它的发表达到了利益最大化的目的。学姐成为了一作，为她的科研之路锦上添花。学弟成为了二作，为他的保研之路扫清障碍。我们三个人毕业，今后也不会在这一方向继续深入研究，要这篇论文也没什么用了。前段时间有人爆出自己的名字从作者移到了致谢，这个结局比我们还要惨。这样看来，他们能在论文上加上我们名字就很不错了。本科生谁会看在眼里。事已至此，我也不想追究什么，继续当个老实人吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/a-good-hearted-person-was-was-stabbed-in-the-back/" target="_blank" rel="noopener">https://guanqr.com/life/school/a-good-hearted-person-was-was-stabbed-in-the-back/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/research/">科研</category><category domain="https://guanqr.com/tags/roast/">吐槽</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
再见浙大，毕业快乐</title><link>https://guanqr.com/life/school/my-undergraduate-life/</link><guid isPermaLink="true">https://guanqr.com/life/school/my-undergraduate-life/</guid><pubDate>Thu, 01 Jul 2021 08:26:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/happy-graduation.jpg" alt="happy-graduation.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">一&lt;/span>年一度的毕业季又来临了。每一年的这个时候都会看到校园里那些穿着学士服拍照留念的学长学姐们的身影。今年，我成为了其中的一员。六月初，学院组织同学们穿学士服到图书馆前拍摄集体照。我和朋友们单独拍了几张合影，发了个朋友圈，文字内容是简短的五个字——「光阴似流水」。因为我想到了前段时间看的《觉醒年代》，想到了里面那些斗志昂扬的青年们为了理想一起合唱的《夕歌》。&lt;/p>
&lt;p>和那些灿若星辰的浙大人相比，我是最不起眼的一个。四年以来，我没有一门课程满绩，我没有发表过一篇论文，我没有获得过什么奖学金，也没有得过什么值得炫耀的奖项。我羡慕那些站在舞台上的光鲜亮丽的同学，但优秀的人毕竟是少数，我所能做的，就是顺利完成所有课程的学习，成为第一批毕业学生中的一员。如今，这个简简单单的心愿实现了。&lt;/p>
&lt;h2 id="为什么来浙大学光电">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#为什么来浙大学光电" class="anchor-link" aria-label="为什么来浙大学光电">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:为什么来浙大学光电" class="headings">为什么来浙大学光电&lt;/a>&lt;/h2>
&lt;h3 id="在浙之滨">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#在浙之滨" class="anchor-link" aria-label="在浙之滨">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:在浙之滨" class="headings">在浙之滨&lt;/a>&lt;/h3>
&lt;blockquote>
&lt;p>国有成均，在浙之滨。是紫金港的晨曦，是雨中的西溪。之江钟楼，海宁潮起，华池飞柳絮。玉泉留灯影，舟山映繁星。&lt;/p>&lt;/blockquote>
&lt;p>高考考了个很尴尬的分数，678 分，天津市排名 100 名左右。这个分数多 4 分能上北大，多 1 分能上交大和复旦。化学和生物是一生之敌，死活学不好。当初本来想着，没考上清华就去北航，但家人总觉得这个分数去北航有些亏了。所以在填报志愿的时候，照着 C9 高校的列表按照往年的录取分数线直接抄了下来，专业首选不是电子信息类就是机械类，最后就到了浙大。&lt;/p>
&lt;p>当我查看到自己被浙大录取的那一刻，我的内心有些失落。因为我觉得，如果无法到北京上学，去上海也是不错的选择。我从来就没有考虑过会来到浙江。浙大里有部分人喜欢说自己是「考败来浙」，意思是以自己平时的水平能够上清北或者复交，但因为高考发挥失常，无奈只能来到浙大。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zju-acceptance-letter.jpg" alt="zju-acceptance-letter.jpg">&lt;span class="caption">※ 信息大类录取通知书&lt;/span>&lt;/p>
&lt;p>其实大部分人是有考上清北的实力的，国内几所顶尖大学的学生差距真的很小很小，有时候，几分的差距纯靠运气。想象一下，你在原来的某个圈子里是一个很优秀的人，现在把每个圈子里最优秀的人都挑选出来组成新的圈子，那么，你身边都是优秀的人。这时候，你会发现自己和身边的人没有什么差距了，甚至身边的人比你更优秀。这样就会让你产生一种失落感，这样的心情可能就会对你大学四年的生活造成或大或小的影响。&lt;/p>
&lt;p>或许冥冥之中自有天意吧。2012 年的那个春天。学校组织来长江三角洲地区玩。我第一次来到了西湖，从雷峰塔下走过，从苏堤南岸的肯德基走到了北岸的岳飞庙。那是我曾经距离浙大最近的时刻。六年后，我又重走了当年走过的路，登上了当年嫌贵就没有参观的雷峰塔，远眺整个杭城，山与水相交融。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/west-lake-2012.jpg" alt="west-lake-2012.jpg">&lt;span class="caption">※ 2012 年拍摄的西湖&lt;/span>&lt;/p>
&lt;h3 id="结缘光电">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#结缘光电" class="anchor-link" aria-label="结缘光电">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:结缘光电" class="headings">结缘光电&lt;/a>&lt;/h3>
&lt;blockquote>
&lt;p>五十载桃李增华，秋毫烛照，忆往昔罗布峥嵘，光腾九天夺悬日。七千仕玉泉济帐，题论咏觞，看今朝诸子迭进，波粒二象焕新春。&lt;/p>&lt;/blockquote>
&lt;p>作为一个年轻气盛的理工科选手，当初选专业的时候并没有过多的考虑以后的就业和发展前景的问题，只是看自己是否对这个专业感兴趣。高中的某一天，新闻联播里正在介绍我国光通信行业的发展，我看到电视中播放的的光路传播的画面，瞬间就爱上了它。光是宇宙间的一种多么神圣的存在啊。有一次，天津大学的校长来我们高中开展讲座，通过招生简章，我了解到天津大学的光电专业是比较好的。便深入学习了一下这一专业是做什么的。后来，得知自己被浙大信息类录取后，正好看到光电属于信息类专业，又得知浙大光学工程学科在国内高校排名第一，于是，在专业分流的时候，毫不犹豫地选择了它。&lt;/p>
&lt;p>其实和光电的缘分不止这些。刚来到浙大的时候，学校分配到我们宿舍的新生之友老师就是光电学院的一位副教授——项震老师。九月中旬军训刚刚结束，光电学院的辅导员吕成祯老师在「浙里吧」组织了一场新生之友交流会。将所有光电学院的新生之友老师和学生聚集在一起，对专业选择进行指导。说是指导专业选择，实际上就是宣传光电学院。&lt;/p>
&lt;p>专业分流是在大一刚入学的那个学期的十月中旬，选专业前，每个学院都举行了实验室的参观活动。计算机、控制、光电、信电、生仪这几个学院的实验室参观时间有冲突，只能挑选其中的一到两个进行参观。我自然选择了光电，想看一看所谓的「现代光学仪器国家重点实验室」里面到底有什么，顺便参观一下玉泉校区的历史建筑。在实验室参观的过程中，我听了刘东教授的讲座，也加了他的微信。在当时，我没想到两年之后会主动联系刘东教授，在他的实验室开展科研训练项目；也没想过他和我的新生之友，以及我后来的专业行政班班主任三人是同一个研究所的团队。&lt;/p>
&lt;p>在十年前的时候，光电的火热程度高于计算机。专业分流的时候很多人挤破头皮来抢光电的名额。现在正好反了过来，每一年第一轮专业分流的时候，光电的人数都报不满，连面试都不用进行。谁知道下一个十年，火爆的是哪个专业呢？&lt;/p>
&lt;h2 id="想起的一些有趣的事">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#想起的一些有趣的事" class="anchor-link" aria-label="想起的一些有趣的事">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:想起的一些有趣的事" class="headings">想起的一些有趣的事&lt;/a>&lt;/h2>
&lt;p>在写这篇文章的提纲的时候，本来打算在这部分当中写下我的日本之行、学生工作、学长组、挂科以及参加光电竞赛的故事。不过想到这些事在之前已经单独写成文章发布了（详见《&lt;a href="https://guanqr.com/life/school/science-summer-camp-in-japan/">记二〇一八年暑期日本科研夏令营&lt;/a>》、《&lt;a href="https://guanqr.com/life/school/a-job-in-editorial-department/">回首过去，展望未来&lt;/a>》、《&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/">学长组：责任与担当&lt;/a>》、《&lt;a href="https://guanqr.com/life/school/in-the-deepest-water-is-the-best-fishing/">绝处逢生&lt;/a>》、《&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/">第八届光电设计竞赛校赛总结&lt;/a>》），就不在这里占空间了。感兴趣的直接点击链接看那几篇文章就好啦。这里就回忆一些我曾经没有分享过的故事。&lt;/p>
&lt;h3 id="初来浙大">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#初来浙大" class="anchor-link" aria-label="初来浙大">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:初来浙大" class="headings">初来浙大&lt;/a>&lt;/h3>
&lt;p>我在新生报到日期的两天前来到了杭州。在堕落街的望月公寓小区里住了两天。那时候堕落街正在修路，道路很窄很拥挤。从堕落街进入学校需要通过校医院后面的一个小桥。听学长们说，原来的堕落街两边都是小吃店，现在只剩下一排了。&lt;/p>
&lt;p>我住的地方是云峰学园的碧峰 3 舍，宿舍布局是四个并排的学习桌，两个并排的上下铺。在办理了入住手续后，我扛着一大包卧具走进了宿舍。宿舍里已经有一个来自四川的同学提前入住了，他在 3 床，是下铺。我住在 2 床，是上铺。1 床（也就是我的下铺）同学虽然没有入住，但我看到了床板上放置的写有「郑州外国语中学」字样的床垫。想必这是位来自郑州的学霸级人物了。后来的事实证明，他确实是我们宿舍四个人当中学习最好的，甚至是信息大类行政班里学习最好的。他先通过面试进入了信息安全专业，又通过了竺可桢学院混合班的选拔，进入了计算机科学与技术专业。我们 2、3、4 床的三人一起进入了光电学院开启了摸鱼之路。经过推选和自荐，我成为了我们宿舍的舍长。&lt;/p>
&lt;p>入住学校宿舍的第一个晚上，学校开展了各个省份新生的见面会。我参加了天津的新生见面会，在这里第一次遇到了杨亮老师。杨亮老师是控制学院的团委书记和研究生辅导员。是天津耀华中学校友，负责天津地区的浙大本科招生工作。在当时我没想到，我以后还会和杨亮老师见面多次（在军训的时候是我所在连队的指导员、后来他拉我参与了面向天津的浙大本科招生宣传），也没想到第二年的天津新生见面会是由我和另一名控制学院的同学一起主持的（杨亮老师当时参与军训大会，没时间赶来，就叫两位参与学长组工作的天津学生主持了）。&lt;/p>
&lt;p>信息大类总共分了 30 个行政班，毕竟信息类专业是比较热门的专业，招收的人也多。我们班的班主任是来自计算机学院的老师。班里还有四个来自台湾省的同学，这种班里有台湾同学的情况其实很少见。港澳台的学生并不是平均分配到每个班里的，而是直接定向抱团，他们的专业在入学前已经确定是计算机科学与技术，几个人一起被安排到某个班当中，这样应该是为了便于管理。参加三位一体自主招生的学生也是这样抱团的，甚至学号都是连在一起的。&lt;/p>
&lt;p>我们班里的四个台湾同学，两男两女。其中一个男同学父母好像早就在杭州定居，甚至参加了高考。他在大一的成绩不错，后来由于专业分流不在同一个行政班了我也就没有再了解过他的情况。剩下的三个同学，大概是直接参加台湾那边的定向招生进来的，成绩说实话，真不咋样。微积分成绩有些差可以理解，因为我也没好到哪去。但是大一的时候学的 C 语言。他们几个好歹已经确认是学计算机科学与工程专业了，C 语言竟然也挂科了。并且，他们的学习很一般却依然能够拿到针对港澳台学生的奖学金，这真的说不过去了。所以我觉得，虽然现在对于港澳台学生的优惠政策是为了吸引他们来内地高校进行学习，但是对于人才的筛选应该更加严格一些。当时还发生了一件很有意思的事，有一个别的班的台湾同学在我们团总支的 QQ 大群里找到辅导员，说他想加入共产党。后来他们俩应该私下里进行了交谈，具体结果不得而知。&lt;/p>
&lt;p>负责带领我们新生的学长组成员给我们发了云峰学园的园衫。给我的园衫尺码小一号，这真的太扯淡了。学长说，之前在班群里统计尺码，没上报的就给均码了。这就出现了两个问题，一是这衣服的大小比一般商场卖的相同尺码的衣服小一号，我自认为，虽然我胖一点，但我的肩膀宽度并不宽，穿的时候连肩膀都套不上，怎么可能是均码。二是，哪里来的班群。虽然报到前我自己通过贴吧宣传加入了新生大群，但是没有任何人拉我进班群。说真的，这些学长组成员有些不负责任了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yunfeng-lyceum.jpg" alt="yunfeng-lyceum.jpg">&lt;span class="caption">※ 云峰学园和穿着园衫的同学们&lt;/span>&lt;/p>
&lt;h3 id="开学典礼">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#开学典礼" class="anchor-link" aria-label="开学典礼">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:开学典礼" class="headings">开学典礼&lt;/a>&lt;/h3>
&lt;p>学校的开学典礼十分隆重。六千余人聚集在紫金港体育馆中，不同学园和不同校区的新生聚集在一起，穿着不同颜色的园衫，手中挥动着荧光棒。除了校领导的一系列讲话，还有校交响乐团的表演。高健老师指挥演奏的歌剧魅影的旋律至今仍在我的大脑中留有余音。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/school-opening-ceremony-0.jpg" alt="school-opening-ceremony-0.jpg">&lt;span class="caption">※ 开学典礼现场（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/school-opening-ceremony-1.jpg" alt="school-opening-ceremony-1.jpg">&lt;span class="caption">※ 开学典礼现场（二）&lt;/span>&lt;/p>
&lt;p>开学典礼之后并不是直接开始进行军事训练，而是有几天的新生始业教育。就是请学校的一些领导开展关于学业和思想道德方面的各种讲座，参观校史馆了解学校的历史，进行新生体检，新生选课等等。在这些事情当中，最让人期待的就是党委书记郑强教授的讲座。&lt;/p>
&lt;p>郑强教授最近几年越来越火了，他对于国内外教育的犀利言论，打破了人们眼中对于教授形象的认知，获得了很多网友的支持。去年郑强去太原理工任职了，作为浙大的学生，理解教授的选择。就像多年前教授离开浙大前往贵州一样，教授并不是因为浙大不好才离开的，而是因为一心想要打破现在教育发展不平衡的现状，让人才流失比较严重的地方获得更好的教学资源。&lt;/p>
&lt;p>带领我们的学长在晚上组织我们全班到正门外的烧烤一条街上（我并不知道那条街叫什么名字，只知道全都是烧烤店）吃烧烤。这是浙大开学迎新的传统环境了，学长要请新生们吃大鸡腿，这种请客在浙大被称作「BG」。在等待烧烤的时候，按照一代一代传承下来的「习俗」，是做一些很恶搞的游戏。班里人在桌子前围成一圈，通过剪刀石头布向两个方向传递两只筷子，最后谁同时获得了两只筷子，就要表演一些社死型的节目。这算是「破冰」活动的一部分，更快地熟悉身边的同学。到后来我参加学长组的时候，联系烧烤店预约场地，才知道开学的这几天晚上餐位是很难预约到的，大家都希望能在开学典礼的那天晚上就出来吃烧烤。真是辛苦那几位学长了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zju-barbecue-0.jpg" alt="zju-barbecue-0.jpg">&lt;span class="caption">※ 一起吃烧烤（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zju-barbecue-1.jpg" alt="zju-barbecue-1.jpg">&lt;span class="caption">※ 一起吃烧烤（二）&lt;/span>&lt;/p>
&lt;h3 id="军事训练">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#军事训练" class="anchor-link" aria-label="军事训练">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:军事训练" class="headings">军事训练&lt;/a>&lt;/h3>
&lt;p>新生始业教育结束后就是军训了。16 级的学长学姐比我们早一个月进行军训。因为他们大一开学的时候正赶上 G20 峰会，军训就推迟到了大一结束后的暑假，也就是我们新生开学前。我们军训是将每个学园分为一个团。团里的每个专业大类的几个班级合为一个连。连中的同学按照男女分为三个排，由于女生比较少，通常只会分出一个排，男生两个排。排中的人再平均分为若干个班。每个排由一名教官带领训练。我所在的是二团三连二排三班。每个连队都会安排一个指导员，由所在专业大类某个学院的辅导员担任。连长由部队的一名教官担任，副连长由学校的国防生担任，副指导员则是由思想觉悟比较高（入党积极分子或者在学院团委有兼职）的两名学长学姐担任。教官的工作就是训练我们，其他人的工作就是对我们的每日表现进行评估打分。毕竟军训是有学分绩点的。&lt;/p>
&lt;p>军训开始前一天，指导员来到每个宿舍说明军训的注意事项，强调了宿舍的卫生规范。什么桌子上不能摆任何东西，床上不能有蚊帐，垃圾桶里不能有垃圾，晾衣架上不能有衣服。反正宿舍里所有的东西都不能展现它应有的职能就对了。最简单的收拾方法就是把所有的东西都放柜子里。此外，被子要叠成方块，四个人的被子，枕头，杯子，盆子，甚至牙刷在杯子中摆放的角度都要保持一致。军训的时候带的水杯都要统一换成超市买的大瓶装的农夫山泉，要把农夫山泉的标签撕掉，贴上每个人的名字。指导员刚进宿舍的时候，我就发现，这张脸怎么这么熟悉。思索了许久才发现，这不是几天前开新生见面会的时候讲台上的杨亮老师吗。不过这时候我和杨亮老师不熟，他也不认识我，脸上透露出杀气，就没有打招呼。&lt;/p>
&lt;p>我是很喜欢军训的。我喜欢那种艰苦环境下的集体生活。所以军训的两周时间里我很享受，在尽自己最大努力做好每个环节。每天早上五点多起床洗漱，到操场集合站军姿，接着排队吃早饭，又到操场集合，前往安中大楼站军姿和队列训练，中午排队吃饭，午休，下午集合，军姿和队列训练，晚上排队吃饭。晚上的活动没有教官参与，杨亮老师带领我们到教学楼中的教室里进行思政教育、练习合唱、知识答题竞赛等活动。&lt;/p>
&lt;p>合唱比赛有两个。一个是全校不同连队之间的大合唱比赛，一个是我们连队中不同班之间的小合唱比赛。大合唱是要唱指定歌曲《浙江大学校歌》和杨亮老师选择的歌曲《精忠报国》。杨亮老师每年带队军训的时候都会选择《精忠报国》作为合唱的歌曲，可能他就会唱这一首吧，哈哈。小合唱的曲目是通过抽签决定的。杨亮老师给我们准备了几十首歌曲，因为有的歌好唱，有的歌连听都没听过，所以练习合唱的难度不一，只能通过抽签分配每个班的曲目。每个班的曲目有三个，任选其一参与比赛。我们抽到的是《白桦林》、《国际歌》，还有一个忘了（因为从来就没听过，没人会唱，难度还挺高，就没练过）。《国际歌》其实挺适合合唱的，但是每个班的人数很少，合唱的时候大家都不愿发出洪亮的声音，效果很不好，最后我们决定合唱《白桦林》。&lt;/p>
&lt;p>练习大合唱的第一天，杨亮老师就来了个偷袭，让我们默写校歌的歌词，算在最后的总评成绩里。我们才刚入学，练校歌完整歌词都没有看过一遍，谈何默写。后来我们就花了一天的时间记歌词。浙大校歌的特点就是歌词是用文言文写的，背完后，虽然不太懂歌词的内涵，但依然觉得歌词很美很美。由于我们连队的人数是全校所有连队中人数最多的，大合唱并不是每个人都能参加，要选拔出五音比较准的同学参加。杨亮老师请来了专门学音乐的学姐来选拔和训练我们。选拔的形式是，几个人一组在教室里齐唱校歌，学姐依次走到每个人身边听唱得怎么样。我起码是学过乐理的，音准没问题，就这么进到了大合唱的队伍中去。那些没有被选入到合唱的同学，老师当然不会让他们闲着，他们也要登上舞台表演军体拳。由那位副连国防生教他们做军体拳。小合唱是每个人都要参与的。我们班的人是真的不好意思开口唱歌，选择《白桦林》也是无奈之举。我主动担任了领唱和校正每个人音准的工作。&lt;/p>
&lt;p>大合唱比赛是在临湖的小剧场进行的，比赛结果一般。有黑幕的嫌疑。某个连队的合唱歌曲是郑强教授自编的《大学生军训之歌》，毫无意外获得了第一名，这太扯淡了。小合唱我自认为发挥得不错。&lt;/p>
&lt;p>合唱活动结束，军训也进行了一周的时间，期间还有一次早上四点多的拉练，接下来的日子就是练习踢正步，同时选拔参加队列方阵的成员。我凭借标准的动作成功入选。那些没有入选的同学，也就不用在炎炎夏日中练习踢正步了，他们被安排在足球场上排练一个大型的节目，这个排练很划水。我们练习踢正步的时候，教官为了让我们每个人踢得高度一致，在树干之间拉上了绳子做标准高度。后来，我们连队成功入选成为极其稀有的劈枪方阵，好像全校只有四个劈枪方阵——终于有机会摸到真枪了。教官住宿的宿舍楼里有一个军械库，里面放了上百把破旧的 56 式半自动步枪，有的已经快要散架了，用透明胶带缠着枪托。枪上还保留着刺刀，不过刀头也用胶带裹着。顺便说一句，枪油味真好闻。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/military-training-0.jpg" alt="military-training-0.jpg">&lt;span class="caption">※ 练习踢正步&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/military-training-1.jpg" alt="military-training-1.jpg">&lt;span class="caption">※ 夜晚操场彩排&lt;/span>&lt;/p>
&lt;p>后来这几天就是枪不离身了——早上排队吃饭，排队取枪，扛枪踢正步，排队还枪，排队吃午饭，排队取枪，扛枪踢正步，排队还枪，排队吃晚饭。劈枪方阵由齐步变正步的时候，手上的动作比较复杂，我们一直在练习如何劈枪和收枪。这段时间我的手指肚也磨出了茧子。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/military-training-2.jpg" alt="military-training-2.jpg">&lt;span class="caption">※ 我们的枪&lt;/span>&lt;/p>
&lt;p>军训的时候有个遗憾，就是没有拍一张我穿着军训服，扛着枪的照片。不过军训期间带手机实在是不方便，也没空拍什么照片。我保存的大部分军训照片都是连队办公室的同学拍摄的。如果说有人因为身体原因无法参加军训，可以到连队办公室参与文职工作。因为军训是必修课，每一个学生都无法逃避。还有个遗憾，就是我们这一届学生在军训的时候没有去靶场练习射击。不过既然我们已经摸过枪了，而且比别的连队摸枪的时间长很多，去不去靶场也无所谓了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/military-training-3.jpg" alt="military-training-3.jpg">&lt;span class="caption">※ 二团三连合影&lt;/span>&lt;/p>
&lt;h3 id="学霸餐">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#学霸餐" class="anchor-link" aria-label="学霸餐">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:学霸餐" class="headings">学霸餐&lt;/a>&lt;/h3>
&lt;p>前有早上为了睡懒觉来不及吃早饭而不得不买的「学渣粽」，后有中午下课来不及去食堂吃午饭就要上下午第一堂课而不得不买的「学霸餐」。大二的时候，由于要修的课程很多，我的课表出现了一周有三天从早上 8:00 上到晚上 9:10 的课程组合。上午的课程在 12:15 结束，下午的课程在 13:15 开始。在这种情况下，如果选择在上午的课程结束后跑到食堂吃午饭再赶回上下午的课程，时间太紧迫，连喘口气的机会都没有。因为食堂在宿舍区，从宿舍区步行到教学区一般要 15~20 分钟，再加上买饭排队找座位的时间，吃饭都要噎着。所以在这样的魔性时间安排下，学校在东教学区安排了盒饭售卖点，上午下课后可以直接在教学区吃盒饭，节省了去食堂吃饭的时间，中午还能趴在教室休息会。&lt;/p>
&lt;p>起初我是拒绝的，因为同样的菜，盒饭比食堂的价格稍微贵一点，量也稍微少了一点。盒饭的菜还是固定的，不一定符合我的口味。宁可中午饿着不吃饭也不想买盒饭。但因为那段时间我要在教学区上一天的课，从早上到晚，如果不吃饭，下午和晚上就会感觉很累。我还是妥协了。12:15 下课后，收拾课本，冲出教室，跑到盒饭售卖点排队。买到盒饭后，趴在教学楼里的台子上吃饭，宛如一个要饭的人。想象一下这样的场景，在中午，来到东教学区，就会看到很多学生趴在路边抱着盒饭大口大口的吃——这真的有些滑稽了。所以，大家将这样的盒饭称为「学霸餐」。&lt;/p>
&lt;p>现在，学校在东区教学楼增设了一个食堂，同学们中午下课去抢盒饭的场面已经成为了历史。&lt;/p>
&lt;h3 id="志愿者">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#志愿者" class="anchor-link" aria-label="志愿者">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:志愿者" class="headings">志愿者&lt;/a>&lt;/h3>
&lt;p>四年之间，为了打发时间，找点有意义的事情做，便参加了很多大大小小的志愿活动。最让我印象深刻的是「互联网 +」创新创业大赛志愿者。学校是当年大赛的主办方，最后的全国决赛在紫金港校区举行。学校要求每个学院都要有同学参与担任志愿者。当时我刚搬到玉泉去住，每天去紫金港的话，太累了，不过学院非要让在玉泉的同学参与进来。我想着当时大赛是在十一国庆之后举办，也耽误不了我多少时间，就报名参加了。&lt;/p>
&lt;p>学校给每个学院的志愿者分配的工作不同。我们的工作是后勤保障，服务其他志愿者的志愿者。这应该是最轻松的工作了，不用像大部分志愿者那样，需要接站带队或者到服务亭站岗。我们除了每天早上需要给站岗的志愿者搬水，督查志愿者是否工作到位之外，其他时间坐在小剧场上面的办公室值班就行，但是比较坑的地方就是，我们值班的时间要比别的志愿者工作时间长，提前一周就开始值班了，可能是因为要提前做好服务保障工作。&lt;/p>
&lt;p>做后勤保障志愿者是很枯燥的，坐在办公室里看着自己的电脑。我更喜欢出去带队，为其他学校参赛人员介绍学校的风采。有一天，说是新华社的记者要来我们的办公室对志愿者进行采访，需要提前打扫一下办公室。我们学院的负责人就叫上我（他看我比较老实能干），早上六七点就打车去紫金港开始打扫卫生。打扫了将近一个小时，最后又打车回到了玉泉。还有一天，听闻国务院领导要来学校视察比赛的情况，某个老师开始策划欢迎仪式。欢迎队伍的人都是精挑细选的，有来自学生会和科协的部长主席团的成员，还有青年马克思学院的成员。排练的时候，由于有些人没有来，就临时叫了几个我们后勤保障志愿者去充数。我就跟着队伍装模作样地进行了排练。这里不得不吐槽一下，形式主义向来都是传统特色，还非要选一些特定的学生组成欢迎队伍，他们根本就没有参与到大赛的活动中去。&lt;/p>
&lt;p>办公室里每天都会选出一个工作认真的人作为「每日之星」进行表扬。我看了那些每日之星，都是天天坐在办公室里什么都不做的人。我们这些每天早上用小推车给全校站岗的志愿者搬水的人都没入选，我是无话可说了。不过最后，由于我较为出色的表现，我们学院的负责人记住了我的名字，最后评选优秀志愿者的时候，我成功入选，这是对我工作的最大认可。&lt;/p>
&lt;h3 id="自习时刻">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#自习时刻" class="anchor-link" aria-label="自习时刻">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:自习时刻" class="headings">自习时刻&lt;/a>&lt;/h3>
&lt;p>在紫金港生活的时候，我很少去图书馆自习。因为图书馆在校门口，离宿舍太远了，不如直接去西区的教室上自习。西区教学楼的四五层是开放的自习室，如果教室没有班级上课的话，就可以进去上自习。我最喜欢的是五楼教室的最后一排。因为五楼比较安静，最后一排不容易被别的同学打扰到，还可以很方便地将笔记本电脑电源接到教室后面的插座上。&lt;/p>
&lt;p>一般来说，我会在周末去上自习，因为平时课程比较多，每天上完课回到宿舍来不及写完当天课程的作业，只好堆在周末一起完成。在自习期间，如果到了中午或者下午的饭点，我会选择去离西区较近的临湖餐厅吃饭。我到现在还清楚地记得，我第一次到西区上自习，是在西一的 502 教室。我的第一门通识选修课就是在这间教室里上的，这间教室在教学楼的最边上，面积比较小。&lt;/p>
&lt;p>有时候，晚上回到宿舍，室友们打游戏的声音太吵了，他们总喜欢开外放，并且开麦和游戏中的队友聊天。我在宿舍里无法静下心进行学习。在这种情况下，我就会选择去上自习。但教室的座位是有限的，如果很晚才去，根本没有空的位置——我只能坐在走廊里看书了。有一次，寒冬的夜晚，我跑到教学楼的走廊里看书。在阴暗的灯光下，我坐在木桌子前，寒风穿过走廊刺进我的皮肤，这滋味真不好受。&lt;/p>
&lt;h3 id="观影首映">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#观影首映" class="anchor-link" aria-label="观影首映">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:观影首映" class="headings">观影首映&lt;/a>&lt;/h3>
&lt;p>紫金港校区南边的商场有个 IMAX 影院，从宿舍出发大概走上二十分钟就能够到达，因此我经常查看电影的上映日期。一看到有喜欢的电影上映，就会立即买票观看。不过因为平日课程有些多，课下需要写课程论文，做小组作业，所以大部分时候我来不及在上映的当天去看，这样的话，我会在周末结束后的周一前往影院。周一毕竟是工作日，晚上去影院的人很少，有时候一个放映厅里就只有三四个人——这绝对是影院观影的最佳环境了，既没有小屁孩的吵吵闹闹，也没有爆米花破坏氛围。&lt;/p>
&lt;p>我很喜欢在电影院看科幻或者动作题材的电影。因为我觉得，来到电影院看电影，看的就是特效大场面，给视觉造成一定的震撼冲击。要只是一个平平无奇的 2D 喜剧，那还不如直接在家里的电脑上看。如果真的遇到我特别喜欢的电影上映，我就会选择参加半夜 12:00 的首映。很多人没有参与过首映。首映和其他场次的最大区别在于，首映可以参加抽奖活动，影院会送给你该电影的 IMAX 海报和其他一些周边产品，比如 3D 眼睛、购物袋等等。首映场虽然在深夜，但经常是满场的。参加首映的大部分都是学生，还有一些对这部电影特别热爱的人。至于为什么要参加首映，当然是为了防止被先看过这部电影的人剧透，以及为了尽早看完电影剧透给别人。&lt;/p>
&lt;p>我最记忆深刻的一场是《复仇者联盟 4：终局之战》的首映。当这部电影在国内定档之后，我就按奈不住内心喜悦激动的心情，每天都守着淘票票看电影院什么时候开始售票。售票开始的时候，票价显示为每人 150 元，这让我大跌眼镜。当时我看到了别的城市这部电影的票价被哄抬到几百元甚至上千元的新闻，但这种事情发生在我身边还是让我震惊到了。买还是要买的，眼看着 IMAX 影厅的中间座位在极短的时间内被抢完，真的不能再犹豫了，我勉勉强强抢到了前排边上的座位。原本我是和室友约着一起去看的，但最终我和室友只能买到相隔很远的人家挑剩下的空余座位。首映场的氛围是其他场次无法相比的。这是粉丝们共同享受的一场的盛宴，全程充满了欢呼声、掌声，还有哭泣声，大家都将自己的情感借助电影宣泄出来。只有真正到达现场才能体会到那种热情。&lt;/p>
&lt;p>电影放映结束时，已是凌晨两点多。除了电影院，其余的商店都已经关门停业，商场的电梯也已经断电。走在回宿舍的路上，校门口的门卫依然坚守在岗位，西区湿地中的蛙鸣显得夜晚更加幽静。路灯下只有我一个人，这是一天之中最为轻松的时刻，摆脱了嘈杂的人群，摆脱了世俗的喧嚣，这是属于我的夜晚。&lt;/p>
&lt;h3 id="校友毅行">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#校友毅行" class="anchor-link" aria-label="校友毅行">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:校友毅行" class="headings">校友毅行&lt;/a>&lt;/h3>
&lt;p>我之前写过一篇记录光电学院毅行的日记（《&lt;a href="https://guanqr.com/life/travels/opt-trailwalk/">冬季，雨，北高峰&lt;/a>》）。那次毅行只能说是一次游玩。校友毅行的规模要比学院自己举办的毅行大很多。周末两天，每天有二千多人参加。登山的路线更长更复杂。要从老和山下的玉泉校区出发，爬山达到钱塘江畔的之江校区。走一次下来腿部基本上要缓好几天才能恢复正常。虽然很苦很累，不过这正是毅行的精髓所在——痛并快乐着。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk.jpg" alt="trailwalk.jpg">&lt;span class="caption">※ 2018 春季毅行&lt;/span>&lt;/p>
&lt;p>我参加的是 2018 年的春季毅行。计算机学院的室友联系到了一个他们学院的小队，我们宿舍几个人就全部加入进去了（为了保证安全必须以小组的形式报名）。报名很顺利，抢名额的时候服务器出乎意料的通畅。要知道，在秋季毅行的时候，每天 2500 人的名额 3 分钟内就报满了。&lt;/p>
&lt;p>毅行的起点是在玉泉校区的教 7 楼下，我们一大早就从紫金港坐公交赶了过来。队长负责打卡和分发物资。出发前，我们在毅行纪念碑前合了影。队长是最辛苦的人。在我们正式出发前，队长要单独走一遍全程熟悉路途。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-before-departure.jpg" alt="trailwalk-before-departure.jpg">&lt;span class="caption">※ 小分队合影&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-team.jpg" alt="trailwalk-team.jpg">&lt;span class="caption">※ 出发前的准备&lt;/span>&lt;/p>
&lt;p>玉泉校区有一扇通向老和山的门，从这扇门出去，就是著名的 700 级台阶。这相当于是对毅行出发者的洗礼。让每个人都认识到，毅行出发后，没有任何一段路途是舒适的。这一天的天气不是很好，虽然没有下雨，但雾气很重，在山上的能见度很低。无法从山上眺望玉泉和西湖的美景，这真是太遗憾了。&lt;/p>
&lt;p>毅行前半段的路程是很枯燥无味的，重复的树林山景，看多了也会感到乏味。我们小队的成员太亢奋了，我也不知道他们哪里来的这么充足的精力。从出发后就没有停下来歇息的时候。我和我的室友们全程都在队伍的最后追赶他们。要知道，我们早上为了赶车连早饭都没有吃。中午的时候，我们按照计划要去法喜寺吃午饭。法喜寺对我们参加毅行的成员免费提供斋饭。这些队友为了尽快吃上午饭，竟开始跑步前进。爬山一路上坡已经够累的了，何必要跑呢。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-faxisi.jpg" alt="trailwalk-faxisi.jpg">&lt;span class="caption">※ 法喜寺门口&lt;/span>&lt;/p>
&lt;p>后半程的风景就显得不那么单调。梅家坞典型的江南风格建筑，漫山遍野的茶树，林间的小桥流水，还有在水中嬉戏的孩童——一幅幅生机盎然的景象。梅家坞的田园风光让我流连忘返，我感觉这里是我心中最适合生活的地方。以至于最后毕业的时候，我又一次来到这里，穿着学士服拍了毕业照。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-downhill.jpg" alt="trailwalk-downhill.jpg">&lt;span class="caption">※ 从梅家坞下山&lt;/span>&lt;/p>
&lt;p>之江校区别有一番风味。独具一格的钟楼，是很多影视作品中的取景地。《唐山大地震》中女主人公方登就读的浙江医学院取景地就在这里。不过事实上，医学院后来并入了浙江大学，而之江校区是法学院所在地。我们到达终点后，领取到了毅行证和徽章，躺在钟楼前的大草坪上，舒缓着劳累一天的身躯。手机上记录了这一天我们走过了四万多步的山路。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-zhijiang.jpg" alt="trailwalk-zhijiang.jpg">&lt;span class="caption">※ 之江钟楼下的合影&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/trailwalk-prize.jpg" alt="trailwalk-prize.jpg">&lt;span class="caption">※ 到达终点的奖品&lt;/span>&lt;/p>
&lt;p>遗憾的是，后来的两次毅行活动，我再也没有抢到参与的资格。再后来，疫情爆发，校友会将毅行活动从线下改成了线上，这便失去了登山的乐趣。我不知道在经历了生活的苦涩后是否还有最初的那份激情。我不知道以后是否还有机会以校友的身份再参加一次毅行，我不知道再次参加的时候，还能否找到一起登山的朋友……&lt;/p>
&lt;h3 id="毕业典礼">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#毕业典礼" class="anchor-link" aria-label="毕业典礼">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:毕业典礼" class="headings">毕业典礼&lt;/a>&lt;/h3>
&lt;p>学校的毕业典礼是在 6 月 30 日的早晨。地点在玉泉体育场上。往年毕业典礼和学位授予仪式是放在一起的，在紫金港的体育馆举行。但由于疫情的特殊情况，学校将毕业典礼和学位授予仪式拆分开，毕业典礼放在了露天开放的玉泉体育场，学位授予仪式放在了邵逸夫体育馆。&lt;/p>
&lt;p>学院在距学校毕业典礼的两天前的晚上开展了院级的毕业典礼。据说这是我们学院第一次单独开设毕业典礼。进场后学院为每一名毕业生发放了毕业大礼包。里面有每一年都常规发放的求是之子印章，6 月初在图书馆门前拍摄的大合影照片。今年新增加的礼物是定制版的移动硬盘。学院还是很有钱的。在学院的毕业典礼中，我们进行了优秀毕业生的颁奖，还有毕业院友联络人的受聘仪式。院友负责人说道，当我们毕业后，我们的身份和在座的所有人的身份都是一样的——光电学院的院友。以后生活中如果有什么困难，比如找工作，比如创业，院友会为我们尽力提供资源。毕业典礼的最后，我们全体成员进行了庄严的宣誓。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/graduation-ceremony-opt.jpg" alt="graduation-ceremony-opt.jpg">&lt;span class="caption">※ 学院毕业典礼&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raduation-package.jpg" alt="raduation-package.jpg">&lt;span class="caption">※ 毕业大礼包&lt;/span>&lt;/p>
&lt;p>学校毕业典礼那天，下起了雨。我们穿着雨衣坐在操场的草坪上，听着主席台上各位代表的发言。广播中荡漾着改编的《再见》歌声：&lt;/p>
&lt;blockquote>
&lt;p>今天要在你面前，跟你说一声再见。求是园，你永远在我们心间。&lt;br>
明天我将远航，满载着启真星光。要告别，在浙大的青春岁月。&lt;br>
我会牢牢记住这些年，一起说过的笑语甜言。这段回忆在我心中，永远都令人动容。&lt;br>
我们曾相聚浙里，今天我们要分离。人生路，浙里永远相随如初。&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://guanqr.com/images/graduation-ceremony-zju.jpg" alt="graduation-ceremony-zju.jpg">&lt;span class="caption">※ 学校毕业典礼&lt;/span>&lt;/p>
&lt;p>学位授予仪式取消了校领导的拨穗环节，说是减少接触。我们需要自己将穗拨到右边来。邵逸夫体育馆门口排着长长的队伍，在进入体育馆的那一刻，看到里面的观众席坐满了候场的同学，看到主席台前站成一排的学校领导，听到广播里播报着那些毕业生的姓名，这个场景就像梦一般，这是四年里最为高光的时刻。现场的指挥让我们上台，站到了地面上标记好的位置，看着镜头，手里捧着那本珍重的学位证书。短暂的十秒，我的思绪却闪现出过去四年中的那些人和事。而后离场，就这样悄无声息地和同学们分别。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/degree-awarding-ceremony.jpg" alt="degree-awarding-ceremony.jpg">&lt;span class="caption">※ 学位授予仪式&lt;/span>&lt;/p>
&lt;h2 id="离别">&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#离别" class="anchor-link" aria-label="离别">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/#contents:离别" class="headings">离别&lt;/a>&lt;/h2>
&lt;p>行李在毕业典礼前的几天就已经收拾好了。学位授予仪式结束后，我就拿上我的行李离开了学校。离别的时候，有些匆忙，似乎没有任何准备。没有吃上一顿具有纪念意义的晚餐，没有说上几句祝福的话语。只是在离开宿舍时，说了一句，走了，便真的走了。下一次再来浙大，下一次再和这些陪伴我走过四年青春的人们相见，不知道会在什么时候了。&lt;/p>
&lt;p>汽车驶过校门，看到很多毕业生穿着学士服在门口和老师、父母合影。我想起十年前的那个暑假，小学刚毕业，我和堂哥一起走进了清华园。那时恰逢清华百年校庆。校园里许多毕业的学生也是身穿学士服为自己的青春留下些许纪念。如今我也完成了我的学业，从学校走向社会，成为建设祖国的微小的一份子。但学海无涯，未来仍要努力提升自身的修养，弥补自身的不足之处。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/graduation-photo-zju.jpg" alt="graduation-photo-zju.jpg">&lt;span class="caption">※ 在紫金港大西区拍摄的毕业照&lt;/span>&lt;/p>
&lt;p>回想当初面对&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/">竺老校长的两问&lt;/a>，我作出的回答。第一个问题，「到浙大来做什么？」我的回答是：「首先是学习专业知识，为将来的专业科研打下基础，学得要广，开拓自己的视野；其次，发展综合素质，多参与社会工作与活动，提高自身的工作能力。」第二个问题，「将来毕业后要做什么样的人？」我的回答是：「为光学发展献出自己的一份力量。哪怕这份力量微不足道，但我也能满意地说出，我把我的青春奉献给了我最爱的学科领域。」&lt;/p>
&lt;p>对于第一个问题，我认为我基本做到了。可能有些地方没有做的很完美，但我也没有留下什么遗憾和悔恨。对于第二个问题，我现在还不能证明我是否能做到，但我相信自己会坚持下去的。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/my-undergraduate-life/" target="_blank" rel="noopener">https://guanqr.com/life/school/my-undergraduate-life/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
批量压缩图片并添加水印的方法</title><link>https://guanqr.com/tech/computer/add-watermark-to-images/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/add-watermark-to-images/</guid><pubDate>Sat, 19 Jun 2021 17:20:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">从&lt;/span>去年年末开始，我陆陆续续收集了很多卡牌，也在网站上展示了部分原创卡。在拍摄卡牌的时候，当然是要尽量呈现出卡牌实物的色彩效果。但将高清的图片放在网上进行展示，存在盗用的风险。这样可能会给卡牌的出品方带来负面影响。所以我就考虑在图片上添加浅色的水印。几百张图，如果一个个分别用 PhotoShop 先压缩图片再添加水印，太麻烦了，直接写个 Python 脚本吧。&lt;/p>
&lt;h2 id="引入库文件">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#引入库文件" class="anchor-link" aria-label="引入库文件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>引入库文件&lt;/h2>
&lt;p>由于是图片处理类的脚本，引入的库如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ImageDraw&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ImageFont&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="读取文件列表">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#读取文件列表" class="anchor-link" aria-label="读取文件列表">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>读取文件列表&lt;/h2>
&lt;p>首先设置需要读取的图片文件夹地址，以及输出图片的地址。目前只需要用到读取地址，输出地址还用不到。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">imgOpen&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;test/old&amp;#39;&lt;/span> &lt;span class="c1"># 读取地址&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imgSave&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;test/new&amp;#39;&lt;/span> &lt;span class="c1"># 输出地址&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后用以下代码实现将文件夹下的所有图片名存放在一个列表中。文件名的后缀被删除。这样方便后续图片输出的时候统一命名。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">imgList&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">listdir&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imgOpen&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">index&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imgList&lt;/span>&lt;span class="p">)):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">imgList&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">imgList&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">][:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>按照这样的思路，我们写好处理图片的函数，在主程序中，只需要使用循环 &lt;code>for index in range(len(imgList))&lt;/code> 依次处理每张图片并输出就可以了。&lt;/p>
&lt;h2 id="添加水印">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#添加水印" class="anchor-link" aria-label="添加水印">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>添加水印&lt;/h2>
&lt;p>这里我要添加的水印样式是成 45 度周期分布在整张图片上的水印。需要先设置添加的字符的字体、字号、透明度，再将字符覆盖到图片上。这里我使用了 Google Fonts 开源的 Berkshire Swash 英文字体。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">add_text_to_image&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">image&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">text&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;BerkshireSwash-Regular.ttf&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">54&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 添加背景&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">new_img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">new&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;RGBA&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">new_img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">paste&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">image&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 添加水印&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">font_len&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">rgba_image&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">new_img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">convert&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;RGBA&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">text_overlay&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">new&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;RGBA&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">rgba_image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image_draw&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageDraw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Draw&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">text_overlay&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">rgba_image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="n">font_len&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">j&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">rgba_image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image_draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">text&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">font&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">text_overlay&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">text_overlay&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rotate&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image_with_text&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">alpha_composite&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rgba_image&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">text_overlay&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 裁切图片&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image_with_text&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">image_with_text&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">crop&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">image_with_text&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这一步由于涉及到了透明度的计算，所以在读取 JPG 格式的图片后，输出的图片变成了 PNG 格式。通过对比两个格式的图片可知，添加水印后的 PNG 图片要远大于原始的 JPG 图片。这显然是不理想的。虽然说 PNG 在图片的质量上要比 JPG 格式好很多，但我拍摄的原本就是 JPG 图片，转成 PNG 没什么意义，并且我要将最终的图片放在网站上，如果图片文件太大，加载网页的时候就会很慢。因此，我还需要对输出的 PNG 图片做压缩处理，再次转换成 JPG 图片。&lt;/p>
&lt;h2 id="图片格式转换">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#图片格式转换" class="anchor-link" aria-label="图片格式转换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>图片格式转换&lt;/h2>
&lt;p>从 PNG 转换到 JPG 当然不仅仅是改个文件名的后缀那么简单。 PNG 图像涉及到了透明度的信息，但 JPG 图像没有。所以我们需要将透明度信息删除。此外，顺便将画质适当降低一些以便压缩图片文件的体积。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">png2jpg&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pngPath&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pngPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">infile&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pngPath&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">outfile&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">splitext&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">infile&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;.jpg&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">infile&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">resize&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">)),&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">ANTIALIAS&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">try&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">split&lt;/span>&lt;span class="p">())&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">g&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">a&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">split&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">merge&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;RGB&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">g&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">b&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">convert&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;RGB&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">outfile&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">quality&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">70&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">remove&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pngPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">convert&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;RGB&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">outfile&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">quality&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">70&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">remove&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pngPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">outfile&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">except&lt;/span> &lt;span class="ne">Exception&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">e&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;PNG 转换 JPG 错误&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">e&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="缩放图片到指定尺寸">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#缩放图片到指定尺寸" class="anchor-link" aria-label="缩放图片到指定尺寸">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>缩放图片到指定尺寸&lt;/h2>
&lt;p>原始图片的尺寸比较大，高度超过了 2000 像素，由于屏幕分辨率的限制，通常在网页上呈现的时候不需要太大的尺寸。所以我计划将图片高度压缩至 1600 像素，宽度按照相同比例缩放。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">resizeByHeight&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">jpgPath&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">newHeight&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">jpgPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ratio&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="n">newHeight&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">x_s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="n">ratio&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">y_s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">newHeight&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">out&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">resize&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">x_s&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y_s&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">ANTIALIAS&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">out&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">jpgPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="主程序">&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/#主程序" class="anchor-link" aria-label="主程序">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>主程序&lt;/h2>
&lt;p>最后，就是主程序的编写。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="vm">__name__&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;__main__&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">index&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imgList&lt;/span>&lt;span class="p">)):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fileName&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">imgList&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">openAddress&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">imgOpen&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;/&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">fileName&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;.jpg&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">saveAddress&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">imgSave&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;/&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">fileName&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;.png&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">resizeByHeight&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">openAddress&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1600&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">openAddress&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">im_after&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">add_text_to_image&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="sa">u&lt;/span>&lt;span class="s1">&amp;#39;Guan Qirui Collection&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">im_after&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">saveAddress&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">png2jpg&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">saveAddress&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fileName&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最终效果如下图所示。图片使用了燎原三国的关羽人物卡。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/liaoyuan-sanguo-guanyu.jpg" alt="liaoyuan-sanguo-guanyu.jpg">&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/add-watermark-to-images/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/add-watermark-to-images/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
端午节游清河坊</title><link>https://guanqr.com/life/travels/hefang-street-in-the-dragon-boat-festival-2021/</link><guid isPermaLink="true">https://guanqr.com/life/travels/hefang-street-in-the-dragon-boat-festival-2021/</guid><pubDate>Tue, 15 Jun 2021 13:03:15 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-0.jpg" alt="hefang-street-0.jpg">&lt;span class="caption">※ 鼓楼&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">六&lt;/span>月以来，杭州进入了梅雨季。永远下不完的雨，永远干不了的衣服。在毕业论文答辩结束后，离学校的毕业典礼还有三周的空闲时间。这段时间本想进行毕业旅行的。不过由于气温高，天天下雨，再加上学院这边说不定哪天要交个文件签个字，去别的省份游玩很不方便，于是，只好等待着哪天放晴了，到附近的地方转一转。&lt;/p>
&lt;p>端午节这一天雨停了。在吃完早饭后，我毫不犹豫地骑自行车到了河坊街。我看到河坊街的游客服务中心门口立着一个牌子，上面写着这一天有端午节打卡活动。只要到指定的几个店铺门口的牌子处拍照，发朋友圈，就能够领取一个小礼品。可能就是一种机缘巧合吧，端午节这天恰好没有下雨，我在这天恰好选择去河坊街玩，而河坊街又恰好有趣味活动。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-1.jpg" alt="hefang-street-1.jpg">&lt;span class="caption">※ 同仁堂前的打卡点&lt;/span>&lt;/p>
&lt;p>因为恰逢节假日，再加上天气还算可以，所以街上游玩的人很多。街边有一个舞台，演员在上面表演节目。各大中药房的店铺门口都在做活动，老人们挤在门口挑选香包。很久没有感受过这样热闹的氛围了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-2.jpg" alt="hefang-street-2.jpg">&lt;span class="caption">※ 中药店正在做活动&lt;/span>&lt;/p>
&lt;p>对于端午节打卡活动，我找到了五个打卡点，带着拍好的照片，兑换了一个方回春堂的香包。中药房里的人很多。其实大部分人并不是来看病的，都是前来参观了解传统的中药房里到底有什么东西。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-3.jpg" alt="hefang-street-3.jpg">&lt;span class="caption">※ 万承志堂国药馆&lt;/span>&lt;/p>
&lt;p>河坊街中有一个江南铜屋。这是朱炳仁和其子朱军岷打造的铜屋，里面展示了许许多多用铜制作的艺术品。虽然说这些东西做工很精致，但对于我而言，我更喜欢木质的艺术品。因为走进铜屋的时候，总有一种进入到金属空间的冷酷压抑的感觉。而木头来源于植物，木质工艺品，是对生命的延续。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-4.jpg" alt="hefang-street-4.jpg">&lt;span class="caption">※ 江南铜屋&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-5.jpg" alt="hefang-street-5.jpg">&lt;span class="caption">※ 铜屋中的艺术品（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-6.jpg" alt="hefang-street-6.jpg">&lt;span class="caption">※ 铜屋中的艺术品（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-7.jpg" alt="hefang-street-7.jpg">&lt;span class="caption">※ 铜屋中的艺术品（三）&lt;/span>&lt;/p>
&lt;p>怀旧商铺也是很有意思的地方。河坊街中这样的商铺有好几家。虽然我是个九零后末端的人，但也算是接触过八零后、九零后童年经典要素的人。店铺里贩卖的东西我小时候基本都玩过。现在，那些驰骋在网络世界中的中小学学生们，课下都是用手机游戏消遣时光，很少再有机会玩到这些朴素的玩具了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-8.jpg" alt="hefang-street-8.jpg">&lt;span class="caption">※ 怀旧商铺（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-9.jpg" alt="hefang-street-9.jpg">&lt;span class="caption">※ 怀旧商铺（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-10.jpg" alt="hefang-street-10.jpg">&lt;span class="caption">※ 怀旧商铺（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-11.jpg" alt="hefang-street-11.jpg">&lt;span class="caption">※ 怀旧商铺（四）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-12.jpg" alt="hefang-street-12.jpg">&lt;span class="caption">※ 怀旧商铺（五）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-13.jpg" alt="hefang-street-13.jpg">&lt;span class="caption">※ 怀旧商铺（六）&lt;/span>&lt;/p>
&lt;p>河坊街中还有很多卖杂货的店铺，卖辣椒酱的店铺，在道路中间小木屋里卖工艺品的店铺。这些店铺其实在以古城为卖点的地方都很常见。毕竟我在开封生活过很多年，开封的仿宋复古建筑很多，这样的店铺也很多。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-14.jpg" alt="hefang-street-14.jpg">&lt;span class="caption">※ 杂货铺&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-15.jpg" alt="hefang-street-15.jpg">&lt;span class="caption">※ 汉服店&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-16.jpg" alt="hefang-street-16.jpg">&lt;span class="caption">※ 西洋镜&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-17.jpg" alt="hefang-street-17.jpg">&lt;span class="caption">※ 辣椒酱&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-18.jpg" alt="hefang-street-18.jpg">&lt;span class="caption">※ 编织的工艺品&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hefang-street-19.jpg" alt="hefang-street-19.jpg">&lt;span class="caption">※ 风车&lt;/span>&lt;/p>
&lt;p>中午，天空乌云密布，虽然不见太阳，但温度仍在逐渐升高。湿热的空气打消了我继续游玩的念头。本想随便找家面馆吃一顿，罢了，既然河坊街已经逛完了，回学校吹空调吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/hefang-street-in-the-dragon-boat-festival-2021/" target="_blank" rel="noopener">https://guanqr.com/life/travels/hefang-street-in-the-dragon-boat-festival-2021/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category></item><item><title>
记忆之外的紫金港</title><link>https://guanqr.com/life/school/zijingang-beyond-memory/</link><guid isPermaLink="true">https://guanqr.com/life/school/zijingang-beyond-memory/</guid><pubDate>Sat, 05 Jun 2021 08:19:34 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">昨&lt;/span>天（周五）从玉泉赶到了紫金港，参加本科阶段最后一次的体质测试。最近几天总是下雨，我就一直祈祷周五这天千万要晴天，要是下大雨，一千米的成绩怕是很不好看。很幸运，周五是多云，层层的云朵遮挡住了阳光，气温不算高，在中午跑步的时候皮肤不会被强烈的阳光灼烧。测试完成后，还不到三点，我就想着先在校园里逛逛，等到五点吃个晚饭再回玉泉。&lt;/p>
&lt;p>我对紫金港的感觉是怎样的？本科前两年，我都是在紫金港生活的。在大西区完工开放前，我熟悉这里的每一栋建筑，去过这里的每一个角落，我认识这里的一草一木。我来到玉泉后，大西区开放了，校园的面积扩大了一倍。那些新盖的教学楼和宿舍楼，我都不知道叫什么名字，它们在我的记忆之外。离别之时，我想走进大西区，真正认识一下这里的一切。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-0.jpg" alt="zijingang-beyond-memory-0.jpg">&lt;span class="caption">※ 校车停靠的站点&lt;/span>&lt;/p>
&lt;p>穿过医学院前的马路，就是紫金港的北门。虽说是北门，但只有门，没有路。大概是学校用完了资金，没有钱来修路修桥了吧。再往前走应该是大西区的留学生食堂了。听说这里的食堂菜品很多，可惜我到现在也没有到那里吃过。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-1.jpg" alt="zijingang-beyond-memory-1.jpg">&lt;span class="caption">※ 大西区的北门&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-2.jpg" alt="zijingang-beyond-memory-2.jpg">&lt;span class="caption">※ 装饰路边的「求是」二字&lt;/span>&lt;/p>
&lt;p>大西区的建筑风格很统一，红色复古的墙面加上现代化的玻璃窗。走进细看，才发现这些红色的墙面就是红砖本身的颜色，并没有刷什么红色的漆。以往看村里的人建房子，在用红砖搭好墙面后，都会用水泥石灰将红砖覆盖，然后再刷一层浅色的漆。我从未想过，直接使用红砖的视觉效果毫不逊色——这就是建筑设计的魅力吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-3.jpg" alt="zijingang-beyond-memory-3.jpg">&lt;span class="caption">※ 大西区建筑群（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-4.jpg" alt="zijingang-beyond-memory-4.jpg">&lt;span class="caption">※ 大西区建筑群（二）&lt;/span>&lt;/p>
&lt;p>路旁的树木都是刚种下不久的，树干依然用绳子和木杆支撑着。很多教学楼也才刚刚建好，楼中空无一人。现在紫金港的校园真大啊。我刚入学的时候，就感觉紫金港的面积很大很大，每次上课从生活区走到教学区就已经一万多步了。现在面积更大了，像是一座隐匿在杭州郊区的小镇。我真希望能在紫金港多生活几年。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-5.jpg" alt="zijingang-beyond-memory-5.jpg">&lt;span class="caption">※ 大西区建筑群（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zijingang-beyond-memory-6.jpg" alt="zijingang-beyond-memory-6.jpg">&lt;span class="caption">※ 大西区建筑群（四）&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/zijingang-beyond-memory/" target="_blank" rel="noopener">https://guanqr.com/life/school/zijingang-beyond-memory/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
困在时间里的父亲</title><link>https://guanqr.com/life/films/the-father-trapped-in-time/</link><guid isPermaLink="true">https://guanqr.com/life/films/the-father-trapped-in-time/</guid><pubDate>Mon, 31 May 2021 11:58:35 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-0.jpg" alt="the-father-trapped-in-time-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>部电影在今年各类电影节中提名无数，主演安东尼·霍普金斯老爷子也凭借传神的演技再一次荣获了奥斯卡最佳男主角的奖项。目前国内确定引进，在今年六月中旬上映院线。最近半年因为忙于学业，我基本上没有像去年那样看很多电影。但在今年年初第一次看到这部电影的预告片时，我就觉得，这一定是一部很出色的电影，我一定要去看。因为演员的阵容，场景的布置，电影想要传达给观众的情感，都是十分独特的。&lt;/p>
&lt;p>这部电影的原名是 &lt;em>The Father&lt;/em>，而国内的翻译是「困在时间里的父亲」。单单从名字上来看，中文翻译能够表达出更多的内容，也更加吸引观众。「父亲」，一定是讲述一个家庭的故事。为什么说是「困在时间里」，是科幻？是阿兹海默症？相信看到这个电影名字的人，都会思考这样的问题。事实上，这部电影讲述的就是一个患有阿兹海默症的老人的生活。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-1.jpg" alt="the-father-trapped-in-time-1.jpg">&lt;/p>
&lt;p>影片中没有什么大场面，只有一个宁静的房间，还有几位角色：父亲，他的女儿，女儿的丈夫，保姆、医护人员。所有的故事都发生在室内，并且所有的故事都是以老人的视角进行讲述的。这就意味着，观众所看到的故事画面和这位患有阿兹海默症的老人一样，是非线性的，是混乱的。虽然这样的叙事手法需要观众每时每刻都要思考，画面中的这个场景发生在哪个时间段，出场的人物到底是正常人视角中的人，还是老人的错乱记忆中记错了的人。但这更能让观众深刻体验到，一个阿兹海默症患者一天是怎样度过的，更能让观众共情。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-2.jpg" alt="the-father-trapped-in-time-2.jpg">&lt;/p>
&lt;p>老人很爱自己的女儿，或者说很依赖自己的女儿。他每天起床的第一时间就是找女儿在哪里。他不喜欢女儿请来的保姆，只希望女儿能够永远陪着自己，照顾自己。当他听女儿说要搬去巴黎的时候，他很失落，他担心女儿无法适应法国的生活，他担心自己被家人抛弃。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-3.jpg" alt="the-father-trapped-in-time-3.jpg">&lt;/p>
&lt;p>女儿虽然安慰父亲，周末有空的时候会从巴黎回来看望他，但女儿心里很清楚，下一次再见父亲的时候，父亲很可能就已经忘记了她是谁。影片特意在女儿离开的场景停留了很长的时间。从这个画面，我感受到了女儿的不舍，感受到了老人独自在公寓生活的孤独。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-4.jpg" alt="the-father-trapped-in-time-4.jpg">&lt;/p>
&lt;p>影片中和老人冲突最大的人，是女儿的丈夫。事实上，这是老人眼中的某个人的形象，并不是真正的女儿的丈夫。老人很可能在过去遭受过别人的厌倦，遭受过养老院医生的虐待。虽然有时候老人和女儿意见不合，但女儿还是十分尊重和关心老人的。但女儿的丈夫，常常在女儿不在的时候，对老人说出一些不敬的言语，嫌弃老人给自己带来了很多麻烦。希望老人快一点搬去养老院。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-5.jpg" alt="the-father-trapped-in-time-5.jpg">&lt;/p>
&lt;p>影片的最后，老人终于意识到自己生活在养老院中。他忘记了自己是谁，他把自己的女儿记成了自己的母亲，他很想让自己的母亲把他接走。他像个小孩子一样，委屈地哭了，说道：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Do you know her? My mother. She had such big eyes. I can see her face now. I hope she'll come and see me sometime. Do you think? Mommy. You were saying she might come occasionally at hte weekend. I want my mommy. I want my mommy. I wanna get out of here. Have someone come and fetch me? I want my mommy. I want her to come and fetch me. I want to go home. I fell as if I'm losing all my leaves. The branches and the wind and the rain. I don't know what's happening anymore. Do you know what happening? All this business about the flat. I have nowhere to put my head down anymore. But I know my watch is on my wrist, that I do know. For the journey. If not, I don't know if I'll be ready to...&lt;/p>&lt;/blockquote>
&lt;p>老人放心地依靠在了护士的肩上，这一刻，我也留下了眼泪……&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-father-trapped-in-time-6.jpg" alt="the-father-trapped-in-time-6.jpg">&lt;/p>
&lt;p>安东尼·霍普金斯表演过的最具代表性的角色应该是《沉默的羊羔》中的「汉尼拔」。虽然现在已经八十多岁了，但他依然精神饱满，坚持奋斗在演艺事业中。前几年大火的神剧《西部世界》，他参演了其中的重要角色「福特」。当然还有漫威系列中的「奥丁」。在我的印象中，他总是饰演一些充满智慧，有风度，又带有一些邪性的角色。这一次，他对阿兹海默症患者的行为和面部表情的精湛表现，让我在惊讶之余，只能大呼妙哉，&lt;/p>
&lt;p>电影虽然讲述的是阿兹海默症老人的故事，但其核心并非仅仅是让观众注意到阿兹海默症这一种常见的「病」，还有「家庭」这一大的主题，作为子女对长辈的关怀。用几千字对这部电影进行简短地评析，是远远不够的。和我们平时常看的商业爽片不同，这部电影的「真实味道」还是需要观众亲自观看才能真正感触到。6 月 20 日正好是父亲节，在这样一个时间段来欣赏这样一部电影，我觉得是很有意义的一件事。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/the-father-trapped-in-time/" target="_blank" rel="noopener">https://guanqr.com/life/films/the-father-trapped-in-time/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/family/">家庭</category><category domain="https://guanqr.com/tags/love/">爱</category></item><item><title>
大草坪，半夏，音乐节</title><link>https://guanqr.com/life/school/cc98-banxia-musical-festival/</link><guid isPermaLink="true">https://guanqr.com/life/school/cc98-banxia-musical-festival/</guid><pubDate>Sun, 23 May 2021 15:53:56 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-0.jpg" alt="cc98-banxia-musical-festival-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">还&lt;/span>记得四年前的「夜未央」吗？可能对于很多 2018 年以后才来浙大的同学来说，这个名字很陌生。因为「夜未央音乐会」在 2018 年突然宣布停办，十年的旅途结束了。大概是因为主办方「缥缈水云间 BBS」的没落，现有资金不足以继续投入到举办音乐会。对于我，在浙大百廿年时入学的人来说，也没有来得及赶上最后一场。&lt;/p>
&lt;p>此后，CC98 论坛成立了「什么工作室」，他们是一群对音乐充满热爱的人，用爱继续将音乐节延续下去。今年的「什么音乐节」，叫作「半夏」。&lt;/p>
&lt;p>想象一下这样的场景，五月中旬的某个夜晚，玉泉毛主席雕像前的大草坪上，一群热爱音乐的人聚集在一起，畅快地演奏着自己喜爱的乐曲。虽然没有多么豪华的舞台和灯光，但大草坪就是那一夜最好的舞台。台下，观众们坐在草坪上，亦或是站在外围充满古韵的教学楼前，一起享受着那最辉煌的时刻。这就是青春啊。&lt;/p>
&lt;p>大学四年以来，我由于种种原因，没能参加到前几届的音乐节。通过同学们在论坛里分享的图片，我能感受到那种独特的氛围——这是我在自习室或者宿舍，学习或者看剧的时候感受不到的。临近毕业，这是我在浙大能够参加到的最后一场音乐节，这一次，我一定要去。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-1.jpg" alt="cc98-banxia-musical-festival-1.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-2.jpg" alt="cc98-banxia-musical-festival-2.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-3.jpg" alt="cc98-banxia-musical-festival-3.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-4.jpg" alt="cc98-banxia-musical-festival-4.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-5.jpg" alt="cc98-banxia-musical-festival-5.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-6.jpg" alt="cc98-banxia-musical-festival-6.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/cc98-banxia-musical-festival-7.jpg" alt="cc98-banxia-musical-festival-7.jpg">&lt;/p>
&lt;p>我通过论坛的各种讨论得知，这次音乐节的举办并不顺利。论坛为了筹办音乐会产生了巨额的花销，不知道明年是否还有足够的资金办下去。音乐节的时间有限，有些乐队能够演奏的歌曲被限制在了两首，而有些乐队却能演奏五首，这让那些受限的乐队感到不满。有些观众抱怨乐队们为了炫技演奏了一些小众的歌曲，很多人没听过，感受不到音乐会应有的嗨起来的氛围。&lt;/p>
&lt;p>其实不论举办什么活动，都不可能让所有人满意的。不过既然音乐会是免费的，又没有强制你参加，能听几首同学们自己演奏演唱的歌曲，感受夏日夜晚的热情，还「要什么自行车」？希望音乐会能一直办下去，虽然我以后可能没机会再参与了，但我觉得，能够让将来的学生们有机会参与到这样的活动中，也算是浙大精神的一种「传承」。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/cc98-banxia-musical-festival/" target="_blank" rel="noopener">https://guanqr.com/life/school/cc98-banxia-musical-festival/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/music/">音乐</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
扎导献给粉丝的一场盛宴</title><link>https://guanqr.com/life/films/justice-league-snyders-cut/</link><guid isPermaLink="true">https://guanqr.com/life/films/justice-league-snyders-cut/</guid><pubDate>Fri, 21 May 2021 09:56:32 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">去&lt;/span>年中下旬听到扎克·施奈德导演决定放出导演剪辑版《正义联盟》的时候，我震惊了。可能很多非影迷朋友不太了解这一情境，用简单的话概括，就是在你满怀期待地等待着某个人为你献上某个事物的时候，却等到了另一个人送你的一袋垃圾，并且周围的众多人都说，你期待的那个事物并不存在。但你一直坚信那个事物是存在的，你坚持自己的信念坚持了四年，最后真的等到了那个你期待已久的事物。&lt;/p>
&lt;h2 id="扎克施奈德的作品风格">&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/#扎克施奈德的作品风格" class="anchor-link" aria-label="扎克施奈德的作品风格">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>扎克·施奈德的作品风格&lt;/h2>
&lt;p>第一次关注到扎导是在看他所拍摄的电影《守望者》的时候。对于《守望者》，不论是原著漫画还是改编的电影，都在美漫领域有着重要的地位。三个半小时时长的电影，油画般的画面，独特的配乐，以及超长慢镜头，都给我留下了深刻印象。后来我观看了他导演的《斯巴达 300 勇士》以及《美少女特工队》，这些电影让我对于扎导的风格有了更深入的认识。我惊叹，这样的电影才叫艺术！&lt;/p>
&lt;p>当前许多电影都充斥着平淡的镜头，平庸的配乐，故事剧情爆米花，合家欢。观众喜欢看这样的电影。因为观众习惯了这样的商业电影模式。就像在读书的时候，我们遇到简单的故事会采用囫囵吞枣式的速读，不需要仔细思考就知道这本书究竟讲的是什么故事。如果是科幻电影，看特效就完事了；如果是动作电影，打打杀杀就完事了。观众不会去思考，要的就是一个字——爽。而扎导总是会将人物的背景放置在镜头画面中，让镜头说话，而不是用人物台词直接讲出来。他还会使用一些故事情节隐喻一些宗教内容。这就使得观众需要认真观看电影画面，细细品味电影情节，才能理解导演想要传达的故事内涵。直白一点地说，就是在一幅画面中，光影的角度，角色站的位置，墙上挂的什么画，桌子上放着什么东西，这些都会有一定的含义。如果一个观众只是傻傻地等着角色开口告诉他接下来要发生什么事，那他可能就要失望了，因为这幅电影画面已经告诉了观众所发生的故事。&lt;/p>
&lt;p>一些观众不太喜欢扎导的风格。他们不理解观众看一部电影，非要在镜头中隐藏那么多内容干什么，非要有那么多隐喻干什么。观众是来看电影的，不是来思考、学习宗教的。他们说扎导不会讲故事，每次拍电影非要用三四个小时才能讲好一个故事，搞一些高深的镜头语言就是故弄玄虚。因为伊斯兰教信仰者被称作是「穆斯林」，他们戏称那些吹捧、信奉扎导的观众为「扎斯林」。最初这个名词肯定是带有贬义的，但现在，似乎成为了一个中性的词。&lt;/p>
&lt;h2 id="dc-与漫威的不同之处">&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/#dc-与漫威的不同之处" class="anchor-link" aria-label="dc-与漫威的不同之处">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>DC 与漫威的不同之处&lt;/h2>
&lt;p>DC 和漫威是美漫中影响力最大的两个公司。各家创作出的具体人物角色和故事这里就不多说了。在我的印象里，最经典的超级英雄影视作品是上世纪七十年代末拍摄的《超人》系列，然后是八九十年代的《蝙蝠侠》系列。这时候的超级英雄电影虽然已经形成了系列电影，每一部都会安排一些漫画中经典的反派，但各英雄之间并没有联动。后来在二十一世纪初，漫威将自己的一些角色影视改编权卖出，拍出了《刀锋战士》《X 战警》《蜘蛛侠》《恶灵骑士》等电影，但也没有像漫画里那样角色间的互动。我觉得其中的一部分原因，一是不同角色版权在不同的公司当中，蜘蛛侠在索尼，X 战警在福克斯，所以很难有互动；二是一个英雄角色可以开发的故事已经足够丰富，每个故事安排一到两个反派足矣，如果角色太多，故事情节就会变得很复杂。&lt;/p>
&lt;p>后来漫威被迪士尼收购，成立了漫威影业部门，出现了凯文·费奇——一个传奇的人物。当 DC 那边由诺兰导演的《黑暗骑士》系列大爆的时候，漫威这边悄无声息地上映了《钢铁侠》。在这部电影的结尾，神盾局的尼克弗瑞出现，提出了构建复仇者的计划。于是，漫画中复仇者联盟中的角色逐渐被搬上了大银幕。在《无敌浩克》中，托尼·斯塔克解决了憎恶的问题。《美国队长》问世，让我们看到了神秘的宇宙魔方。在《钢铁侠 2》的最后，神盾局特工科尔森来到了雷神之锤的降落地……最终，《复仇者联盟》登场，灭霸开始收集无限宝石，开启了英雄之间联动的新纪元。很多人第一次知道，原来不同的超级英雄生活在同一个世界观中。&lt;/p>
&lt;p>凯文·费奇对于漫威影业的发展有着十分明确的规划。让不同的导演拍摄不同的超级英雄故事，使影片的风格多元化。作为 CEO，他会对整体的剧情进行操控，让导演在每一部电影中都埋下一些主线剧情的伏笔。所以到现在，观众们会看到，最初那些不同电影中看似不相关的内容，宇宙魔方、洛基的权杖、以太粒子等等，最后都是无限宝石。每上映一部新的电影，都会对以前电影中挂的坑进行填补，这就让粉丝们大呼过瘾。&lt;/p>
&lt;p>然而 DC 并没有如此幸运。从《钢铁之躯》开始，对于 DC 宇宙发展进行整体布局的人只有扎克·施耐德。要知道，和凯文·费奇不一样，扎导仅仅是一个导演，他在华纳影业那里并没有什么话语权，对于 DC 宇宙的规划也仅仅只能代表他自己的观点。至于电影是否会按照扎导的计划拍摄，那完全取决于华纳高层领导的决策。所以，这就导致了两个很明显的问题。一方面，尽管扎导为神奇女侠、海王等角色挑选了合适的演员，但由于这些电影不是他亲自导演的，剧情上存在前后矛盾的地方。另一方面，扎导很用心的拍完一部电影后，华纳总想缩短电影时长，在有限的时间里播放更多的场次以赚取更多地票房。这就导致最终登陆院线的版本剧情不太连贯，口碑票房双失利，最终又不得不再发布一个所谓的导演剪辑版来卖碟。&lt;/p>
&lt;p>华纳对于导演过度的干涉以及华纳对于电影票房过度的追求导致了 DC 电影一直处在苟且残喘的阶段。每一年都有新的 DC 电影上映，每一部电影都使用了上一部电影的原班人马，但剧情上却和上一部连不起来。《自杀小队》就是这种局面的经典代表作。上映了两部，一部比一部烂。接下来马上还要上映第三部，虽然第三部导演换成了漫威《银河护卫队》的古恩导演，理论上应该靠谱一点。&lt;strong>但究竟口碑如何，现在下定论还为时尚早&lt;/strong>。电影上映后口碑还可以，古恩导演将自杀小队从死亡线上拉了回来。&lt;/p>
&lt;p>扎导作为 DC 电影宇宙的奠基者，影响了 DC 电影的主要基调，黑暗、深刻、苦大仇深。每一部电影里的每一个角色似乎都有说不尽的痛苦。正如漫威电影《死侍》里死侍向电索吐槽的那样——&lt;em>So dark! Are you from the DC universe?&lt;/em>。不像漫威在正反两派对决的时候还会欢乐斗嘴。在扎导退出《正义联盟》的拍摄后，华纳似乎在刻意地进行「去扎化」。《海王》的画面色彩亮丽，配乐欢快。《雷霆沙赞》的剧情主要面向低龄化儿童。《神奇女侠 1984》中莫名其妙的爱与和平。观众都看出来这些新电影和原来的电影有着明显不同的基调。有一种说法叫做「软重启」，就是说电影续集的人物角色不变，讲的却不是上一部故事的后续故事，故事背景与上一部不同，甚至自相矛盾。但我总觉得，刻意地改变这些元素对于塑造人物形象并没有太多的帮助。说白了，就是不对味。&lt;/p>
&lt;h2 id="导剪运动的胜利">&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/#导剪运动的胜利" class="anchor-link" aria-label="导剪运动的胜利">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>导剪运动的胜利&lt;/h2>
&lt;p>扎导退出《正义联盟》的拍摄时，「尾灯」（乔斯·韦登）临危受命，按照他个人的想法修改了剧本，补拍了所需镜头。尾灯是《复仇者联盟》的导演。在复联 2 口碑下跌后，他被漫威扫地出门，由罗素兄弟接任。虽然尾灯导演有指导多人英雄电影的经验，但不得不承认的一个事实就是，他的导演风格不适合 DC。一些偏向史诗级别的故事情节，尾灯总要加一些低俗恶趣味进来已达到幽默风趣的地步。想象一下这样的场镜——主人公正在奋力保卫城市，在激烈的战斗中却还在聊着中午吃的饭好不好吃——很尬。&lt;/p>
&lt;p>尾灯接手后发布的预告片已经预示了电影的失败。经典的低饱和度扎式滤镜改为了高饱和度色彩鲜明的尾灯滤镜，战场画面莫名其妙地渲染上了浓郁的红色，似乎在掩盖特效的不足。电影上映后，看着银幕前讲着莫名其妙台词的中二妈宝狼，补拍镜头中超人诡异的特效下巴，汉堡吃多发福的蝙蝠侠，我心中一凉，DC 没希望了。&lt;/p>
&lt;p>随后，导剪运动在全球范围内开启。电影中并没有出现之前扎导拍摄过的部分镜头——闪电侠冲破玻璃窗营救一见钟情的女友，钢骨在哥谭橄榄球赛事上的风光。影迷们相信，扎导最初提交审核的三个多小时的粗剪版，和现在上映大银幕的版本完全不同，他们希望华纳能允许扎导发布最初的故事剧情。很多人认为这是不可能的事，扎导已经退出，正义联盟口碑跌入谷底，华纳不可能再为这样一部烂片多花一分钱，更不会去找已经退出的扎导，更何况没人知道最初到底有没有拍摄好完整的故事。然而，扎导似乎也在默默地关注着这件事，这几年里，他时不时地在社交账号中发布一些有关正联的剧照、电影分镜等等。扎导也成为了北美票房榜吧最热议的话题和导演。只要出现了扎导二字，这个帖子的楼层绝对是当天最高的。&lt;/p>
&lt;p>从扎导时不时发出的动态里，我们知道，荒原狼最初的设计十分霸气；达克赛德会在电影里出现；钢铁之躯中的那位军官就是火星猎人，他伪装成了超人的养母和路易斯见面；郑凯在电影里饰演了原子侠……虽然已经过去了四年，但扎导依然在为影迷们分享着他拍摄正脸的经历，似乎也在不断为影迷们加油，让他们坚持导剪运动。&lt;/p>
&lt;p>最后，出乎任何人的意料，导剪运动胜利了。一原本一件成功率 0% 的事最后居然成功了。感谢流媒体平台的诞生，感谢华纳高层领导的更替，扎导宣布导剪版的正义联盟会发布在华纳的流媒体平台。当预告片发布的那一刻，看着一幕幕从未见过的场镜播出，背景音乐是经典的《哈利路亚》。我热泪盈眶，我知道这一战影迷们胜利了。&lt;/p>
&lt;h2 id="人物形象塑造">&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/#人物形象塑造" class="anchor-link" aria-label="人物形象塑造">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>人物形象塑造&lt;/h2>
&lt;p>导剪版的剧情就不必进行多余的评价，整体框架和银幕版的差不多，只不过增加了很多丰富人物形象的剧情，让故事更为饱满。比起剧情，我更想说的是电影中关于人物形象的设计。&lt;/p>
&lt;p>在扎导的电影中，超人的形象得到了前所未有的突破。在原先的影视作品里，超人的服饰就是简单地蓝色紧身衣，红色内裤，胸前一个标准的印刷体 S。但扎导为超人的服饰增加了十分细腻的纹路，为氪星全新设计了一套语言和文字，为氪星不同家族设计了全新的盾徽。S 不再仅仅是 Super 的意思，它成为了艾尔家族的标志。胸前的 S 周围，环绕着用氪星文字书写的英雄赞歌。超人也不再仅仅是一个完美的英雄形象，他在成长中充满着对人类社会和自我的思考。虽然面对众人的质疑，他依然选择拥抱这个社会。多谢堪萨斯州善良的肯特夫妇，要是没有他们用爱去呵护，超人就不会成为大家心目中的那个英雄。&lt;/p>
&lt;p>蝙蝠侠的形象也很鲜明。扎导选择了暮年阶段的布鲁斯·韦恩的形象。养子被小丑杀害，忧郁而沧桑。战衣上充满了战斗时留下的划痕。他为维护哥谭治安奋斗了一辈子，到头来却仍然孤独一人。我最喜欢的一个造型是「梦魇」蝙蝠侠。这个蝙蝠侠的形象在之前的影视作品中从未出现过。末世中，沙尘布满整个城市。超人沦为了达克赛德的统治工具，一群肩上贴着超人标志的信徒在搜捕蝙蝠侠的手下。蝙蝠侠不再披着黑色斗篷，而是穿着破旧的黄色皮大衣，头戴护目镜，肩上挂着贴着小丑扑克的机枪，与这已经沦陷的城市融为一体。&lt;/p>
&lt;p>这是扎导为 DC 宇宙留下的遗产。虽然扎导已经离开 DC，但不得不承认，扎导塑造的人物形象一直影响着后来的相关影视作品。&lt;/p>
&lt;h2 id="最后想说的话">&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/#最后想说的话" class="anchor-link" aria-label="最后想说的话">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>最后想说的话&lt;/h2>
&lt;p>扎克·施奈德导演并不是神，毋庸置疑，他的电影基本上都存在叙事上的缺陷。不过我觉得，在影视行业里需要有这种类型的导演，需要存在这类导演拍出来的作品。如果电影的叙事结构最终都归一化了，这并不是什么好事。就像维伦纽瓦导演，拍了《降临》和《银翼杀手》，还有今年上映的《沙丘》。维伦纽瓦的导演风格也十分另类，喜欢使用超广角的慢镜头景象来烘托氛围。如果观众仅仅是一个传统爆米花爱好者，对于这些构图精妙的镜头，他只会觉得莫名其妙，节奏缓慢，浪费时间。感谢扎导，让如今的爆米花电影也能给人耳目一新的感觉。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/justice-league-snyders-cut/" target="_blank" rel="noopener">https://guanqr.com/life/films/justice-league-snyders-cut/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/warner/">华纳</category><category domain="https://guanqr.com/tags/super-hero/">超级英雄</category><category domain="https://guanqr.com/tags/zack-snyder/">扎克·施奈德</category></item><item><title>
坚持跑步，健康生活</title><link>https://guanqr.com/life/ideas/keep-running/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/keep-running/</guid><pubDate>Thu, 20 May 2021 16:11:14 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">很&lt;/span>久没做过体检了，最近去学校附近某个三甲医院做了个二百多块钱的体检套餐，虽然没查出什么大毛病，但是一些地方还是出现了小问题。遂感叹，身体是本钱，在学习工作中，一定要关注自己的身体健康。大概是从幼儿园记事起，我就意识到自己身体素质不如别人了。每学期的体检上，我的体重那一栏总会写着「超重」二字。以前和小伙伴们在大院里做游戏的时候，我总追不上别人。正式上学后，在体育课上，我跑步也跑不过别人。&lt;/p>
&lt;p>我确实不喜欢运动，但并不是所有的运动都不喜欢。我挺喜欢球类运动的。羽毛球，篮球，还有足球，会而不精，近些年忙于学业，玩的也少了。我还喜欢骑行，以前初中离家还有一定的距离，别人都是坐公交去上学，我选择骑我的山地车。郑开大道我也骑过，虽然只是骑了一小段距离。我只是不喜欢跑步，因为跑步的时候会听到自己的急促的呼吸声，让我很不舒服。&lt;/p>
&lt;p>我到现在依然清楚地记得，一千米唯一一次跑进四分钟是在中考体育测试的时候。那天下午，喝了瓶红牛，从学校走到一中的跑道上，听完指令，就开始竭尽全力地奔跑。在这之前我因为懒惰，从来没有完整地跑过一千米。但这一次，我脑子里什么都没有想，只是紧紧跟上前面一个人的步伐，拼命往前冲。我听到了操场外围观家长的加油鼓劲声，我听到了空气从我耳旁掠过的轰鸣声。我没有停歇，直到冲向终点。那是我第一次知道竭尽全力跑完后，双腿会站不住，总想倒在地上。那是我第一次知道竭尽全力跑完后，嘴里会有血腥味。&lt;/p>
&lt;p>高中以后，体测成绩就变得没有那么重要，我每学期一千米测试的成绩稳定在了四分半左右。到了大学，大二修完了毕业要求的四门体育课，后来就基本再也没有运动过。大三的时候，缺乏运动，在学校经常点外卖，放寒假时又遇到新冠疫情，居家肥宅快乐，体重飞速上升二十斤。那一年的体侧，跑一千米的时候，我感觉到，我真的跑不动了。&lt;/p>
&lt;p>我测了测自己的心率，每分钟八九十次，太快了，随着体重的上升，心脏的负担也在加重。一个年纪轻轻的人，不应该将自己的健康丢弃。于是我立了一个 FLAG：每天坚持跑步三千米。一是为了减肥，不要等到拍毕业照的时候，留在别人记忆里的我是个很胖的形象；二是为了体侧，我大学最后一次的体侧一千米还没有测，我要为此做好准备；三是为了保持健康，养成每天运动的好习惯。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/keep-running.jpg" alt="keep-running.jpg">&lt;/p>
&lt;p>这学期开学返校后，我每天都坚持在操场上跑步。到现在已经过去将近三个月了，这个 FLAG 一直没有倒下。刚开始的时候，我只能连续跑两圈，之后就要跑半圈停下来走几步。两周过去后，我能坚持连续跑三圈了。再后来，过了一个月左右，我终于能够一口气跑完三千米，甚至有一次咬牙跑完了五千米。&lt;/p>
&lt;p>如果气温不高的话，我会选择在下午跑步，因为那时候操场上的人少，只有一些校队的人在进行体能训练。最近已经入夏，下午的温度太高，我只好改成在晚上跑了。我也在校外的马路上跑过一段时间。当时觉得每天在操场上绕圈跑有些乏味，不如到校外的植物园越野跑。沿着植物园外面这条马路，一直往前跑三千米正好能够到达灵隐寺。我跑步的时候还能欣赏路边的花花草草，这是多么惬意的时光。&lt;/p>
&lt;p>经过这些日子的锻炼，我的体重有所下降，心率变得平稳了些，血压也恢复了正常。这学期每天都在忙于做毕设，面对一个又一个难以解决的问题，心理负担很重。在跑步的时候，我能够短暂地忘记这些烦恼，眼前只有红色的跑道。我也不再讨厌急促的呼吸声，反而更加享受每一天中这最安逸的时刻。&lt;/p>
&lt;p>希望我的这个 FLAG 永远不会倒下。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/keep-running/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/keep-running/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/health/">健康</category><category domain="https://guanqr.com/tags/pressure/">压力</category></item><item><title>
清明小记</title><link>https://guanqr.com/life/travels/tome-sweeping-day-2021/</link><guid isPermaLink="true">https://guanqr.com/life/travels/tome-sweeping-day-2021/</guid><pubDate>Tue, 13 Apr 2021 14:07:44 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/tome-sweeping-day-2021-0.jpg" alt="tome-sweeping-day-2021-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">江&lt;/span>南地区每年大概只有三个季节：夏季、冬季和雨季。春风从东海岸登陆，为江南地区因没有暖气而蜷缩在家中的人们带来了温暖和充足的降水。一夜之间，那些掉落了一整个冬天落叶的树木的枝头，都抽出了嫩绿的新芽。春季的雨水虽大，但每一滴雨的体积却很小。绵绵不断的细雨落在身上的感觉就像母亲的双手抚摸着孩童的脸庞。校园的操场上，苏醒的鸟儿正在寻找草丛中的蚯蚓，松鼠们偷偷躲在树下啃着掉落的果实。&lt;/p>
&lt;p>而后，雨停了，清明节。这是我在杭州度过的第四个清明节，大概也是最后一个。我不记得以往清明节的时候是否是晴天，今年，虽然没有杜牧所写的「清明时节雨纷纷」的景象，但如「路上行人欲断魂」那般的感伤却依然在内心回荡。&lt;/p>
&lt;p>清明节前的一周，我回了趟家。母亲做了我最爱吃的炖鸡，买来了回味无穷的驴肉火烧。如果说这次回家是为了吃上这些只有在家才能吃到的东西，倒也不错。回家嘛，当然是因为想念在家的生活，想念温馨的感觉。还记得这学期开学返校前的那天，我匆匆忙忙收拾好行李。第二天一大早，母亲开车送我到火车站，我走进了候车室，看到她依然在门外注视着我，内心竟有一些酸楚。&lt;/p>
&lt;p>学校的课程都修完了，只剩下一个毕业设计和最后一学期的体质测试。往年的这个时候，我都将自己置身于无限的忙碌之中——每天奔波在不同的教室上不同的课，回到宿舍凭着学到的半懂不懂的知识写作业——这样似乎就能忘记一些让我烦恼的事。而现在，我停下了忙碌的脚步，乱七八糟的事情就涌进了我的大脑，开始每天思考过去、现在和未来。我在这些年都做了些什么，有哪些让我后悔的事，我的未来应该怎样度过……&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tome-sweeping-day-2021-1.jpg" alt="tome-sweeping-day-2021-1.jpg">&lt;/p>
&lt;p>我再一次来到了孤山。以前晚上散步的时候经常从学校走到西湖边上，然后绕到孤山的这条路，看着夜色下湖对岸的雷峰塔。这次我并非是来散步的，而是不想在离开杭州之际留下遗憾——我还没参观过孤山下的浙江省博物馆和西泠印社。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tome-sweeping-day-2021-2.jpg" alt="tome-sweeping-day-2021-2.jpg">&lt;/p>
&lt;p>由于是节假日，西湖边上的游客很多。以前和同学游玩的时候，我说我不太喜欢人多的地方。因为我喜欢拍自然风光的照片，照片里如果出现了很多穿着花花绿绿衣服的人就很违和。而同学却说，他就喜欢在照片里多拍点人，这才能真实反映现场环境的人文和热闹氛围。我觉得这两种想法都有各自的道理。早上去西泠印社的人很少，可能是大部分人都没有注意到它那扇很不起眼的入口小门。博物馆门口却排起了长长的队伍。其实这一天博物馆并没有什么特别的展出活动，只有传统的陶瓷展，但大家都充满了热情。&lt;/p>
&lt;p>博物馆的西侧小屋正在举办一个讲座。讲座内容的主人公是常书鸿。这位先生我熟悉，我曾经在《读者》上看过他一辈子守护敦煌的故事。向里望去，地面上摆放着的是那种古朴的木质长凳，很多游客都在里面静静听讲。我本也想静心领略先生为传统美学奉献的一生，无奈时间有限，我默默地离开了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tome-sweeping-day-2021-3.jpg" alt="tome-sweeping-day-2021-3.jpg">&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/tome-sweeping-day-2021/" target="_blank" rel="noopener">https://guanqr.com/life/travels/tome-sweeping-day-2021/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/pressure/">压力</category><category domain="https://guanqr.com/tags/research/">科研</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
Waline 评论系统的介绍与基础配置</title><link>https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/</link><guid isPermaLink="true">https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/</guid><pubDate>Thu, 01 Apr 2021 06:20:40 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="引言">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#引言" class="anchor-link" aria-label="引言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:引言" class="headings">引言&lt;/a>&lt;/h2>
&lt;h3 id="为何使用评论系统">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#为何使用评论系统" class="anchor-link" aria-label="为何使用评论系统">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:为何使用评论系统" class="headings">为何使用评论系统&lt;/a>&lt;/h3>
&lt;p>在两年前刚开始写博客的时候，我是开启了评论系统的。前后用过 Gitalk、Valine、Utterances、Disqus。不过后来我发现，虽然每篇文章下面都开着评论区，但是因为我的博客本身的访问量很少，基本上没有人会来评论。开着评论区的话，每次进入页面还要加载额外的资源。因此我就干脆关闭了评论功能，只留下了一个邮箱地址。后来我的博客访问人数越来越多，有些朋友就通过邮箱和我进行联系。不过我觉得，通过邮箱联系的方式适合大段文字的正式交流，大部分读者看完文章后可能只想要评论一两句话，看到网页的底部没有评论区就放弃了，他们不会大费周折的去寻找作者的邮箱地址是什么，然后再打开邮箱写下一堆文字。我想要做的是一个综合类的博客，虽然是静态博客，但其功能不仅仅是作为记录自己的生活和技术的记事本，还要记录和别人的交流。评论是博客的标配功能。&lt;/p>
&lt;h3 id="为何选择-waline">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#为何选择-waline" class="anchor-link" aria-label="为何选择-waline">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:为何选择-waline" class="headings">为何选择 Waline&lt;/a>&lt;/h3>
&lt;p>之前没有开启评论功能的原因除了博客的访问量少外，还有就是——没有找到合适的评论系统。什么是合适？第一点是能完美适配博客主题。现在有很多博客主题有明暗两色调节，评论系统的配色也应该能够随着主题明暗变化而做出相应的改变。第二点是便捷。对于评论功能，最便捷的就是填上一个昵称和邮箱，不需要去注册账户，想评论就评论。第三点是安全。作为博主，不希望有人滥用评论功能发送大量垃圾信息；作为评论者，不希望自己的邮箱和 IP 地址等隐私信息暴露给其他人。第四点是符合实际情况。我的博客是中文博客，面向的读者大部分来自国内，如果使用一些被墙的评论系统，国内的人想进行评论是很麻烦的。&lt;/p>
&lt;p>在下表中，我对部分评论系统的性能进行了简单的对比。有些评论系统是我在很早之前使用过的，后来也许进行过优化，但我没有再关注过，所以作出的评估可能不太准确。&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">评论系统&lt;/th>
&lt;th style="text-align: center">适配主题&lt;/th>
&lt;th style="text-align: center">便捷&lt;/th>
&lt;th style="text-align: center">安全&lt;/th>
&lt;th style="text-align: center">符合实情&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">Gitalk&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">Utterances&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">Valine&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">Disqus&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;td style="text-align: center">是&lt;/td>
&lt;td style="text-align: center">否&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>以前有位朋友和我讨论过选用哪个评论系统的问题。他发现 Gitalk 和 Valine 的密钥都能够从后台查到，所以很可能会有隐私泄露和数据篡改的危险。最终我推荐他使用了 Utterances。虽然 Utterances 和 Gitalk 一样需要借助 GitHub 的 Issues 区存放评论，要想进行评论需要注册 GitHub 账号，但不存在密钥泄露的风险，算是个折衷的方案。对于 Valine 的数据泄露风险，问题很严重。有关这个问题可以看看以下两篇文章：&lt;/p>
&lt;ul>
&lt;li>&lt;a href="https://imnerd.org/valine-may-not-so-good.html" target="_blank" rel="noopener">基于 Serverless 的 Valine 可能并没有那么香 | 怡红院落&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://ttys3.dev/post/hugo/please-stop-using-valine-js-comment-system-until-it-fixed-the-privacy-leaking-problem/" target="_blank" rel="noopener">请马上停止使用 Valine.js 评论系统，除非它修复了用户隐私泄露问题 | 荒野無燈&lt;/a>&lt;/li>
&lt;/ul>
&lt;p>这里还要解释一下 Valine 的主题适配性问题。虽然 Valine 支持明暗主题切换，但我觉得，在暗色主题下，文字颜色和背景颜色不太协调。由此可见，每种评论系统都存在一些明显缺陷。于是，怡红公子的 Waline 诞生了。从名字上看，必然是从 Valine 衍生的，继承了 Valine 的优势的同时，又从安全性方面进行了改良。与 Valine 不同，该系统带有后端，所以不存在暴露密钥、IP 地址等安全问题。此外，该系统还支持多种部署方式和数据存储方式，可以称得上是国内评论系统中的精品。&lt;/p>
&lt;h2 id="正文">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#正文" class="anchor-link" aria-label="正文">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:正文" class="headings">正文&lt;/a>&lt;/h2>
&lt;h3 id="基础配置">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#基础配置" class="anchor-link" aria-label="基础配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:基础配置" class="headings">基础配置&lt;/a>&lt;/h3>
&lt;p>&lt;a href="https://waline.js.org/" target="_blank" rel="noopener">官方网站&lt;/a>给出了较为详细的配置说明。下文中讲述的是使用 LeanCloud 作为数据存储端，Vercel 作为服务端进行部署的方法，以及如何将部署好的评论系统插入到 Hugo MemE 主题当中。其他方法请阅读官方说明。&lt;/p>
&lt;h4 id="配置-leancloud">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#配置-leancloud" class="anchor-link" aria-label="配置-leancloud">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:配置-leancloud" class="headings">配置 LeanCloud&lt;/a>&lt;/h4>
&lt;p>我推荐使用 &lt;a href="https://leancloud.app/" target="_blank" rel="noopener">LeanCloud 国际版&lt;/a>，因为国内版还需要和备案的域名绑定。注册账户登录以后，创建应用。应用名称随意填写，我写的是 &lt;code>Hugo&lt;/code>，然后选择开发版（免费）进行创建。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-0.png" alt="waline-0.png">&lt;span class="caption">※ LeanCloud 创建应用&lt;/span>&lt;/p>
&lt;p>创建完成后进入控制台的「设置」→「应用 Keys」界面。将 AppID、AppKey、MasterKey 这三个值记下来，注意不要暴露给别人。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-1.png" alt="waline-1.png">&lt;span class="caption">※ 查看密钥&lt;/span>&lt;/p>
&lt;h4 id="配置-vercel">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#配置-vercel" class="anchor-link" aria-label="配置-vercel">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:配置-vercel" class="headings">配置 Vercel&lt;/a>&lt;/h4>
&lt;p>首先是注册 Vercel 账户，用 GitHub 账户注册即可。然后使用开发者提供的&lt;a href="https://vercel.com/import/project?template=https://github.com/lizheming/waline/tree/master/example" target="_blank" rel="noopener">快速部署链接&lt;/a>，直接将开发者的 Waline 仓库 Clone 到 Vercel 新创建的项目中。项目名称随意填写一个即可，我写的是 &lt;code>blog-waline&lt;/code>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-2.png" alt="waline-2.png">&lt;span class="caption">※ 创建 Vercel 项目&lt;/span>&lt;/p>
&lt;p>下一步是填写 GitHub 仓库名。Vercel 会在你的 GitHub 中自动创建一个仓库，并基于 Waline 模板初始化该仓库。该仓库默认为私人仓库。仓库名我填写的还是 &lt;code>blog-waline&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-3.png" alt="waline-3.png">&lt;span class="caption">※ 设置 GitHub 仓库名&lt;/span>&lt;/p>
&lt;p>下一步，需要在环境变量（Environment Variables）中配置 &lt;code>LEAN_ID&lt;/code>、&lt;code>LEAN_KEY&lt;/code> 和 &lt;code>LEAN_MASTER_KEY&lt;/code> 三个环境变量。它们的值分别对应在 LeanCloud 中获得的 AppID、AppKey 和 MasterKey。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-4.png" alt="waline-4.png">&lt;span class="caption">※ 配置环境变量&lt;/span>&lt;/p>
&lt;p>以上完成后，点击「Deploy」就会进行部署。稍等片刻，会看到满屏的烟花庆祝你部署成功。点击「Visit」会跳转到部署好的地址上，该地址即为之后需要填入的 &lt;code>serverURL&lt;/code> 地址。你也可以设置自定义域名地址。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-5.png" alt="waline-5.png">&lt;span class="caption">※ 评论服务部署中&lt;/span>&lt;/p>
&lt;h4 id="插入-meme-主题">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#插入-meme-主题" class="anchor-link" aria-label="插入-meme-主题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:插入-meme-主题" class="headings">插入 MemE 主题&lt;/a>&lt;/h4>
&lt;p>Hugo 的 MemE 主题目前并未带有 Waline 评论的相关配置。在主题仓库的 Issues 区有人已经提了增加 Waline 评论的建议，但可能是博主最近工作忙碌的缘故，迟迟没有更新。我觉得早晚会更新的，如果你没有耐心等待的话，自己修改主题的代码也不是问题。主题中含有 Valine 的相关代码，稍微修改一下就可以了。&lt;/p>
&lt;p>先查看一下主题内和 Valine 相关的代码有哪些：&lt;/p>
&lt;ul>
&lt;li>~/themes/meme/layouts/partials/components/comments.html&lt;/li>
&lt;li>~/themes/meme/layouts/layouts/third-party/script.html&lt;/li>
&lt;li>~/themes/meme/layouts/layouts/third-party/valine.html&lt;/li>
&lt;/ul>
&lt;p>当然还有博客配置文件 &lt;code>config.toml&lt;/code> 中的 Valine 部分：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c">## Valine&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableValine&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineAppId&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineAppKey&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valinePlaceholder&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;Just go go&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valinePath&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineAvatar&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;mm&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineMeta&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;nick&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;mail&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;link&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valinePageSize&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">10&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineLang&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;zh-cn&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineVisitor&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineHighlight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineAvatarForce&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineRecordIP&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineServerURLs&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineEmojiCDN&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineEmojiMaps&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">{}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineEnableQQ&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">valineRequiredFields&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 说明：https://valine.js.org/&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>接下来就是比葫芦画瓢。改动主题代码的时候注意，为了便于主题更新，目前推荐的方式是以 &lt;code>submodule&lt;/code> 的形式加载主题。所以不要在主题文件夹下修改相应代码，应该直接在博客文件夹的根目录下，对应主题文件夹下相应的文件夹目录新建文件。也就是在下面所示的目录中新建文件（没有所示的文件夹请自建）：&lt;/p>
&lt;ul>
&lt;li>~/layouts/partials/components/comments.html&lt;/li>
&lt;li>~/layouts/layouts/third-party/script.html&lt;/li>
&lt;li>~/layouts/layouts/third-party/valine.html&lt;/li>
&lt;/ul>
&lt;p>这样新建的文件可以覆盖主题文件夹下相同命名的文件，在下一次更新主题的时候不用重复修改主题文件。其中：&lt;/p>
&lt;ul>
&lt;li>&lt;code>comments.html&lt;/code> 文件的作用是控制是否开启评论（&lt;code>enableComments&lt;/code>），开启哪个评论系统（&lt;code>enableValine&lt;/code>），如果开启，则插入相关评论的 &lt;code>&amp;lt;div&amp;gt;&lt;/code> 标签 &lt;code>id&lt;/code>；&lt;/li>
&lt;li>&lt;code>script.html&lt;/code> 文件的作用是载入开启的评论的相应 HTML 文件（&lt;code>valine.html&lt;/code>）；&lt;/li>
&lt;li>&lt;code>valine.html&lt;/code> 文件的作用是调用 valine.js，对评论功能进行设定。&lt;/li>
&lt;/ul>
&lt;p>在&lt;code>comments.html&lt;/code> 中，下面所示代码之间部分是加载评论 &lt;code>&amp;lt;div&amp;gt;&lt;/code> 标签 &lt;code>id&lt;/code>的代码，在这部分插入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">{{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment &amp;#34;production&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{ if .Site.Params.enableWaline }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;div id=&amp;#34;waline&amp;#34;&amp;gt;&amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{ end }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在 &lt;code>script.html&lt;/code> 中，下面所示代码之间部分是载入开启的评论的相应 HTML 文件的，在这部分插入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">{{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment &amp;#34;production&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{ if .Site.Params.enableWaline }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{ partial &amp;#34;third-party/waline.html&amp;#34; . }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{ end }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这时候，我们用到了 &lt;code>enableWaline&lt;/code>，所以，找到博客配置文件 &lt;code>config.toml&lt;/code> 中配置评论的部分，插入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c">## Waline&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableWaline&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>也就是开启 Waline 评论。然后，从官网的说明中，我们可以看到需要配置哪些内容。这些内容有必填的，也有选填的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-6.png" alt="waline-6.png">&lt;span class="caption">※ 需要配置的内容&lt;/span>&lt;/p>
&lt;p>这部分就是 &lt;code>waline.html&lt;/code> 文件中要写的内容（将 &lt;code>valine.html&lt;/code> 替换为 &lt;code>waline.html&lt;/code>）：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">function&lt;/span> &lt;span class="nx">loadComments&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="k">typeof&lt;/span> &lt;span class="nx">Waline&lt;/span> &lt;span class="o">===&lt;/span> &lt;span class="s1">&amp;#39;undefined&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">getScript&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">options&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">script&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">createElement&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;script&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">script&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">defer&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">script&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">crossOrigin&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;anonymous&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">Object&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">keys&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">options&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">forEach&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nx">key&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">script&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">key&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">options&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">key&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">body&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">appendChild&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">script&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">getScript&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">onload&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">newWaline&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">newWaline&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">function&lt;/span> &lt;span class="nx">newWaline&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">Waline&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">el&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;#waline&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">serverURL&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{ .Site.Params.walineServerURL }}&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">placeholder&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{ .Site.Params.walinePlaceholder }}&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">avatar&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{ .Site.Params.walineAvatar }}&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">meta&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{{&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nx">Site&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Params&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">walineMeta&lt;/span> &lt;span class="p">}},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pageSize&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{{&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nx">Site&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Params&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">walinePageSize&lt;/span> &lt;span class="p">}},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">lang&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{ .Site.Params.walineLang }}&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">highlight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{{&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nx">Site&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Params&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">walineHighlight&lt;/span> &lt;span class="p">}},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">avatarCDN&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{ .Site.Params.walineAvatarCDN }}&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">requiredFields&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{{&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nx">Site&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Params&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">walineRequiredFields&lt;/span> &lt;span class="p">}}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里我只配置了必填项和部分选填项。其他的内容我觉得按照默认的就行，不需要改动。最后，回到博客配置文件 &lt;code>config.toml&lt;/code> 中之前添加代码的地方，继续添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c">## Waline&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableWaline&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineServerURL&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walinePlaceholder&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;请填写正确的昵称和邮箱，方便接收评论回复信息哦。&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineAvatar&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;mp&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineMeta&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;nick&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;mail&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;link&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walinePageSize&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">10&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineLang&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;zh-CN&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineHighlight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineAvatarCDN&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://cdn.v2ex.com/gravatar/&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">walineRequiredFields&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;nick&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;mail&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 说明：https://waline.js.org/&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里的 &lt;code>walineServerURL&lt;/code> 要填的内容就是上文在 Vercel 中生成的评论部署地址，也就是对应的 &lt;code>serverURL&lt;/code>。以上步骤都完成后，重新部署博客，就可以正常加载评论了。&lt;/p>
&lt;h4 id="评论功能测试">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#评论功能测试" class="anchor-link" aria-label="评论功能测试">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:评论功能测试" class="headings">评论功能测试&lt;/a>&lt;/h4>
&lt;p>对评论进行简单测试：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-7.png" alt="waline-7.png">&lt;span class="caption">※ 亮色模式&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-8.png" alt="waline-8.png">&lt;span class="caption">※ 暗色模式&lt;/span>&lt;/p>
&lt;h4 id="评论数据管理">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#评论数据管理" class="anchor-link" aria-label="评论数据管理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:评论数据管理" class="headings">评论数据管理&lt;/a>&lt;/h4>
&lt;p>Waline 带有简单的后台，可以实现对评论的管理。部署完成后访问 &lt;code>&amp;lt;serverURL&amp;gt;/ui/register&lt;/code> 进行注册，第一个注册的账户会被设定成管理员。登录成功后就可以看到评论管理的界面了。在评论的时候，如果选择登陆账户后进行评论，你的评论昵称后面会显示「博主」字样。在上图中，有条评论我没有登录直接进行评论，虽然是同一个用户，但依然没有显示「博主」字样。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-9.png" alt="waline-9.png">&lt;span class="caption">※ 后台评论管理&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-10.png" alt="waline-10.png">&lt;span class="caption">※ 后台个人信息页&lt;/span>&lt;/p>
&lt;p>不过在个人信息页的设定中，无法修改个人邮箱。如果想要修改个人邮箱，则需要到 LeanCloud 数据中的 &lt;code>Users&lt;/code> 处修改。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-11.png" alt="waline-11.png">&lt;span class="caption">※ LeanCloud 中修改邮箱的地方&lt;/span>&lt;/p>
&lt;h3 id="开启邮件提醒功能">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#开启邮件提醒功能" class="anchor-link" aria-label="开启邮件提醒功能">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:开启邮件提醒功能" class="headings">开启邮件提醒功能&lt;/a>&lt;/h3>
&lt;p>邮件提醒功能，即当某人在文章下方进行评论的时候，博主能够收到提醒邮件；某人的评论得到新回复的时候，这个人也能收到提醒邮件。这虽然不是一个必要的功能，但能节省两个人之间沟通的间隔时间，不必天天守在后台去看是否有人评论了某篇文章。&lt;/p>
&lt;h4 id="添加-vercel-环境变量">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#添加-vercel-环境变量" class="anchor-link" aria-label="添加-vercel-环境变量">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:添加-vercel-环境变量" class="headings">添加 Vercel 环境变量&lt;/a>&lt;/h4>
&lt;p>在 Vercel 的项目中添加以下新的环境变量：&lt;/p>
&lt;ul>
&lt;li>&lt;code>AUTHOR_EMAIL&lt;/code>：博主邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知。&lt;/li>
&lt;li>&lt;code>SMTP_SERVICE&lt;/code>：SMTP 邮件发送服务提供商，可以在&lt;a href="https://github.com/nodemailer/nodemailer/blob/master/lib/well-known/services.json" target="_blank" rel="noopener">这个页面&lt;/a>查看所有支持的运营商。如果没在列表中的可以自行配置 &lt;code>SMTP_HOST&lt;/code> 和 &lt;code>SMTP_PORT&lt;/code>。&lt;/li>
&lt;li>&lt;code>SMTP_HOST&lt;/code>：SMTP 服务器地址，如果未配置 &lt;code>SMTP_SERVICE&lt;/code> 的话该项必填。&lt;/li>
&lt;li>&lt;code>SMTP_PORT&lt;/code>：SMTP 服务器端口，如果未配置 &lt;code>SMTP_SERVICE&lt;/code> 的话该项必填。&lt;/li>
&lt;li>&lt;code>SMTP_USER&lt;/code>：SMTP 邮件发送服务的用户名，一般为登录邮箱。&lt;/li>
&lt;li>&lt;code>SMTP_PASS&lt;/code>：SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱（例如 163 邮箱）是单独的 SMTP 密码。&lt;/li>
&lt;li>&lt;code>SITE_NAME&lt;/code>：网站名称，用于在消息中显示。&lt;/li>
&lt;li>&lt;code>SITE_URL&lt;/code>：网站地址，用于在消息中显示。&lt;/li>
&lt;li>&lt;code>SENDER_NAME&lt;/code>：自定义发送邮件的发件人，选填。&lt;/li>
&lt;li>&lt;code>SENDER_EMAIL&lt;/code>：自定义发送邮件的发件地址，选填。&lt;/li>
&lt;li>&lt;code>MAIL_SUBJECT&lt;/code>：评论回复邮件标题自定义。&lt;/li>
&lt;li>&lt;code>MAIL_TEMPLATE&lt;/code>：评论回复邮件内容自定义。&lt;/li>
&lt;li>&lt;code>MAIL_SUBJECT_ADMIN&lt;/code>：新评论通知邮件标题自定义。&lt;/li>
&lt;li>&lt;code>MAIL_TEMPLATE_ADMIN&lt;/code>：新评论通知邮件内容自定义。&lt;/li>
&lt;/ul>
&lt;div class="simple-notice simple-notice-tip" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 512 512">&lt;path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/>&lt;/svg>&lt;/div>&lt;p>对于邮箱的选用，我个人觉得，不要使用自己平时常用的邮箱。最好单独注册个邮箱用来自动发送邮件。因为很可能会有滥用邮箱账户发送垃圾邮件的行为。我是单独使用了一个网易邮箱进行配置的。&lt;/p>&lt;/div>
&lt;p>添加完环境变量后需要重新部署一下。在添加环境变量的过程中可能会出现两个问题，下面重点讲解。&lt;/p>
&lt;h4 id="某一环境变量值的更改">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#某一环境变量值的更改" class="anchor-link" aria-label="某一环境变量值的更改">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:某一环境变量值的更改" class="headings">某一环境变量「值」的更改&lt;/a>&lt;/h4>
&lt;p>当你配置了 &lt;code>SMTP_HOST&lt;/code> 邮箱地址后，会自动生成一个 &lt;code>@smtp-host&lt;/code> 的 Secret 来存储其值。比如你的邮箱是 &lt;code>a@a.com&lt;/code> 如果想要更换邮箱到 &lt;code>b@a.com&lt;/code>，就无法再将其值存放在 &lt;code>@smtp-host&lt;/code> 中，因为 &lt;code>@smtp-host&lt;/code> 已经被占用。只能存放在加了后缀的，比如名为 &lt;code>@smtp-host-1&lt;/code> 的 Secret 中。这其实没什么大碍，但作为一个有强迫症的人，我既然已经不用 &lt;code>a@a.com&lt;/code> 邮箱了，为什么还要留着 &lt;code>@smtp-host&lt;/code> 来存放 &lt;code>a@a.com&lt;/code>？为什么无法删除？&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-12.png" alt="waline-12.png">&lt;span class="caption">※ Vercel 中配置环境变量的界面&lt;/span>&lt;/p>
&lt;p>实际上 &lt;code>@smtp-host&lt;/code> 是可以删除的。只不过过程有些繁琐。可以在本地使用命令来管理 Vercel。&lt;a href="https://vercel.com/docs/cli" target="_blank" rel="noopener">官方文档&lt;/a>中介绍了 Vercel CLI 的一系列命令。&lt;/p>
&lt;p>先在本地安装 Vercel CLI：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm i -g vercel
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后执行以下命令连接你的账户，&lt;code>YOUR_EMAIL&lt;/code> 填写你 Vercel 账户的邮箱：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">vercel login YOUR_EMAIL
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>接着，Vercel 会向你的邮箱发送一个确认邮件，确认即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-13.png" alt="waline-13.png">&lt;span class="caption">※ 本地连接 Vercel 确认账户&lt;/span>&lt;/p>
&lt;p>下面在一个空文件夹内启动命令行，输入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">vercel
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>Vercel 会向你确认是否部署 Vercel 在该文件夹，是否链接到已有项目，以上都选择「Y」，然后输入项目的名字，我的是 &lt;code>blog-valine&lt;/code>。&lt;/p>
&lt;p>操作完成后，输入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">vercel secrets list
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>即可查看已有的 Secret 列表。这里我们想要删除的是 &lt;code>smtp-host&lt;/code>，所以输入下面的命令即可删除：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">vercel secrets remove smtp-host
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/waline-14.png" alt="waline-14.png">&lt;span class="caption">※ 查看所有的 Secret&lt;/span>&lt;/p>
&lt;h4 id="自定义回复邮件标题和内容">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#自定义回复邮件标题和内容" class="anchor-link" aria-label="自定义回复邮件标题和内容">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:自定义回复邮件标题和内容" class="headings">自定义回复邮件标题和内容&lt;/a>&lt;/h4>
&lt;p>&lt;code>MAIL_SUBJECT&lt;/code>、&lt;code>MAIL_TEMPLATE&lt;/code>、&lt;code>MAIL_SUBJECT_ADMIN&lt;/code>、&lt;code>MAIL_TEMPLATE_ADMIN&lt;/code> 四个环境变量是用来自定义回复邮件标题和内容的。不过一般而言，邮件回复的时候，标题和内容都不是固定的。比如说 A 回复了某条评论，系统发送邮件通知评论作者 B 的时候，标题最好含有 B 的名字。内容也应该含有 A 对 B 的什么评论作出了什么评论。这些内容会随着评论作者和评论内容的不同进行改变，所以不能直接简单的设置成固定的内容，需要设定一个回复模板。&lt;/p>
&lt;p>模板可以通过 &lt;code>self&lt;/code>、&lt;code>parent&lt;/code> 和 &lt;code>site&lt;/code> 对象传递参数，其中分别包含以下变量：&lt;/p>
&lt;ul>
&lt;li>
&lt;p>&lt;code>self&lt;/code>：该条评论本身&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">变量&lt;/th>
&lt;th style="text-align: center">备注&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">&lt;code>nick&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者姓名&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>mail&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者邮箱&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>link&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者网址&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>url&lt;/code>&lt;/td>
&lt;td style="text-align: center">文章地址&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>comment&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论内容&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;/li>
&lt;li>
&lt;p>&lt;code>parent&lt;/code>：该条评论的回复对象（父评论）&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">变量&lt;/th>
&lt;th style="text-align: center">备注&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">&lt;code>nick&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者姓名&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>mail&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者邮箱&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>link&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者网址&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>type&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论者类型&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>comment&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论内容&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;/li>
&lt;li>
&lt;p>&lt;code>site&lt;/code>：网站配置&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">变量&lt;/th>
&lt;th style="text-align: center">备注&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">&lt;code>name&lt;/code>&lt;/td>
&lt;td style="text-align: center">博客名字&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>url&lt;/code>&lt;/td>
&lt;td style="text-align: center">博客网址&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">&lt;code>postUrl&lt;/code>&lt;/td>
&lt;td style="text-align: center">评论完整网址&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;/li>
&lt;/ul>
&lt;p>比如想要显示评论者姓名，就用 &lt;code>{{self.nick}}&lt;/code>。这样一来，我们就可以对上述四个环境变量设定模板。不过由于 Vercel 的环境变量大小限制为 4KB，如果你的模板存储需求比较大，需要直接使用代码配置。&lt;/p>
&lt;p>使用代码配置则需要到 GitHub 上自动创建的那个私人仓库。仓库中有一个名为 &lt;code>index.js&lt;/code> 的文件，最初的内容为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">Application&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;@waline/vercel&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">module&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">exports&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">Application&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">async&lt;/span> &lt;span class="nx">postSave&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">comment&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//do what ever you want after save comment
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在 &lt;code>{}&lt;/code> 中添加相关配置即可。下面是完整的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">Application&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;@waline/vercel&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">module&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">exports&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">Application&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mailSubject&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;{{parent.nick}}，您在博客「{{site.name}}」上的评论收到了回复&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mailTemplate&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="sb">`
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;h2 style=&amp;#34;border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> 您在博客&amp;lt;a style=&amp;#34;text-decoration:none;color: #12ADDB;&amp;#34; href=&amp;#34;{{site.url}}&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;{{site.name}}&amp;lt;/a&amp;gt;上的评论有了新的回复
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/h2&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;padding:0 12px 0 12px;margin-top:18px&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;p&amp;gt;{{parent.nick}}，您曾发表评论：&amp;lt;/p&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;&amp;#34;&amp;gt;{{parent.comment | safe}}&amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;{{self.nick}}&amp;lt;/strong&amp;gt; 回复说：&amp;lt;/p&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;&amp;#34;&amp;gt;{{self.comment | safe}}&amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;p&amp;gt;您可以点击&amp;lt;a style=&amp;#34;text-decoration:none; color:#12addb&amp;#34; href=&amp;#34;{{site.postUrl}}&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;前往原文查看完整的回复內容&amp;lt;/a&amp;gt;，欢迎再次光临&amp;lt;a style=&amp;#34;text-decoration:none; color:#12addb&amp;#34; href=&amp;#34;{{site.url}}&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;{{site.name}}&amp;lt;/a&amp;gt;。&amp;lt;/p&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;br/&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;border-top:1px solid #DDD; padding:13px 0 0 8px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> 该邮件为系统自动发送的邮件，请勿直接回复。
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;br/&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;`&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mailSubjectAdmin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;您的博客「{{site.name}}」收到了新评论&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mailTemplateAdmin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="sb">`
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;h2 style=&amp;#34;border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> 有人在&amp;lt;a style=&amp;#34;text-decoration:none;color: #12ADDB;&amp;#34; href=&amp;#34;{{site.url}}&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;{{site.name}}&amp;lt;/a&amp;gt;发表了新的评论
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/h2&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;padding:0 12px 0 12px;margin-top:18px&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;{{self.nick}}&amp;lt;/strong&amp;gt; 评论说：&amp;lt;/p&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;&amp;#34;&amp;gt;{{self.comment | safe}}&amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;p&amp;gt;您可以点击&amp;lt;a style=&amp;#34;text-decoration:none; color:#12addb&amp;#34; href=&amp;#34;{{site.postUrl}}&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;前往原文查看完整的评论内容。&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;br/&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;div style=&amp;#34;border-top:1px solid #DDD; padding:13px 0 0 8px;&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> 该邮件为系统自动发送的邮件，请勿直接回复。
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;br/&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="sb"> &amp;lt;/div&amp;gt;`&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>测试如下：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-15.png" alt="waline-15.png">&lt;span class="caption">※ King 对某篇文章进行评论，博主对 King 进行回复&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/waline-16.png" alt="waline-16.png">&lt;span class="caption">※ King 会在邮箱中收到博主回复的通知&lt;/span>&lt;/p>
&lt;p>在 &lt;code>index.js&lt;/code> 文件中，你还可以设定安全域名、违禁词、IP 禁止名单等等，这些内容请直接参考官方文档。&lt;/p>
&lt;h3 id="注意事项">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#注意事项" class="anchor-link" aria-label="注意事项">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:注意事项" class="headings">注意事项&lt;/a>&lt;/h3>
&lt;p>完成本文的时候，MemE 主题还未内置 Waline 评论功能。并且 Waline 评论还在 0.n 版时代，尚未发布正式稳定版。所以 Waline 评论系统的样式和功能仍在不断改进中。可能各位读者在阅读本人的这篇文章的时候，Waline 评论已经更新换代很多次了。但总的来说，配置方法是不会有较多改动的。&lt;/p>
&lt;p>如果遇到这样的情况：原本配置好的 Waline 评论，到某一天突然出现了 BUG，不能用了。那可能就是官方的代码进行了较多的改动，需要你手动更新 GitHub 的评论仓库的 &lt;code>package.json&lt;/code> 文件。将其中的依赖 &lt;code>@waline/vercel&lt;/code> 更新到最新版即可。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/#contents:总结" class="headings">总结&lt;/a>&lt;/h2>
&lt;p>没有什么是完美的，但我只需要选择当前较好的那一个。本文并不是什么广告来宣传 Waline，只是为了记录我配置 Waline 的过程，供有同样需求的朋友一个参考。&lt;/p>
&lt;p>我看了怡红公子去年年底的文章和文章下方的评论区，发现在他写了那篇 Valine 存在一定安全问题的文章后，有图谋不轨的人盗用他的身份在 Valine 用户的评论区发布了大量垃圾广告，用以栽赃怡红公子。尽管他再三解释这是有人假冒他做的，但仍然遭到了不少人的谩骂。我也担心有人会盗用我的昵称和邮箱，到别人评论区作出低俗的操作。&lt;/p>
&lt;p>这种事情是无法进行监管的。不论我使用哪个评论系统，总会有人使用安全性能较差的那一个，然后就会被恶意攻击。或许是我多虑了，不会有人关注到我这个小小的博客，不会总有人带着极度的恶意攻击互联网上素不相识的人。但我想，如果发生了这样的事，我可能会考虑再次关闭评论。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/" target="_blank" rel="noopener">https://guanqr.com/tech/website/introduction-and-basic-setting-of-waline/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/vercel/">Vercel</category></item><item><title>
旧事新说：使用 Travis CI 部署 Hugo 博客</title><link>https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/</link><guid isPermaLink="true">https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/</guid><pubDate>Tue, 30 Mar 2021 07:43:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>文章的开头先回答一个问题。为什么这篇文章是旧事新说？因为一年前的这个时候 Travis CI 对于开源仓库的部署还是免费的，但在去年年底，官方更改了定价模式，对于免费用户到达一定的免费额度后必须交费才能继续享用服务。对目前的情况来说，我并不推荐使用 Travis CI 部署任何东西，更好的方法就是&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-github-actions/">使用 GitHub 自带的 Actions&lt;/a>。&lt;/p>
&lt;p>那么为什么还要写这篇文章？因为我曾经在使用 Netlify 的时候也尝试过 Travis CI，最近我对博客代码进行了很多改动，导致原来使用的 GitHub Actions 不再适用，所以重新拾起 Travis CI 作为临时替补工具，等到配置好新的 GitHub Actions 再迁移过来。既然是自己用过的东西，就想记录一下使用方法，避免以后忘记。&lt;/p>
&lt;h2 id="travis-ci-与持续集成">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#travis-ci-与持续集成" class="anchor-link" aria-label="travis-ci-与持续集成">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Travis CI 与持续集成&lt;/h2>
&lt;p>持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码集成到主干。持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>Travis CI 是用 Ruby 语言开发的一个开源的分布式持续集成服务，用于自动构建和测试在 GitHub 托管的项目。支持包括 JavaScript、Node.js、Ruby 等 20 多种程序语言。Travis CI 目前有两个官网，分别是 travis-ci.org 和 travis-ci.com。前者是旧平台，已经准备停用。&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;/p>
&lt;h2 id="准备工作">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#准备工作" class="anchor-link" aria-label="准备工作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>准备工作&lt;/h2>
&lt;p>Travis CI 的 Hugo 博客部署流程是这样的：&lt;/p>
&lt;ol>
&lt;li>将博客源码存放在 &lt;code>blog&lt;/code> 仓库中；&lt;/li>
&lt;li>Travis CI 载入 &lt;code>blog&lt;/code> 仓库，编译源码，编译好的文件存放在了 &lt;code>public&lt;/code> 文件夹中；&lt;/li>
&lt;li>&lt;code>public&lt;/code> 文件夹中的文件存放在 GitHub Pages &lt;code>guanqr.github.io&lt;/code> 中。&lt;/li>
&lt;/ol>
&lt;p>首先进入 GitHub，获取一个 Personal Access Token。因为 Travis CI 在自动部署的时候，需要 push 文件到仓库的某个分支，而外界应用访问 GitHub 仓库需要用户的授权。获取 Token 的位置：GitHub → Settings → Developer Settings → Personal access tokens → Generate new token。如下图所示，勾选 &lt;code>repo&lt;/code> 下的所有项，以及 &lt;code>user&lt;/code> 下的 &lt;code>user:email&lt;/code> 后，点击生成，即可生成一个 Token，复制 Token 的值。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/travis-0.png" alt="travis-0.png">&lt;/p>
&lt;div class="simple-notice simple-notice-warning" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 512 512">&lt;path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/>&lt;/svg>&lt;/div>&lt;p>注意：Token 不要随意公开。该值只有在生成后才可看到，如果退出页面然后再次进入当前页面就无法看到该值，而且是再也看不到了。最好要及时保存。&lt;/p>&lt;/div>
&lt;p>其次，授权 GitHub 账户登录 &lt;a href="https://www.travis-ci.com/" target="_blank" rel="noopener">Travis CI&lt;/a>，选择需要部署的仓库，进入设置界面，选择触发部署的条件。如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/travis-1.png" alt="travis-1.png">&lt;/p>
&lt;p>在该页的下面，还需要设置一个环境变量（Environment Variables），如下图所示。这时候就用到了上文所生成的 Token。在 NAME 处填写 &lt;code>Travis_Token&lt;/code>，VALUE 处填写 Token 的值。填写完成后点击 Add 添加环境变量。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/travis-2.png" alt="travis-2.png">&lt;/p>
&lt;h2 id="添加配置文件">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#添加配置文件" class="anchor-link" aria-label="添加配置文件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>添加配置文件&lt;/h2>
&lt;p>以上的准备工作完成后，就需要编写一个配置文件，该文件的作用是让 Travis CI 明白需要做哪些事情。&lt;/p>
&lt;p>配置文件需要命名为 &lt;code>.travis.yml&lt;/code>，放置在仓库的根目录中。其内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">language&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">node_js&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">node_js&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">stable&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">cache&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">apt&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">directories&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">node_modules&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">before_install&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">export TZ=&amp;#39;Asia/Shanghai&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">chmod +x ./gh-pages.sh&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">install&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">npm install&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">wget https://github.com/gohugoio/hugo/releases/download/v0.82.0/hugo_extended_0.82.0_Linux-64bit.deb&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">sudo dpkg -i hugo*.deb&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">npm run build&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">after_script&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">./gh-pages.sh&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">branches&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">only&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">master&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">env&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">global&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">GH_REF&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">github.com/guanqr/guanqr.github.io.git&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 替换成自己要部署到的仓库地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>相关说明如下：&lt;/p>
&lt;ol>
&lt;li>&lt;code>language: node_js&lt;/code> 是因为我的博客构建用到了一些插件，这些插件需要使用 &lt;code>npm&lt;/code> 命令安装到 &lt;code>node_modules&lt;/code> 中。&lt;/li>
&lt;li>&lt;code>export TZ='Asia/Shanghai'&lt;/code> 是设定系统时间为中国区时间。&lt;/li>
&lt;li>&lt;code>chmod +x ./gh-pages.sh&lt;/code> 表明需要调用一个额外的 &lt;code>gh-pages.sh&lt;/code> 文件。&lt;/li>
&lt;li>&lt;code>install&lt;/code> 中的内容即为安装插件，安装指定版本的 Hugo。&lt;/li>
&lt;li>&lt;code>script&lt;/code> 中的指令 &lt;code>npm run build&lt;/code> 是我在 &lt;code>package.json&lt;/code> 文件中自定义的指令，具体含义为 &lt;code>hugo --gc --minify --cleanDestinationDir &amp;amp;&amp;amp; gulp build&lt;/code> 该指令的前半部分是编译 Hugo 博客，后半部分是执行 Gulp 的 build 指令（该指令的含义请看我的另一篇文章：《&lt;a href="https://guanqr.com/tech/website/realize-pwa/">博客实现 PWA 功能&lt;/a>》）。&lt;/li>
&lt;li>&lt;code>after_script&lt;/code> 中是执行 &lt;code>gh-pages.sh&lt;/code> 文件中的命令。&lt;/li>
&lt;li>&lt;code>GH_REF&lt;/code> 是需要将博客部署到的仓库地址。&lt;/li>
&lt;/ol>
&lt;p>我用到了一个额外的 &lt;code>gh-pages.sh&lt;/code> 文件。该文件中包含了提交文件到指定仓库的 Git 命令，其中就包含了授权操作的 Token。该文件也在仓库的根目录中，具体内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#!/bin/bash
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="nb">set&lt;/span> -ev
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git clone https://&lt;span class="si">${&lt;/span>&lt;span class="nv">GH_REF&lt;/span>&lt;span class="si">}&lt;/span> .deploy_git
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> .deploy_git
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git checkout master
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> ../
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">mv .deploy_git/.git/ ./public/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> ./public
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git config user.name &lt;span class="s2">&amp;#34;guanqr&amp;#34;&lt;/span> &lt;span class="c1"># 替换成自己的用户名&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git config user.email &lt;span class="s2">&amp;#34;guanqirui@zju.edu.cn&amp;#34;&lt;/span> &lt;span class="c1"># 替换成自己的邮箱&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git add .
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git commit -m &lt;span class="s2">&amp;#34;Travis CI Auto Builder at `date +&amp;#34;&lt;/span>%Y-%m-%d %H:%M&lt;span class="s2">&amp;#34;` Asia/Shanghai&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git push --force --quiet &lt;span class="s2">&amp;#34;https://&lt;/span>&lt;span class="si">${&lt;/span>&lt;span class="nv">Travis_Token&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">@&lt;/span>&lt;span class="si">${&lt;/span>&lt;span class="nv">GH_REF&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span> master:master
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="运行测试">&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#运行测试" class="anchor-link" aria-label="运行测试">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>运行测试&lt;/h2>
&lt;p>上述工作完成后，将博客源码上传至你的 GitHub 仓库中，即可在 Travis CI 中看到部署的信息与过程。如果部署失败也会有相应的提示。在 GitHub 的仓库提交记录中，也会显示部署成功与否的信息。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/travis-3.png" alt="travis-3.png">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/travis-4.png" alt="travis-4.png">&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>&lt;a href="http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html" target="_blank" rel="noopener">持续集成服务 Travis CI 教程 | 阮一峰的网络日志&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>&lt;a href="https://juejin.cn/post/6844903957215576078" target="_blank" rel="noopener">利用Travis CI + GitHub 实现持续集成和自动部署 | champyin&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/" target="_blank" rel="noopener">https://guanqr.com/tech/website/deploy-hugo-with-travis-ci/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/travis-ci/">Travis CI</category></item><item><title>
在 MemE 主题文章开头添加过时提醒</title><link>https://guanqr.com/tech/website/add-expired-tip-in-meme/</link><guid isPermaLink="true">https://guanqr.com/tech/website/add-expired-tip-in-meme/</guid><pubDate>Mon, 29 Mar 2021 20:40:27 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>浏览别人的博客的时候，偶尔会看到一些博主所写文章的开头或者结尾标记了一句话，大致是说，「这篇文章写于/更新于 xxx 天前，已经很久没有更新了，文中所讲的内容可能已经过时。」我觉得这句话很有必要放在一些技术类的文章中。因为科技发展太快了，技术类文章大多具有时效性。比如某人在某个依赖环境下编写了一段代码，将这段代码分享到了网上，几个月后这个环境更新换代了，那么这段代码也就失效了。这时候一些尝试新环境的人在网上搜索相关问题，往往搜索到的是旧代码。他们费半天劲将环境配置好，将代码写好，运行后只有报错。所以在技术类的文章中增加一个该文章已经过时的提醒很有必要，告诉浏览这篇文章的人，如果你没有充足时间的话，没有必要浪费时间去钻研一个过时的东西。&lt;/p>
&lt;p>我对这项功能也有需求。因为我早期写了一些关于 Hexo 博客搭建和优化的文章，里面的方法仅适用于当时的版本，如今 Hexo 的很多设定已经发生了改变，我的那些文章就没有什么参考价值了。作为一个代码搬运工，为了实现这一功能，我优先考虑的是复制别人已有的代码。但我查阅了那些使用该项功能博客的源码仓库或是主题仓库，都没有发现相应代码。那么只能自己写了。&lt;/p>
&lt;p>先说说设计的思路吧。在功能上：&lt;/p>
&lt;ol>
&lt;li>文章过时的判别标准是现在的时间与创作时间相比还是与更新时间相比？我认为，和更新时间相比较好。创作时间即使距现在很久远，但文章存在实时更新的可能。文章页标题下方的元素中含有更新时间，如果仅仅按照创作时间进行提醒，那么更新时间这个元素就显得没有什么意义。过时提醒这个功能，就是为了给文章的更新时间进行进一步强调。&lt;/li>
&lt;li>不是所有的文章都需要过时提醒。生活类的文章不需要，技术类的文章超出一定时间未更新的需要。那么就不方便直接在主题的模板中添加该模块的代码，应该单独写成一个组件存放在 &lt;code>partials&lt;/code> 的 &lt;code>components&lt;/code> 中。不必给每一篇技术类文章都增加该组件，然后根据一个函数判断到达某个时长后「过时」成立。比较简单的方法就是直接给需要添加过时提醒的文章增加该组件，增加组件后直接显示该文章已过时。&lt;/li>
&lt;/ol>
&lt;p>在布局上：&lt;/p>
&lt;ol>
&lt;li>放置在文章开头比放置在结尾更为有效。如果放置在文章结尾，读者很可能会在阅读完文章后才发现这篇文章已经过时。&lt;/li>
&lt;li>过时提示的区域要与正文区分。比如改变文字的颜色或改变文字背景的颜色。颜色不宜过深，要和页面背景配合融洽，且能够随着主题亮暗改变作出相应的改变。&lt;/li>
&lt;/ol>
&lt;p>组件设计的方法可以参考 MemE 主题的其他组件内容。首先在博客根目录的 &lt;code>/partials/components/&lt;/code> 文件夹（没有请自建）下新建文件，命名为 &lt;code>expired-tip.html&lt;/code>。其代码如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">{{ if and .Site.Params.enableExpiredTip (.Params.displayExpiredTip | default .Site.Params.displayPostExpiredTip) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">time&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;LastmodTime&amp;#34;&lt;/span> &lt;span class="na">datetime&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ $.Lastmod.Format &amp;#34;&lt;/span>&lt;span class="na">2006-1-2&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="err">}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">time&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;expiredTip&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">function&lt;/span> &lt;span class="nx">GetNumberOfDays&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">date1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">date2&lt;/span>&lt;span class="p">){&lt;/span> &lt;span class="c1">// 获得天数，date1 开始日期，date2 结束日期
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">a1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">Date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">parse&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="k">new&lt;/span> &lt;span class="nb">Date&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">date1&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">a2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">Date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">parse&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="k">new&lt;/span> &lt;span class="nb">Date&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">date2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">day&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">parseInt&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nx">a2&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="nx">a1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c1">// 核心：时间戳相减，然后除以天数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">return&lt;/span> &lt;span class="nx">day&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nb">Date&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">ny&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getFullYear&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">nm&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getMonth&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">nd&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getDate&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">a1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementById&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;LastmodTime&amp;#34;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">dateTime&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">a2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">ny&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;-&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">nm&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;-&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">nd&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">num&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">GetNumberOfDays&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">a1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">a2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">str1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;{{ i18n &amp;#34;expiredTipHead&amp;#34;}}&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">str2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;{{ i18n &amp;#34;expiredTipTail&amp;#34;}}&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementById&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;expiredTip&amp;#34;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">innerHTML&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">str1&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;nbsp;&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">num&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;nbsp;&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">str2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可以看到，代码的核心就是利用 JavaScript 计算相差的天数。代码的第一行是判断是否开启过时提醒功能。相应的，需要在博客配置文件 &lt;code>config.toml&lt;/code> 中的 &lt;code>[params]&lt;/code> 下添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 自定义文章时效性提醒&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 是否开启&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableExpiredTip&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 是否显示（全局设置）&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">displayPostExpiredTip&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 说明：文章的 Front Matter 中的 &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># `displayExpiredTip` 的优先级高于此处&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>代码中的 &lt;code>{{ i18n }}&lt;/code> 部分，则是对应的语言翻译。如果是中文，则在博客根目录下的 &lt;code>i18n&lt;/code> 文件夹（没有请自建）创建中文翻译文件 &lt;code>zh.toml&lt;/code>，内容为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">expiredTipHead&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">other&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;本文最后更新于&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">expiredTipTail&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">other&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;天前，文中所描述的信息可能已发生改变，请谨慎使用文中的方法。&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>英文则在同一文件夹下创建 &lt;code>en.toml&lt;/code>，内容为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">expiredTipHead&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">other&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;This article was last updated&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">expiredTipTail&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">other&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;days ago. The information described in this article may have changed. Please use the method carefully.&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后，如果某篇文章需要增加过时提醒，则在文章的 Front Matter 中插入 &lt;code>displayExpiredTip = true&lt;/code> 即可。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/add-expired-tip-in-meme/" target="_blank" rel="noopener">https://guanqr.com/tech/website/add-expired-tip-in-meme/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category></item><item><title>
在 MemE 主题页脚添加今日诗词</title><link>https://guanqr.com/tech/website/add-jinrishici-in-meme/</link><guid isPermaLink="true">https://guanqr.com/tech/website/add-jinrishici-in-meme/</guid><pubDate>Mon, 22 Mar 2021 17:16:54 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="何为今日诗词">&lt;a href="https://guanqr.com/tech/website/add-jinrishici-in-meme/#何为今日诗词" class="anchor-link" aria-label="何为今日诗词">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>何为「今日诗词」&lt;/h2>
&lt;blockquote>
&lt;p>今日诗词 API 是一个可以返回一句古诗词名句的接口。它可以通过图片和 JSON 格式调用。今日诗词 API 根据不同地点、时间、节日、季节、天气、景观、城市进行智能推荐。&lt;/p>&lt;/blockquote>
&lt;p>也就是说，在博客中的某个位置调用今日诗词 API，即可在该位置显示一句诗词，而且会根据浏览者的环境智能推荐相关诗词。我曾经在《&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/">Hexo-NexT 主题个性优化&lt;/a>》一文中介绍了给 Hexo 博客添加今日诗词的方法，但因为当时我并没有想过要在自己的博客中添加这个功能，所以这部分内容是完全照搬其他博主的，诗句显示的格式并不是我想要的格式，且仅适用于当时的 NexT 主题，有很大的局限性。如今我转入使用 Hugo 博客，想给自己平淡的博客中增添一些文化色彩，于是决定在页脚插入今日诗词。&lt;/p>
&lt;h2 id="添加方法">&lt;a href="https://guanqr.com/tech/website/add-jinrishici-in-meme/#添加方法" class="anchor-link" aria-label="添加方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>添加方法&lt;/h2>
&lt;p>首先我们先了解一下使用今日诗词 API 接口返回的 JSON 数据都有什么：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;status&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;success&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;data&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;id&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;5b8b9572e116fb3714e6faba&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;content&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;君问归期未有期，巴山夜雨涨秋池。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;popularity&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1170000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;origin&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;夜雨寄北&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;dynasty&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;唐代&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;李商隐&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;content&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;君问归期未有期，巴山夜雨涨秋池。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;何当共剪西窗烛，却话巴山夜雨时。&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;translate&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;您问归期，归期实难说准，巴山连夜暴雨，涨满秋池。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;何时归去，共剪西窗烛花，当面诉说，巴山夜雨况味。&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;matchTags&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;秋&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;晚上&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;recommendedReason&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;cacheAt&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;2018-09-17T21:18:44.693645&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;token&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;6453911a-9ad7-457e-9b9d-c21011b85a0c&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;ipAddress&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;162.248.93.154&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中：&lt;/p>
&lt;ul>
&lt;li>&lt;code>data.content&lt;/code> 是核心，即推荐的诗句；&lt;/li>
&lt;li>&lt;code>data.matchTags&lt;/code> 是与你相关的标签，也是推荐给你的部分理由；&lt;/li>
&lt;li>&lt;code>data.recommendedReason&lt;/code> 是推荐原因，暂未支持；&lt;/li>
&lt;li>&lt;code>data.cacheAt&lt;/code> 是指会对每个 Token 进行预生成推荐数据并缓存。正常情况下会 10 分钟更新一次缓存数据；&lt;/li>
&lt;li>&lt;code>data.popularity&lt;/code> 是对这句诗的流行度评价；&lt;/li>
&lt;li>&lt;code>data.origin&lt;/code> 源诗信息；&lt;/li>
&lt;li>&lt;code>data.origin.translate&lt;/code> 是整诗翻译，部分诗词有，部分没有；&lt;/li>
&lt;li>&lt;code>token&lt;/code> 是当前用户的 Token，原则上，同一个用户，一段时间内 Token 应该不变；&lt;/li>
&lt;li>&lt;code>ipAddress&lt;/code> 是当前用户的 IP，如果 IP 有异常，您需要查明您是否在服务端调用。&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/add-jinrishici-in-meme/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/li>
&lt;/ul>
&lt;p>虽然说调用的 API 可返回的内容有很多，但因为我是想在博客的页脚插入今日诗词，内容不宜过多，最好在手机端也能一至两行显示完整，所以我决定只调用「诗句」和「作者」两个元素。且诗句和作者之间用破折号「——」连接。&lt;/p>
&lt;p>在 MemE 主题的自定义页脚文件中添加以下代码即可：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/partials/custom/footer.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://sdk.jinrishici.com/v2/browser/jinrishici.js&amp;#34;&lt;/span> &lt;span class="na">charset&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;utf-8&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">text&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;poem_sentence&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">text&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">text&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;poem_info&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">text&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">jinrishici&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">load&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">sentence&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">querySelector&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;.poem_sentence&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">info&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">querySelector&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;.poem_info&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">sentence&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">innerHTML&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">content&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">info&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">innerHTML&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;——&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">author&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>这部分内容摘自今日诗词的&lt;a href="https://www.jinrishici.com/doc/" target="_blank" rel="noopener">官方文档&lt;/a>，如有改动请以官方文档为准。&amp;#160;&lt;a href="https://guanqr.com/tech/website/add-jinrishici-in-meme/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/add-jinrishici-in-meme/" target="_blank" rel="noopener">https://guanqr.com/tech/website/add-jinrishici-in-meme/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category></item><item><title>
找了份普通的工作</title><link>https://guanqr.com/life/school/got-a-ordinary-job/</link><guid isPermaLink="true">https://guanqr.com/life/school/got-a-ordinary-job/</guid><pubDate>Tue, 16 Mar 2021 09:01:49 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>篇文章是我本科春招经历的总结，花费了我很长时间才完成。主要原因有两点：一是不同企业面试的时间不同，我在第一家开始面试的时候就开始总结，在结束最后一家面试的时候还有很多要补充的地方；二是我在写这篇文章的过程中，一直在犹豫是否要将这篇文章发布，因为里面涉及到个人未来的一些不确定内容，比如就职于哪家公司的问题，我认为这算是私下生活（隐私）的一部分。写肯定是要写的，因为这是我求职经历的总结，就算不给别人看，也值得未来的自己回味，只是公不公开的问题。思索良久，还是公开吧。因为我以后肯定会写一些入职后的生活故事，我在哪工作早晚都会说。此外，我觉得这篇文章可能会对那些和我一样——入坑光电却不愿转码——的本科无名小卒的就业提供一些微小的经验。至于那些想要从事或者正在从事计算机行业的人，这篇文章没有什么参考价值，就当做是饭后一乐吧。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>去年开学后就忙碌在考研的复习之中。开始复习的时间有些晚了，加上学校还有一些乱七八糟的事，我复习的就不怎么充分。最后考研显然考得不怎么样，更准确地说应该是一塌糊涂。考试后我就觉得，真没戏了，连调剂都不带有一丝希望的那种。接着我就参与到了毕业设计的开题工作中，毕设开题答辩后就是寒假。按照常规的做法，在寒假中应该准备一下复试，顺便了解一下实验室和导师的信息。可我觉得已经没必要了，就开始搜索春招能找到什么样的工作。&lt;/p>
&lt;p>本来我是打算回北方学习工作的，找点京津冀一带的招聘信息。以前我也说过，在杭州我感到有些孤独，找不到归属感。可是因为我的学校在杭州，我所知道的企业和学校提供的招聘需求基本上都是长三角地区的。那就拖妥协吧，不管在哪工作，能找到一份还算可以的工作就行。大型的互联网企业就不用考虑了。一是我不是学计算机的，算法什么的都不会；二是好岗位都在秋招时基本上已经招的差不多了。&lt;/p>
&lt;p>和我们学院关系比较密切的有几个比较知名的企业：华为、海康威视、大华等等。这些公司的光学研发岗位招收的基本上都是研究生，主要做的就是光学照明、成像、机器视觉等等。如果我进入这些企业，肯定是要做非研发的工作，甚至和光学不相关，更何况以我仅有的能力，也不太能进入这些企业，所以我并没有优先考虑它们。和我们学院有合作的还有一些嘉兴、宁波的光学元件制造企业，之前也有同学组织过去这些企业进行社会实践。这些企业的一些研发岗本科生也能够参与进来，所以我决定尝试向这一类企业投简历。&lt;/p>
&lt;h2 id="准备">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#准备" class="anchor-link" aria-label="准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>准备&lt;/h2>
&lt;p>现在很多企业招聘都是在线申请岗位，即网申。由于每个人制作的简历不同，HR 筛选起来很麻烦，所以大多数企业会选择让应聘者在网上按照统一格式填写电子简历。虽然有网申了，但制作一个属于自己的简历还是很重要的。以前看了很多网上的那些花里胡哨的简历模板，觉得没必要把简历做的这么炫。白纸黑字，将自己的经历进行简单的介绍即可。简单的颜色是为了标记关键的地方，过于绚丽的配色会让形式大于内容，这样大可不必。我用的是 GitHub 上的一个比较简约的简历模板，用 LaTeX 写的。具体的字体和字号我进行了一些调整。&lt;/p>
&lt;p>写简历的时候最应避免的是留有大片空白，我倒没有这样的担心。自我评价，个人基本信息，掌握的计算机语言和建模软件，英语能力，这些算是每个人都需要写的东西了。此外，学生工作和实习（科研）经历应该着重描述，我的学生工作很充足，院级校级大大小小的岗位都工作过。虽然说我没有出去实习过，原本学院安排的实习也因为疫情取消改为了竞赛。但我也不缺少实习经历。我参加过学校组织的科研训练，参加过光电竞赛，每年暑期学院还有一些设计类的课程，再加上现在正在做的毕业设计，实习经历这部分完全不虚。不过对于我而言，简历中最不能写的就是学分绩点了。因为我的成绩在年级 65% 左右，如果写出来，给人的第一印象就是这是个成绩不太好的学生。&lt;/p>
&lt;p>春节前的时候，一些企业就开启春招了。我关注了几个企业招聘的微信公众号，这样就能及时收到有关校招的信息。对于企业的招聘，基本步骤大多是一样的：网申→线上测评→笔试→面试→录用，线上测评和笔试不一定都有。一些大企业都会建立一个自己的网申系统，但多数普通企业会借助其他平台进行网申，比如「前程无忧」。还有一些小企业，直接将自己的简历发到 HR 邮箱即可。&lt;/p>
&lt;h2 id="经历">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#经历" class="anchor-link" aria-label="经历">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>经历&lt;/h2>
&lt;h3 id="舜宇">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#舜宇" class="anchor-link" aria-label="舜宇">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>舜宇&lt;/h3>
&lt;p>我网申的第一家是舜宇集团，舜宇网申使用的就是「前程无忧」系统。选择岗位，填写信息，投递，然后等待筛选结果。我看过舜宇集团在 B 站的招聘宣讲视频，视频里说的是，只要我网申完成后，系统会自动给我的邮箱发送一个线上测评的链接，但我始终没有收到。再过了一周的时间，就是春节，我才意识到情况有些不妙。舜宇集团的微信公众号里说明了，如果没有收到测评链接，可以通过微信后台联系工作人员。我立即向公众号说明了我的情况，但当时已经是春节假期，也没有工作人员会守在微信公众号的后台，只能等工作日再说了。&lt;/p>
&lt;p>我的内心肯定是焦虑不安的。因为这是我第一次投递简历，而且投递的岗位是为数不多和我专业相符的岗位，我不愿对这件事大意。在法定春节假期的最后一天，我已按捺不住，在网上搜索着公司的联系方式，说来奇怪，今年舜宇的春招宣传只是放上了一个网申的链接，邮箱、电话什么的都没有。我在微信上搜索到了一个几年前校招留下的电话，打过去，没人接。接着我找到了舜宇的一个子公司舜宇车载的 HR 联系方式，试着加了他。他把我的简历发给了另一个 HR。上午刚联系，下午就进行了一次电话面试。因为是 HR 的电话面试，不是技术面试，所以只是让我做了个自我介绍，然后让我简单讲了讲毕业设计的内容，说说自己对于舜宇这家公司的了解，父母同不同意自己在浙江工作，有没有女朋友。电话面试大概用了二十分钟左右，结束后 HR 就说已经联系了项目主管，第二天下午进行正式的技术面试。&lt;/p>
&lt;p>第二天，正好是春节后的第一个工作日。早上八点多，我在舜宇集团公众号后台的问题得到了答复。上来就说因为我挂科的数目过多，网申简历没通过筛选，所以没有发送线上测评的链接，期待以后有机会合作。看到这里我就觉得自己凉了一多半。我在网申的时候，上面有一个空是让填写自己挂科的数目，我主修课挂了 2 门，总共挂了 4 门。我就如实地写了 4 门，想着后面面试的时候再解释一下，谁知道我连面试的机会都没有了。心痛。我对自己丧失了信心。我以为凭借我们学院和舜宇的合作关系，他们看到我是浙大的学生，能够填补我简历上的缺陷，然而并没有。我挂过科，这是无法改变的事实。证明我以前在学习课程的时候没有认真对待。但这并不代表我的专业能力不行。挂科应该只是对我个人能力评估的一部分，而不是全部。他们不应该仅仅因为这个就否认我的能力。&lt;/p>
&lt;p>我当时不知道下午的面试还有没有意义，毕竟舜宇集团从网申的第一步就把我筛掉了。不过就算只是走了流程，也要完整地走完。面试的时候。面试官有三个，除了之前电话面试我的 HR，还有两个研发部门的主管。我向他们详细介绍了我的毕业设计，我参加的竞赛，我担任过的学生工作等等经历。最后一个问题，主管问我挂过科吗，我还是如实地回答了——挂过。我解释道：「我挂过科，但是我挂的是电学类的课程，以及两门非专业主修课程，当时因为课程比较多，没有太多精力去学习这些非主修课程，所以最后就放弃了。我的光学实验和设计类课程的成绩不错，分数基本都在年级前 20% 左右，我在光机结构设计课程中的作品还拿过班里的第二名。」HR 最后问我还有什么想问的问题，我询问了所选岗位的发展前途。&lt;/p>
&lt;p>面试结束后，HR 告诉我，具体的面试结果会在一至三个工作日内反馈。那天刚好是周末，于是又开始了焦虑的等待。我还有没有戏？舜宇集团否认了我，舜宇车载会录用我吗？我开始思考，如果我最后没找到工作，将来要怎么生活。&lt;/p>
&lt;p>在我正面对毕业设计焦头烂额的时候，我收到了 HR 的信息——我被录用了。正式录用的邮件也发到了我的邮箱当中。激动啊！感谢舜宇车载的 HR 给我的第二次机会，感谢面试官们对我的信任。那一刻，我将失落抛至脑后。那一整天，我都沉浸在兴奋与喜悦当中。我在朋友圈发了一条动态——「考研，考个屁！」。已经有一份保底的工作了，考研结果如何，我都坦然接受。&lt;/p>
&lt;h3 id="大华">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#大华" class="anchor-link" aria-label="大华">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>大华&lt;/h3>
&lt;p>因为我在网申舜宇的时候把简历公开到了「前程无忧」网站，所以一些与我专业相关的企业 HR 可能会浏览到我的简历。在我投递完舜宇的第二天，浙江大华的光学研发部门的主管就打电话联系了我，进行了电话面试。也就是说，大华的面试要比舜宇的面试早。面试的内容也是先自我介绍，然后讲了讲自己的毕业设计，又讲了讲我在大二暑假光学系统设计课程上的项目。后面问了我像差的分类和形成这些像差的原因，机器视觉在成像系统中的作用。因为我并没有进行网申，所以面试官还问了我想要从事哪方面的工作，我说我想从事光学成像或结构设计的工作。最后我也问了面试官关于大华的一些情况。在此期间，我只和大华的项目主管进行了一次电话，甚至连个邮件也没有发过。可能是因为我面对这场突如其来的面试没有什么准备，大华那边后来也没有什么回应了。&lt;/p>
&lt;p>对于大华的这次面试，我愿称之为「没头没尾」——我没有进行网申，大华也没有告诉我结果。不过因为这场面试是我第一次面试，发生在舜宇面试之前，让我了解了面试中可能会问到哪些问题，能够对接下来舜宇的面试做好充足准备。还是要感谢大华给我的这次机会。&lt;/p>
&lt;h3 id="海康威视">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#海康威视" class="anchor-link" aria-label="海康威视">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>海康威视&lt;/h3>
&lt;p>海康威视，不用想了，以我的水平不会有什么好岗位的，甚至不好的岗位我也进不去。不过目前是春招阶段，任何机会都不能放过，所以我依然进行了网申，就当是体验一下招聘的流程，为自己刷经验。&lt;/p>
&lt;p>海康威视的春招开始的比较早，网申的截止时间也很早，我还没有返校的时候，网申就已经截止了。我投的岗位是国内的技术支持岗位——只有这个岗位的要求我符合。网申后就是一个简单的在线测评，内容有语文理解、数据分析（这部分应该和公务员考试的行测选择题差不多），以及性格测试。测试通过后再进行简历筛选，然后就是笔试。这是我第一次参加笔试，不知道笔试究竟会考些什么内容，并且我只是抱着试一试的态度，所以没有怎么准备笔试。笔试也是在网上进行的，官方通过邮件给你发送一个特定的网站链接，进入网站后确认自己的信息，保证摄像头对着自己的正脸，即可进行笔试。笔试的内容有选择、填空、简答，包括但不仅限于数据库、Linux 系统、Python、C++。可惜以上这些我都没有系统性地学习过，在稀里糊涂中随便写了答案就提交了。最后结果可想而知，没戏。&lt;/p>
&lt;h3 id="vivo">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#vivo" class="anchor-link" aria-label="vivo">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>vivo&lt;/h3>
&lt;p>我在 vivo 的微信公众号上看到了招聘信息，进入官网后发现有个影像测试工程师的岗位和我的专业相符，于是想都没想就进行了网申。同样也是先做了个在线测评，内容和海康威视的差不多。简历筛选后也是一个笔试，内容除了海康威视考的那些内容，还有个编程的大题。我已经很久没有写过编程题了，更何况是在线限时的编程，我选择了我最熟悉的 C 语言，最终没写出来，直接提交了试卷。&lt;/p>
&lt;p>过了几天我收到了 vivo 的面试通知，甚是诧异。我笔试都是胡乱写的，这还能通过？也许 HR 是想等面试结束后和笔试成绩一起综合评估。面试的内容和之前也差不多，自我介绍，详细介绍自己的毕业设计，在学生工作中收获到了什么。此外，面试官还问了我相机拍摄图像的工作流程，拍摄图像的空间受到哪些因素的限制，手机拍摄图像用到了哪些功能模块。我都按照自己的理解进行了回答。&lt;/p>
&lt;p>大概过了一周，我收到了综合评估的结果，没通过。&lt;/p>
&lt;h3 id="宇视科技">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#宇视科技" class="anchor-link" aria-label="宇视科技">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>宇视科技&lt;/h3>
&lt;p>要不是我收到了宇视科技的笔试通知，我都忘记我在一个月前网申了这家公司。在我进行网申的时候好像还没有开始春招，不过 HR 似乎是按照春招接收的我的简历，我投的岗位是光学工程师。同样是在线测评，接着是笔试。笔试的内容和海康威视、vivo 不同，完全就是应用光学和物理光学的试题，有选择题，也有涉及复杂计算的大题。只要是考前好好复习自己的专业课教材就没什么问题。&lt;/p>
&lt;p>笔试结束后的第二天就收到了电话面试的通知。邮件里说的是下午一点进行面试，请我做好准备，结果我从一点等到了两点半，HR 才给我打来了电话。这让我对这家公司的印象很不好。作为负责人事管理部门的成员，时间观念是至关重要的。我也是一个十分看重时间的人。既然约定好了时间，就不要超时。作为被面试者，还要在百忙之中按时找到一个安静的地方等待面试，「你」为什么不按时进行面试呢？我难道要一个下午什么都不做，干等着「你」的电话吗？每个人的时间都很宝贵啊。&lt;/p>
&lt;p>我还是耐心完成了电话面试。面试中有一个问题依然是介绍自己的毕业设计，但角度比较奇特。HR 说对我的这些研究不了解，要求我用一个通俗易懂的方法介绍原理。&lt;/p>
&lt;p>电话面试之后，我又收到了进行线下素质面试的通知。这次是前往杭州下沙那一带进行面试，时间是早上九点。我早起坐地铁过去，稀里糊涂地完成了面试。最后结果也是没通过。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>我是在开学前几周向这些企业进行的网申。返校的那天，考研成绩出了，专业课考得挺不错的，但数学不出意料的炸了。看来我提前准备春招是正确的选择。对于考研二战还是直接就业这个问题，每个人都有不同的想法。我的家人，我认识的一个共同备战光机所的学长，还有我的毕设导师都认为一定要有个研究生学历，当然我也是很想有更高学历的。就算所学的专业并不热门，将来能获得高薪的机会很少，学历还是很重要的，起码能够提升自己的思想境界。所以我想，我还是会再参加考研的。不过应届生这个身份也挺重要的，错过了这个时间段，找工作就很难再找到心仪的岗位。所以我还是选择多留给自己一条路。在职考研确实在时间上有些困难，不过，我还是会奋斗下去的。&lt;/p>
&lt;p>在几次笔试中，我发现，虽然我投递的是和光学有关的岗位，但一些企业的笔试依然含有很多计算机能力的考查。这对于我来说是一个很致命的弱项。因为我的专业并不会教数据结构，并不会教数据库，并不会教 Linux，这些只能通过自学才能掌握。在面试中，虽然我介绍了自己参与过学校的科研训练，但面试官依然会把关注的重点放在毕业设计上。可能是因为，我参与的科研训练是和海洋光学有关的，这和岗位的联系并不大，了解的人也很少，但我的毕业设计是光学成像系统的设计，是和岗位密切相关的，也是光学中十分重要的内容。当我介绍到自己的学生工作时，面试官经常会问起工作中和上级的关系处理问题。因为学生工作培养的就是同学与同学、同学与老师之间的沟通能力和处理事务的能力，这是工作中极其重要的能力。&lt;/p>
&lt;p>第一次找工作，可能自己的想法还有些天真，对于自己选择的岗位认识还存在不足。别人对这个公司的评价褒贬不一，可能这个岗位并没有我想象中的那么好。但我觉得，毕竟这是以我目前的学历和水平最匹配的岗位，我差点与此失之交臂，但我还是努力抓住了机会，我不想轻易放弃。我还年轻，此时工作最重要的就是积累经验。不论将来我是否会去别的地方发展，我起码对于光学设计、对于我个人的能力有了更深层次的认识。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/got-a-ordinary-job/" target="_blank" rel="noopener">https://guanqr.com/life/school/got-a-ordinary-job/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/pressure/">压力</category></item><item><title>
一次邮箱被盗用的经历</title><link>https://guanqr.com/life/ideas/hack-account/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/hack-account/</guid><pubDate>Thu, 04 Mar 2021 15:19:28 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>天早上，到食堂吃完饭回到宿舍后，开机、连网、打开浏览器、进入校园邮箱、登录——然而我并没有登录成功。接着我再查看我的电脑网络连接，校园网的 VPN 也没有连上。这也就意味着，我只能浏览学校内网的网站，其他网站都无法进入。起初我以为是校园网出了问题，因为以前也有过连不上网的经历，那些都是学校网络设备出错了。可能这时候学校正在修复，所以我并没有太操心。&lt;/p>
&lt;p>我在上午的几个小时里，不断尝试着登录邮箱，都无法成功登录，下面还总是弹出一个提示，说我的账户或密码出错，或者是被限制登录。账户和密码？这总不会错吧，我记得清清楚楚，我也没修改过密码啊。限制登录？我又没有利用邮箱做什么出格的事，为什么要限制我登录啊。于是，在上午十一点左右，我决定拨打学校客服的电话。&lt;/p>
&lt;p>「喂，你好。我的邮箱今天登录不上去了，上面说我的账号密码有误或是限制登录。能看一下是什么原因吗？」电话先是接通到一个机器回复上，然后自动跳转到了人工客服。我直接询问了客服有关我的情况，当我把我的邮箱地址告诉客服后，客服说：「我在操作记录里看到你在昨天下午修改了一次密码。」What...? 我听过客服的话之后很惊讶，我哪里修改过密码。然后我告诉客服我的账号可能被恶意篡改密码了，客服确认了我的身份之后，帮我修改了密码。&lt;/p>
&lt;p>看来我的邮箱真的被盗用了！我说为什么我连校园网都登录不上去（校园网和邮箱账户是共用密码的）。在我成功登录邮箱之后，进入收件箱，原来我昨晚收到了好几封邮件。我还奇怪怎么我的手机邮箱客户端昨天一晚上都没有动静。昨天下午我还登录过邮箱，我刚退出邮箱就被盗用了。收件箱里还收到了一些莫名其妙的邮件，什么发送失败被退回的邮件，还有自动回复的邮件。再看看已发送的邮件记录，哦，那个盗用我账户的人，利用我的邮箱，给四百多个 QQ 邮箱群发了垃圾邮件！&lt;/p>
&lt;p>在邮箱的登录记录中，我看到，昨晚六点多有使用搜狗浏览器登录的记录。然而我从来就没有用过搜狗浏览器。在我的收件箱里，还有一封欢迎使用网易邮箱大师的邮件。我也没有用过网易的邮箱客户端。我不知道这个盗用我账户的人，为什么要利用我的校园邮箱给别人发送垃圾邮件。用校园邮箱的地址发邮件，难道不是很容易进入到垃圾箱中吗。值得庆幸的是，这个人并没有拿我的邮箱做出更为出格的事，没有删除我的重要邮件，没有给我的已知联系人发垃圾邮件。&lt;/p>
&lt;p>我这几年从来没有在陌生的设备上登录过我的任何账号，我的任何账号在此之前都没有被盗用过。但这件突如其来的事依然发生了。这也警醒了我，一定要注意自己的个人信息和账号安全，再复杂的密码也存在一定的安全隐患。不要在不熟悉、不安全的设备上留下自己的账号信息。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/hack-account/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/hack-account/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
白日梦魇</title><link>https://guanqr.com/life/ideas/daymare/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/daymare/</guid><pubDate>Mon, 15 Feb 2021 15:26:20 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="家">&lt;a href="https://guanqr.com/life/ideas/daymare/#家" class="anchor-link" aria-label="家">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>家&lt;/h2>
&lt;p style="text-indent:0">回家后，每天吃完午饭，疲倦感就涌了上来。在学校的时候，中午虽然也会躺在床上，但因为宿舍里并非只有我一个人，并不宽阔的硬板床也不如家中的床那么舒服，所以我很少会睡着。但在家，入眠的过程总是很短暂。家，是我觉得最为舒适的地方。能够让我抛去学习工作中的烦恼与喧嚣，让我的内心获得真正宁静，让我的身体得到充足休憩的地方。&lt;/p>
&lt;h2 id="假期">&lt;a href="https://guanqr.com/life/ideas/daymare/#假期" class="anchor-link" aria-label="假期">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>假期&lt;/h2>
&lt;p style="text-indent:0">春节的这几天，其实和往常一样，无非就是多看了些电视节目，多吃了些大鱼大肉。当然，我还有毕设要做。其实在和导师的沟通中，从他的话语可以看出，其实假期里可以不做，但答辩的时候我写的计划里包含了假期要做一部分内容（实际上这些工作安排是导师写的，大概他没考虑到假期，或者只是意思意思，并没有放在心里）。这样的话，那肯定还是要做点东西出来才好。&lt;/p>
&lt;h2 id="车票">&lt;a href="https://guanqr.com/life/ideas/daymare/#车票" class="anchor-link" aria-label="车票">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>车票&lt;/h2>
&lt;p style="text-indent:0">前几天正好要买返校的火车票。在 12306 的手机端观察了几天发现，从北京到杭州的车票很好买。因为大部分出来打工的人是从别的地方去北京或杭州，绝不会从北京到杭州。但是，我从河北到北京的车票却异常难抢，每次一到点，车票就秒没。可能是因为河北的这一站比较小，预留的车票少。然而有趣的是，某一趟车次的一等座并不会抢空。买一等座其实也是可以的。从家到北京坐火车也就二三十分钟，比从杭州到上海还要近，就算是一等座，车票的价格也是很便宜的。&lt;/p>
&lt;h2 id="梦">&lt;a href="https://guanqr.com/life/ideas/daymare/#梦" class="anchor-link" aria-label="梦">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>梦&lt;/h2>
&lt;p style="text-indent:0">平时睡觉的时候，我不常做梦。每次都会在不知不觉中沉睡，然后又在不知不觉中醒来。可这几天在午休的时候，虽然身体处在放松的状态，但我的精神倍加紧张，因为我做了一个又一个噩梦。梦中的场景并非天马行空，就是我平时生活的地方。梦中遇到的人也是我平时生活中认识的人。但我却在梦中经历了重重古怪的经历。这些经历并非违背常理，但对我的心理有一定的冲击。&lt;/p>
&lt;h2 id="时间">&lt;a href="https://guanqr.com/life/ideas/daymare/#时间" class="anchor-link" aria-label="时间">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>时间&lt;/h2>
&lt;p style="text-indent:0">在抢票的那一天，我盯着手机屏幕守着时间。由于是下午四点才开始抢票，我太累太困，不知怎么就睡着了。而后醒来，看着手机上显示的时间，早已过了四点。我没有抢到票！那我如何回学校呢！于是惊醒——哦，原来刚才是一场梦，现在还没有到四点。可我还是太困了。就将抢票的任务交给了我的母亲，我继续睡了。我不放心，入睡后又一次醒来，询问母亲买到票没有，母亲说没抢到。看来真的回不去了。于是惊醒——原来之前发生的一切都是梦中梦，我确认了一下我是处在现实中，看了看时间，真的还没有到四点。&lt;/p>
&lt;h2 id="实验室">&lt;a href="https://guanqr.com/life/ideas/daymare/#实验室" class="anchor-link" aria-label="实验室">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>实验室&lt;/h2>
&lt;p style="text-indent:0">实验室让我买一个过滤箱带过去，我就从网上订购了一个，用快递寄到了学校。在我辛辛苦苦从菜鸟驿站将箱子搬到实验室，打开包装盒才发现，原来我买错了。于是，我面临着导师和学长们的抱怨和不满。他们本来就看不起我，我想用自己的能力来证明自己，可这次又让他们失望了。看来这一天又要加班工作，唯有不停地工作才能让他们满足吧。于是惊醒——在确认我现在还在家中之后，叹出一口长气。&lt;/p>
&lt;h2 id="铁钉">&lt;a href="https://guanqr.com/life/ideas/daymare/#铁钉" class="anchor-link" aria-label="铁钉">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>铁钉&lt;/h2>
&lt;p style="text-indent:0">我回到了小学，见到了班主任。我的身边都是熟悉的面孔，他们都是我曾经的伙伴。在六年级毕业之后，我们再也没有见过彼此。班主任坐在讲台上，我们仍像当初那样乖乖地坐在课桌前。下课铃响了，我走出了教室，却被两个人拦住，把我带到了某处小花园。他们按着我的身子，拿出几颗铁钉，扎入了我的头部。他们研究过人脑的结构，知道将铁钉插到哪个地方既能让我保持清醒，又能感受到疼痛。他们让我承认一件我从来没有做过的事情，可我不愿承认，他们便将铁钉扎得更深了。于是惊醒——我摸着我的头部，似乎仍有承受不了的疼痛感。&lt;/p>
&lt;h2 id="醒">&lt;a href="https://guanqr.com/life/ideas/daymare/#醒" class="anchor-link" aria-label="醒">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>醒&lt;/h2>
&lt;p style="text-indent:0">为什么在春节期间的中午，我会有这么多的噩梦。本科四年的最后一学期即将降临，升学？就业？我究竟能不能考上研，我究竟能不能找到工作，我究竟能不能顺利毕业，我未来半年的生活应该怎样度过。无限的焦虑在新年的开始就不断涌出，让我倍感压力。虽然那些经历都是梦境，但生活确实也像一场噩梦，我想要醒来，看到窗外的阳光。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/daymare/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/daymare/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/childhood/">童年</category><category domain="https://guanqr.com/tags/pressure/">压力</category></item><item><title>
在 MemE 主题中实现轮播图功能</title><link>https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/</link><guid isPermaLink="true">https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/</guid><pubDate>Thu, 28 Jan 2021 10:49:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="问题描述">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#问题描述" class="anchor-link" aria-label="问题描述">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>问题描述&lt;/h2>
&lt;p>前段时间有位博友向我询问如何在 Hugo 的 MemE 主题中添加轮播图功能。我以前见过一些博客，在首页的文章目录上方放置有一个轮播图。与各种网站上的轮播图功能类似，通过轮播图，可以吸引读者访问博主推荐阅读的文章。NexT 和 MemE 主题都没有自带这一功能，以前看过的轮播图只是一些博主进行 DIY 的结果。&lt;/p>
&lt;p>我没有使用轮播图的需求，所以没有仔细研究过如何添加轮播图。不过既然有博友向我询问了，不妨尝试一下。本文提供了一种实现轮播图功能的思路。所谓「一种思路」，就是说我提供的这种方法只是一次简单的尝试，个人能力有限，还有很多值得完善的地方，方法仅供参考。&lt;/p>
&lt;h2 id="实现方法">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#实现方法" class="anchor-link" aria-label="实现方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>实现方法&lt;/h2>
&lt;h3 id="初步尝试">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#初步尝试" class="anchor-link" aria-label="初步尝试">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>初步尝试&lt;/h3>
&lt;p>首先我参考了 Sanarous 在 CSDN 上的文章：《&lt;a href="https://blog.csdn.net/weixin_42073018/article/details/89600035" target="_blank" rel="noopener"> Hexo 博客首页添加轮播图&lt;/a>》。作者在文中给出了在 NexT 中添加轮播图的详细代码。如果将代码完全复制到 Hugo 中显然不行。首先我对文中的代码进行整理，新建了一个页面进行效果展示，将 HTML 代码放到页面中，将 CSS 代码放到主题的 &lt;code>_custom.scss&lt;/code> 中。具体代码如下：&lt;/p>
&lt;p>HTML:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;100%&amp;#34;&lt;/span> &lt;span class="na">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;320px&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;border: 0px; overflow: hidden; border-radius: 10px;&amp;#34;&lt;/span> &lt;span class="na">scrolling&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;no&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;myCarousel&amp;#34;&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel slide&amp;#34;&lt;/span> &lt;span class="na">data-ride&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel&amp;#34;&lt;/span> &lt;span class="na">data-interval&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;3500&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">ol&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel-indicators&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span> &lt;span class="c">&amp;lt;!--这里手动设置五个轮播图--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;0&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;1&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;2&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;3&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;4&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">ol&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- 轮播（Carousel）项目 --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel-inner&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 280px; border-radius: 10px; width: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item active&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;超链接地址 1&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;图片地址 1&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;超链接地址 2&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;图片地址 2&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%;&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;超链接地址 3&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;图片地址 3&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%;&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;超链接地址 4&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;图片地址 4&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%;&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;超链接地址 5&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;图片地址 5&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%;&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- 轮播（Carousel）导航 --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;left carousel-control&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">role&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;button&amp;#34;&lt;/span> &lt;span class="na">data-slide&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;prev&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;glyphicon glyphicon-chevron-left&amp;#34;&lt;/span> &lt;span class="na">aria-hidden&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;right carousel-control&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">role&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;button&amp;#34;&lt;/span> &lt;span class="na">data-slide&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;next&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;glyphicon glyphicon-chevron-right&amp;#34;&lt;/span> &lt;span class="na">aria-hidden&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>CSS:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">carousel&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">carousel-inner&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">overflow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;gt;&lt;/span> &lt;span class="err">.item&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">0.6&lt;/span>&lt;span class="kt">s&lt;/span> &lt;span class="kc">ease-in-out&lt;/span> &lt;span class="kc">left&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;gt;&lt;/span> &lt;span class="err">img,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;gt;&lt;/span> &lt;span class="err">a&lt;/span> &lt;span class="err">&amp;gt;&lt;/span> &lt;span class="err">img&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">active&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;.left&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;amp;&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">right&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">next&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;.left&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">prev&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;.right&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">carousel-control&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.6&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;.left&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-image&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">linear-gradient&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kc">to&lt;/span> &lt;span class="kc">right&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.0001&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-repeat&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">repeat-x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;amp;&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">right&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-image&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">linear-gradient&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kc">to&lt;/span> &lt;span class="kc">right&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.0001&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-repeat&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">repeat-x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;amp;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span>&lt;span class="o">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">&amp;amp;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">focus&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">outline&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-decoration&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">0.9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">glyphicon-chevron-left&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;:before{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;《&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">glyphicon-chevron-right&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">&amp;amp;:before{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;》&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">carousel-indicators&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">60&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-30&lt;/span>&lt;span class="kt">%&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">list-style&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">li&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-indent&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-999&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="kc">solid&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">cursor&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">pointer&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">active&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-info" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/>&lt;/svg>&lt;/div>&lt;p>注意，原文中的代码可以通过检索配置文件中插入的图片个数自动生成对应数目的轮播图，但原文代码的循环语句在 Hugo 中不适用。为了方便对主题进行适配，先直接采用无脑列举的方法，而不是添加循环语句。&lt;/p>&lt;/div>
&lt;p>现在具体的代码已经写好了，接下来需要考虑将图片的设定插入到主题配置文件 &lt;code>config.toml&lt;/code> 中。&lt;/p>
&lt;h3 id="进阶方法">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#进阶方法" class="anchor-link" aria-label="进阶方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>进阶方法&lt;/h3>
&lt;p>首先在主题配置文件 &lt;code>config.toml&lt;/code> 中的 &lt;code>[params]&lt;/code> 下创建新配置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 自定义轮播图功能&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 是否开启轮播图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableCarousel&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 轮播图展示的第一幅图的超链接&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">carouselActiveUrl&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;超链接地址 1&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 轮播图展示的第一幅图的地址&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">carouselActiveImage&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;图片地址 1&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>配置中的各项内容说明已在代码中注释。这里需要注意，在我们访问到有轮播图的这一页面的时候，轮播图首先要展示一幅图片，然后再向左滑动展示第二幅图，第一幅图 HTML 代码中的 &lt;code>class&lt;/code> 最开始的状态即为 &lt;code>active&lt;/code>，所以第一幅图需要单独配置。&lt;/p>
&lt;p>至于轮播图中其他图的配置，单独创建一个文件储存即可。我们首先在文件夹的根目录下创建 &lt;code>data&lt;/code> 文件夹（即 &lt;code>SVG.toml&lt;/code> 所在的文件夹，如果已有该文件夹则忽略此步骤）。然后在 &lt;code>data&lt;/code> 文件夹下创建 &lt;code>carousel.toml&lt;/code> 文件。在该文件中，填写如下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">carousel&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;超链接地址 2&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">image&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;图片地址 2&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">carousel&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;超链接地址 3&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">image&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;图片地址 3&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">2&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">carousel&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;超链接地址 4&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">image&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;图片地址 4&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">3&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>除了你要展示的第一幅图（第一幅图已在主题配置文件 &lt;code>config.toml&lt;/code> 中配置过了），其他图片的超链接和地址都按照这样的格式添加到文件中。即如果你要展示 5 幅图，将第 1 幅图配置在 &lt;code>config.toml&lt;/code> 中，后 4 幅图配置在 &lt;code>carousel.toml&lt;/code> 中。在 &lt;code>carousel.toml&lt;/code> 中，每个图的设定中有个 &lt;code>weight&lt;/code> 权重设置。即，要展示的 5 幅图中，在 &lt;code>config.toml&lt;/code> 中配置的第 1 幅图 &lt;code>weight = 0&lt;/code>，这里不用再进行设置；第二幅图 &lt;code>weight = 1&lt;/code>；第三幅图 &lt;code>weight = 2&lt;/code> ……以此类推。什么这么麻烦呢？因为我个人能力有限，暂时写不出更好的调用方式。&lt;/p>
&lt;p>接着就将下面修改后的 HTML 代码添加到你想要放置轮播图的页面，CSS 的设定不变。注意这里的 HTML 代码中添加了循环语句，不能直接放置在 Markdown 中，因为无法直接转义。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">{{ if .Site.Params.enableCarousel }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;100%&amp;#34;&lt;/span> &lt;span class="na">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;320px&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;border: 0px; overflow: hidden; border-radius: 10px;&amp;#34;&lt;/span> &lt;span class="na">scrolling&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;no&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;myCarousel&amp;#34;&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel slide&amp;#34;&lt;/span> &lt;span class="na">data-ride&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel&amp;#34;&lt;/span> &lt;span class="na">data-interval&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;3500&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">ol&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel-indicators&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span> &lt;span class="c">&amp;lt;!--这里手动设置五个轮播图--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;0&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range .Site.Data.carousel }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range sort . &amp;#34;weight&amp;#34; }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span> &lt;span class="na">data-target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">data-slide-to&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .weight }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">ol&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- 轮播（Carousel）项目 --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;carousel-inner&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 280px; border-radius: 10px; width: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item active&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .Site.Params.carouselActiveUrl }}&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .Site.Params.carouselActiveImage }}&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range .Site.Data.carousel }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range sort . &amp;#34;weight&amp;#34; }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .url }}&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height: 100%;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .image }}&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: 100%; height: 100%&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- 轮播（Carousel）导航 --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;left carousel-control&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">role&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;button&amp;#34;&lt;/span> &lt;span class="na">data-slide&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;prev&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;glyphicon glyphicon-chevron-left&amp;#34;&lt;/span> &lt;span class="na">aria-hidden&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;right carousel-control&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#myCarousel&amp;#34;&lt;/span> &lt;span class="na">role&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;button&amp;#34;&lt;/span> &lt;span class="na">data-slide&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;next&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;glyphicon glyphicon-chevron-right&amp;#34;&lt;/span> &lt;span class="na">aria-hidden&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>主题首页布局的代码存放在 &lt;code>/layouts/partials/pages/&lt;/code> 文件夹中。比如说，想要将轮播图加入到首页布局为文章摘要的页面，则将该段代码插入到文件夹中的 &lt;code>home-posts.html&lt;/code> 文件的 &lt;code>&amp;lt;div class=&amp;quot;main-inner&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code> 中。在诗意人生的布局中，将代码插入到 &lt;code>home-poetry.html&lt;/code> 的 &lt;code>&amp;lt;div class=&amp;quot;poetry&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code> 中。可能在不同的首页布局中，轮播图呈现出来的宽度不同，这里就需要根据具体的情况对 CSS 进行修改，或者调整图片的长宽比。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/carousel-0.png" alt="carousel-0.png">&lt;span class="caption">※ 文章摘要页面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/carousel-1.png" alt="carousel-1.png">&lt;span class="caption">※ 诗意人生页面&lt;/span>&lt;/p>
&lt;h3 id="简化方法">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#简化方法" class="anchor-link" aria-label="简化方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>简化方法&lt;/h3>
&lt;p>经过和博友交流，博友分享了一种更为简单的方法。就是利用 Hugo 博客的简码功能，设定一个简码模板，这样可以灵活地调用轮播图功能，不再局限于在特定页面使用固定图片的轮播图，并且轮播图的样式更加适配主题。有关 Hugo 简码的功能介绍，可以参考我的另一篇文章：《&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/">自定义 Hugo Shortcodes 简码&lt;/a>》。这种轮播图取消了轮播的箭头，需要左右拨动图片进行轮播。&lt;/p>
&lt;p>首先新增一个名为 &lt;code>carousel.html&lt;/code> 的简码模板文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">{{ if .Site.Params.enableCarousel }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">link&lt;/span> &lt;span class="na">rel&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;stylesheet&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- Swiper --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;swiper-container&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;swiper-wrapper&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{$itItems := split (.Get 0) &amp;#34;,&amp;#34;}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{range $itItems }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;swiper-slide&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{.}}&amp;#34;&lt;/span> &lt;span class="na">alt&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{end}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- Add Pagination --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;swiper-pagination&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">&amp;lt;!-- Initialize Swiper --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">swiper&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Swiper&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;.swiper-container&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pagination&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;.swiper-pagination&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">paginationClickable&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>接着增加 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">swiper-container&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="kc">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">swiper-slide&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">18&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="kc">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="kc">lower&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="kc">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="kc">lower&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="kc">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="kc">lower&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">l&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">/* Center slide text vertically */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">justify-content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="err">img&lt;/span> &lt;span class="err">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="err">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果在某篇文章中想要插入轮播图，使用如下所示的简码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">carousel&lt;/span> &lt;span class="err">&amp;#34;&lt;/span>&lt;span class="na">URL1&lt;/span>&lt;span class="err">,&lt;/span>&lt;span class="na">URL2&lt;/span>&lt;span class="err">,&lt;/span>&lt;span class="na">URL3&lt;/span>&lt;span class="err">,&lt;/span>&lt;span class="na">URL4&lt;/span>&lt;span class="err">,&lt;/span>&lt;span class="na">URL5&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>代码中的 &lt;code>URL1&lt;/code>、&lt;code>URL2&lt;/code>……&lt;code>URL5&lt;/code> 即为图片链接地址，图片数目自行设定，逗号后不能空格。&lt;/p>
&lt;p>最后在主题配置文件 &lt;code>config.toml&lt;/code> 中的 &lt;code>[params]&lt;/code> 下创建新配置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 是否开启轮播图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">enableCarousel&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体样式如下所示：&lt;/p>
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
&lt;div class="swiper-container">
&lt;div class="swiper-wrapper">
&lt;div class="swiper-slide">
&lt;img src="https://guanqr.com/images/soul-0.jpg" alt="">
&lt;/div>
&lt;div class="swiper-slide">
&lt;img src="https://guanqr.com/images/soul-1.jpg" alt="">
&lt;/div>
&lt;div class="swiper-slide">
&lt;img src="https://guanqr.com/images/soul-2.jpg" alt="">
&lt;/div>
&lt;div class="swiper-slide">
&lt;img src="https://guanqr.com/images/soul-3.jpg" alt="">
&lt;/div>
&lt;/div>
&lt;div class="swiper-pagination">&lt;/div>
&lt;/div>
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js">&lt;/script>
&lt;script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
});
&lt;/script>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>对于在 MemE 主题中插入轮播图功能，我提供了一种比较繁琐的方法。需要在主题配置文件 &lt;code>config.toml&lt;/code> 中添加新配置，在 &lt;code>data&lt;/code> 文件夹中创建新的存储数据，并对主题的首页布局文件进行修改，同时添加新的 CSS 样式。因为我并非计算机专业出身，对前端设计的内容只懂个皮毛，所以，轮播图的代码还有很多值得改进的地方。比如，使用更为简化的循环语句。将第 1 幅图和其他图存在同一个文件中，不用如此麻烦的调用。如果有精通这方面的大佬能够提供更为简化的方法，欢迎交流沟通。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/" target="_blank" rel="noopener">https://guanqr.com/tech/website/a-way-to-realize-carousel-in-meme/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
量子计划 Quark 迷你卡片电脑初体验</title><link>https://guanqr.com/tech/computer/first-experience-of-project-quantum/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/first-experience-of-project-quantum/</guid><pubDate>Wed, 13 Jan 2021 09:23:54 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="项目背景">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#项目背景" class="anchor-link" aria-label="项目背景">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>项目背景&lt;/h2>
&lt;p>去年在家上网课期间，在 b 站关注了一位技术 up 主——稚晖君。他进行了一个自制超迷你 Linux 卡片电脑软硬件开源项目，名为「量子计划」。关于该计划的相关设计在 b 站的播放量超过百万，许多人都被他设计的精致小板子震撼。目前该计划的 PCB 设计、系统镜像和相关代码都已开源：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/peng-zhihui/Project-Quantum target="_blank">peng-zhihui / Project-Quantum&lt;/a>
&lt;/div>
&lt;div class="description">超迷你模块化卡片电脑计划&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #555555">&lt;/span>
&lt;span class="language-name">C&lt;/span>
&lt;/div>
&lt;/div>
&lt;p>当然，从理论上讲，既然已经开源了项目，所有的东西都能够自己做出来。但实际上，因为量子计划的核心板 Quark-N 采用了 6 层高密度沉金 PCB 工艺制造，集成了完整的片上 ARM-Linux 系统（包含 CPU、DDR、eMMC），一般的工厂不会生产这样高难度的板子，所以成本十分高。并且，就算生产出来了，那些电容、电阻等贴片元件还要我自己焊接，我的技术远远达不到要求。所以，通过开源的文件自己进行制作，是不可能的。&lt;/p>
&lt;p>不过还是有厂家站出来进行了量产。Seeed Studio 矽递公司拿到了授权，在 2020 年底开始进行预约量产。我有幸成为早期预约的人，在 2021 年初拿到了第一批产品。矽递在其官方 Wiki&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup> 上已经更新了使用教程，我按照教程简单体验了一下板子的功能。事先声明一下，我只是个开发板领域的小白，因此对于产品的评价十分粗浅，该开发板的很多功能我都没有测试过，只是「初步体验」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-0.jpg" alt="quark-0.jpg">&lt;span class="caption">※ Quark 量产型正面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-1.jpg" alt="quark-1.jpg">&lt;span class="caption">※ Quark 量产型背面&lt;/span>&lt;/p>
&lt;h2 id="初步体验">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#初步体验" class="anchor-link" aria-label="初步体验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>初步体验&lt;/h2>
&lt;h3 id="产品亮点">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#产品亮点" class="anchor-link" aria-label="产品亮点">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>产品亮点&lt;/h3>
&lt;p>矽递生产的套件由 Atom-N 和 Quark-N 组成，也就是说，这款量产型产品不仅仅有 Quark-N 核心板件，还有 Atom-N 功能扩展板。Quark-N 可以利用金手指 M.2 接口固定在 Atom-N 上。其实在作者开源仓库里还有一些基于该核心板的其他拓展组件，矽递并没有生产出来，可能是因为这些组件需求量不大，生产成本很高。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-2.png" alt="quark-2.png">&lt;span class="caption">※ 核心板与扩展板的组合&lt;/span>&lt;/p>
&lt;p>包装盒里还有一小包散热片和一个小铜柱。散热片有四片，但实际上只需要给 CPU 和它旁边的组件贴上散热片即可。这里需要注意，一定要贴散热片。因为 CPU 使用的是全志 H3，发热严重。矽递将来可能会生产相应的散热模块，如果有主动散热的风扇模块，我想我应该会买一个。铜柱也是很关键的一个零件，可以将它焊接在电路板上的一个多出来的焊盘上，作为散热模块或者外盒螺丝固定的地方。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-3.jpg" alt="quark-3.jpg">&lt;span class="caption">※ 散热片、铜管、包装盒&lt;/span>&lt;/p>
&lt;p>这个板子的体积是普通树莓派大小的 1/4（40mm × 35mm），虽然板子很小，但配置了麦克风，陀螺仪，加速度计，显示屏、功能按键，在 Quark-N 核心板上集成了 16GB 的 eMMC。可以将系统放进 eMMC，这样不需要插入 SD 卡也能够访问系统。此外，板子上依然有 16 个空焊盘，可以看作是拓展接口。&lt;/p>
&lt;h3 id="简单操作">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#简单操作" class="anchor-link" aria-label="简单操作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>简单操作&lt;/h3>
&lt;p>根据官网的指导下载系统，使用 Type-C 接口给板子供电，然后就是初始化开发板的一系列操作。因为板子上带有显示屏，开机后自动进入终端，所以可以直接插入了键盘输入命令。显示屏也可进入图形界面，只需要输入命令：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ sudo startx
&lt;/code>&lt;/pre>&lt;p>但是进入图形界面后会有一个问题，因为显示屏太小了，桌面无法显示完整。所以最好的方法还是借助于 PC 的显示屏。这就需要使用 SSH 进行连接了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-4.jpg" alt="quark-4.jpg">&lt;span class="caption">※ 在自带的显示屏上显示终端&lt;/span>&lt;/p>
&lt;p>打开手机热点，让 PC 和 Quark 都连接到手机热点，即在同一网络下。在 Quark 上，使用 Network Manager 来管理网络，按照以下步骤连接 WiFi：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>切换到 root 用户&lt;/strong>:&lt;/p>
&lt;pre tabindex="0">&lt;code>$ su root
&lt;/code>&lt;/pre>&lt;/li>
&lt;li>
&lt;p>&lt;strong>开启 WiFi&lt;/strong>：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ nmcli r wifi on
&lt;/code>&lt;/pre>&lt;/li>
&lt;li>
&lt;p>&lt;strong>扫描附近的 WiFi&lt;/strong>:&lt;/p>
&lt;pre tabindex="0">&lt;code>$ nmcli dev wifi
&lt;/code>&lt;/pre>&lt;/li>
&lt;li>
&lt;p>&lt;strong>连接到特定的 WiFi&lt;/strong>:&lt;/p>
&lt;pre tabindex="0">&lt;code>$ nmcli dev wifi connect &amp;#34;SSID&amp;#34; password &amp;#34;PASSWORD&amp;#34; ifname wlan0
&lt;/code>&lt;/pre>&lt;p>将 &lt;code>SSID&lt;/code> 和 &lt;code>PASSWORD&lt;/code> 改成 WiFi 的账号和密码，连接一次以后，下次默认连接该 WiFi。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>注意账号和密码前后有双引号，且引号前后要加空格。这里我第一次输入的时候忘记加空格，出现了报错。&lt;/p>&lt;/div>
&lt;p>连接上网络后，我在 PC 上使用远程桌面连接试图访问系统桌面的时候，却发现怎么都连不上，系统 SSH 功能开启了，不知道什么问题。所以我决定先利用串口通信，用 Type-C 的线直接将板子和 PC 连接，也就是用 PC 给板子供电和传输数据。我使用的是 Xshell，连接的名称可以随便写，但协议要选择 &lt;code>SERIAL&lt;/code>。通过串口通信可以轻松访问系统。&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>这里还要注意一点，早批次的 Atom-N 插入 Type-C 接口的两个方向功能是不一样的，一面是串口通信时需要的 USB Serial，旋转 180 度后插入则为 USB OTG，之后批次的取消了 USB OTG 的功能，两面都为 USB 串口。&lt;/p>&lt;/div>
&lt;p>在进行串口通信后，我再次使用远程桌面连接，填写 IP 地址、用户名、密码[^2]，就成功访问到了系统桌面。在这一步骤中，可以通过手机热点设置中查看连接设备的 IP 地址。系统的用户名为 &lt;code>pi&lt;/code>，密码为 &lt;code>quark&lt;/code>。&lt;/p>
&lt;p>在以上都设定好后，就可以愉快地体验这一个迷你卡片电脑了。&lt;/p>
&lt;h2 id="一些小问题">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#一些小问题" class="anchor-link" aria-label="一些小问题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>一些小问题&lt;/h2>
&lt;p>由于这块板子是稚晖君个人设计的，因此某些地方还会存在一定的问题，以下是我认为值得改进的地方：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>散热问题。目前我认为这是最严重的问题。由于采用了 H3 CPU，发热很严重。如果没有散热措施，开机后在很短的时间温度就能飙升到很高，我没有测量具体的温度，但从感觉上来讲，很烫手。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>元件不牢固。我使用的时候很小心，没有出现掉件的现象。但在技术交流群里，有人的电路板上的元件焊接不牢固。那么小的一块贴片电容电阻，如果电路板上的焊盘也掉了，自己重新焊接十分麻烦。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>eMMC 的问题。这是我第一次接触到 eMMC 的概念，还没有深入研究，不过在技术交流群里很多大佬已经直接将系统装在 eMMC 中。有人发现自己核心板上的 eMMC 只有 8GB，但正常情况下应该是 16GB；并且大多数人的 eMMC 来自台湾，少部分人的 eMMC 是大陆产的。购买的元件生产厂不统一。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>缺少网线和 HDMI 接口。在 Quark 板子的初代设计中，是有这些接口的，但目前的设计为了小型化取消了这些组件，我觉得是一个遗憾。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>系统优化。Quark 的系统属于 Ubuntu 系统，进行了一些修改。目前的系统还有很多不完善的地方，比如我点击某些图标会报错。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>总的来说，这块板子还是很不错的。300 块钱的价格，比自己根据设计文件进行定制要便宜很多。购入 Quark 的目的不是说为了追求板子的性能有多好，而是为了体验在这么小的板子上能实现这么多功能，感受新鲜事物带来的一种新奇与震撼。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/quark-5.jpg" alt="quark-5.jpg">&lt;span class="caption">※ 一个键盘、一个鼠标，一块 Quark，组成了最小的计算机&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>官方 Wiki：&lt;a href="https://wiki.seeedstudio.com/cn/Quantum-Mini-Linux-Development-Kit/" target="_blank" rel="noopener">https://wiki.seeedstudio.com/cn/Quantum-Mini-Linux-Development-Kit/&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/first-experience-of-project-quantum/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/first-experience-of-project-quantum/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/linux/">Linux</category><category domain="https://guanqr.com/tags/quark-n/">Quark-N</category></item><item><title>
英语水平测试经历回顾</title><link>https://guanqr.com/life/school/zju-english-proficiency-test/</link><guid isPermaLink="true">https://guanqr.com/life/school/zju-english-proficiency-test/</guid><pubDate>Sat, 09 Jan 2021 10:40:44 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">很&lt;/span>多学校对学生的英语水平有一定的要求，比如说，在本科毕业的时候 CET-6 一定要达到多少分，浙大也一样。不过，作为一个浙大的学生，就算你 CET-6 考了 600 分也没用，因为学校根本不看你的 CET-6 成绩。浙大有一个 1 学分必修的英语水平测试，俗称水测，考的内容由三部分——听力阅读、写作、口语。三项都通过后，才可以毕业。&lt;/p>
&lt;p>水测的流程是这样的。每学期学校安排一次考试。从大二开始可以报名参加。首先报名听力阅读和写作的考试，这两项考试是机考，去紫金港校区的英语教室进行考试。如果这两项考试中有哪一项没通过，那么下学期考试的时候可以直接补考这一项。如果还没通过，接着补考。两项考试都通过后，就可以报名口语考试，口语考试也是没通过可以无限期进行补考。如果没通过某项考试，并不算挂科，只有全部通过后，成绩单上才会显示「合格」二字。&lt;/p>
&lt;p>作为一个英语「菜鸡」，我在大二的第二个学期才参加第一次听力阅读和写作的考试。在经历了 CET-6 考试的洗礼后，我很清楚我的听力和词汇量实在是不如别人。听力的难度应该和 CET-6 相差不大，每一题只有选项，对话和题目都需要听。我肯定是听不太懂，只能听到某个词就选相关的选项。阅读部分主要考的还是词汇量，一篇文章下来，起码要明白五个问题问的是什么意思。总共有两篇常规阅读题，还有一道题是完形填空，文章里有十个空，给出十多个词选填。听力阅读做下来整个人都是蒙的，这感觉和考 CET-6 差不多。结果成绩出来的时候，果然，挂了。写作部分我觉得是很简单的，可能是因为在高中的时候，班主任是英语老师，每周有很多英语作文的训练。有许多人第一次考的时候听力阅读通过了，写作却没过。大概是没有注意文章的结构、词汇的拼写、标点使用的问题。&lt;/p>
&lt;p>关于听力阅读的补考，我是在大三的第一个学期去补考的。因为已经换校区了，我还得坐公交从玉泉去紫金港考，有些麻烦。那天中午我坐公交的时候，看到车里的人越来越多，越来越挤，到紫金港那一站的时候，一车的人都下去了——看来都是要考英语的。这一次的补考，体验和上一次差不多，稀里糊涂的考完，接着就是听天由命。不过这次很幸运，我居然通过了。我每次考英语考试都不怎么复习，因为我知道，词汇量的积累是一个长期的过程，短期的话无论做多少题都没用。所以，就算是补考，我也没复习。&lt;/p>
&lt;p>口语考试是水测的最后一关。我在大四的第一个学期才参加的口语考试。以前在逛校论坛的时候，很多人都说，水测水测，本来就很水，口语水水就过去了，开口就过。但最近又有一些人说，自己口语考试挂了。我之前在 CET-6 的口语考试就考出了阴影，看到还有人挂了，就更加紧张了。口语考试，真的不能裸考了。口语考试的形式每一学期都是固定的，四个人一组，考官随机抽取一个主题，作为这场考试的总主题。开场的时候，每个人要做自我介绍，叫什么名字，学号是多少。第一轮，每个人抽取有关这个主题的一个子话题发表自己的看法。第二轮，考官提出一个话题，四个人无领导小组讨论。第三轮，考官针对每个学生问一个问题。&lt;/p>
&lt;p>我通过阅读一些人在校论坛的经验分享，了解到每一学期的考试题目都差不多，那么只要准备足够多的题目，到时候考官抽中的题，自然是我已经准备好的题。有人汇总了那些经验分享，列出了出现过的考试话题。有需要的同学可以到校论坛里找一找。我们考场的主题是 &lt;em>The Power Of Music&lt;/em>，然而我准备的题目里并没有这样的话题，只能临场发挥了。三轮问答，我扯到了林俊杰，鲍勃·迪伦以及一些乱七八糟的东西，我都不知道我在说什么。最后一个问题还因为时间不够，没有说完就被老师中断了。一场考试下来，我觉得以我这样的表现，真通过不了。不过最后老师还是给我合格了。可能是看到我马上要毕业的缘故吧。&lt;/p>
&lt;p>水测的经历到此就结束了，现在觉得其实不难，要是平时多背点单词，轻轻松松就能通过。不过仔细想想，我只在大一的时候上过英语课，并且在英语课上没学到什么，后面几年虽然经常参加英语考试，但都是吃高中的老本。高考英语 140+，应对这些足矣。有些人还要大费周折选择用 CET-6 或者 TOEFL 考试来替代水测，我觉得大可不必。要知道，达到这些替代考试所要求的的成绩要比水测要难得多。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/zju-english-proficiency-test/" target="_blank" rel="noopener">https://guanqr.com/life/school/zju-english-proficiency-test/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
生存死亡，心灵奇旅</title><link>https://guanqr.com/life/films/soul/</link><guid isPermaLink="true">https://guanqr.com/life/films/soul/</guid><pubDate>Tue, 05 Jan 2021 19:16:16 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">农&lt;/span>历年初的一天深夜，我正准备睡觉，窗外突然一声巨响，接着是玻璃碎裂的声音。那真是一声巨响，我带着耳机都能清晰感受到声音的振动。我以为是什么拉货的车出车祸了，车上的货物洒在了地上。我隔着窗向外望去，漆黑的夜晚，路灯照射下的街道空无一人，路边的草丛也是黝黑一片。接着有人打开了窗，探出头来，在问上下左右的邻居，有谁知道发生了什么。&lt;/p>
&lt;p>原本熄灯的楼层都打开了灯，楼下街道上的人越来越多，宁静的夜晚重新变得喧嚣。「哪家着火了？」「他们家着火了，他女儿住哪个单元，赶紧叫下来！」「赶紧打 119 啊！」……我看到旁边一栋楼的一楼阳台冒出了异常耀眼的火光。随后，社区医院的人抬来了担架，消防员也来了，社区的领导也从家里赶来。那家住着两个老人，老奶奶受伤，老爷爷走了。后来问起发生爆炸的原因，竟是因为老爷爷买了个燃气灶，因为疫情外面的安装人员不能进来，老爷爷便自己动手安装，没想到天然气泄漏，晚上准备开灯的时候，出事了。&lt;/p>
&lt;p>二〇二一年元旦前，玉泉北门，路面坍塌。杭州正在修地铁，因此大大小小的街道都在施工。玉泉的东面和北面两条路的下方都在修地铁，在我考研结束返校，站在校外十字路口等红绿灯的时候，一台往地下钻孔的机器在十字路口中央运作。机器向下砸地所带来的震动，给人一种马路就要塌陷的感觉。校门口的这条道路应该比较老了，旁边还有河流，地下的情况应该比较复杂，修地铁带来如此大的震动，地面塌陷也不能算是偶然。后来听别人说，失踪了两个人。他们是学生，不过不是浙大的，大概是来这里吃顿饭。没有人能想到，走在马路上，走着走着人就没了。现在找到了一个人，但已无生命迹象，另一个人的尸体，到现在都没有找到。目前，学校的北门还在封锁着。&lt;/p>
&lt;p>疫情期间，那位李医生，还有许多染上肺炎的患者，都默默离开了人世。最近又看到新闻，以前在某部剧里面演某个角色的女生，元旦酗酒过度走了；还有某个大厂和我同龄的员工，在「福报」中也走了。以前在期末考试的时候，晚上偶尔会有救护车开进校园，把在深夜复习昏迷的学生拉走。生与死，是每个人都要面对的现实。&lt;/p>
&lt;hr>
&lt;p>最近上映了皮克斯的动画电影《心灵奇旅》（Soul）。主人公的梦想是当一名爵士乐的钢琴家，当他马上要实现人生梦想的时候，却出现意外即将死亡，他不甘就这样离去，来到灵魂诞生的地方，成为了一个在这里待了几千年都不愿来到世间的二十二号灵魂的导师。二十二号觉得，人世间的一切都很无趣，生活的压力会让一个人喘不过气，与其痛苦地活着，不如永远留在这样的天堂。在一位船长的帮助下，主人公和二十二号来到世间，二十二号借助主人公的身份，体验了世间的生活百态，她感受到了生活的意义。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/soul-0.jpg" alt="soul-0.jpg">&lt;span class="caption">※ 通往灵魂湮灭之路&lt;/span>&lt;/p>
&lt;p>灵魂们得到前往世间通行证的最后一关是获得火花徽章，这个徽章必须由导师带领才能得到。灵魂的导师们原本都是这世间杰出的人，只有主人公是一个普普通通，为了生存而拼搏的小人物。主人公以为火花的含义是找到灵魂擅长的技能，找到灵魂的梦想。最后他才明白，火花的含义，不是对某个事物的追求，而是对生活本身的向往。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/soul-1.jpg" alt="soul-1.jpg">&lt;span class="caption">※ 主人公与二十二号&lt;/span>&lt;/p>
&lt;p>在电影中，有一些细节值得思考。在灵魂诞生之地的角落，有一片一望无际的荒漠，荒漠里有着一些低头呻吟的恐怖灵魂。他们是在世间活着的人的灵魂，他们不停地喃喃着自己的目标，想要在荒漠中找到自己生活的希望，可最后却将自己锁在了生活的囚笼中，迷失了方向。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/soul-2.jpg" alt="soul-2.jpg">&lt;span class="caption">※ 荒漠中迷失方向的灵魂&lt;/span>&lt;/p>
&lt;p>引导主人公和二十二号来到世间的是一个漫游在荒漠之地的船长，他在世间的真实身份是一个在街头杂耍的小丑。他虽然是个十分普通的人，却拥有着无比广阔的思想的海洋。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/soul-3.jpg" alt="soul-3.jpg">&lt;span class="caption">※ 杂耍小丑&lt;/span>&lt;/p>
&lt;p>电影的中文译名叫作「心灵奇旅」，而在二〇二一的年初，独自一人绕过修着地铁的几条街去电影院观看这部《心灵奇旅》本身，就是一场心灵奇旅。我不是什么牛人，我像电影的主人公一样，只是一个普通人。走在街头，不会有人会关注到我。我所做的一切，只有我自己才知道付出了多少。即将步入社会的我，面对的是理想与现实的割裂。我究竟要做什么工作，我究竟做什么才算成功，我充满迷茫。&lt;/p>
&lt;p>那么在世间走过的这一程，究竟是为了什么。我很少会思考生与死的问题。尽管身边也会发生这样的事。可能是因为关于死亡的回忆总是痛苦的，许多人都在世间留下了遗憾，还没有做完自己想做的事就走了。现在看来，活着就是一件幸福的事。每一个人都是宇宙间最为幸运的生命。尽管所有的生命最后都会归为尘土，但在这些生命活在世上的时候，每一个都会绽放光彩。人的一生不能只追逐心中的梦想，想着实现梦想后能得到什么东西，为追求生活本身的拼搏，也彰显了人生的真正含义。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/soul/" target="_blank" rel="noopener">https://guanqr.com/life/films/soul/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/death/">死亡</category><category domain="https://guanqr.com/tags/humankind/">人类</category><category domain="https://guanqr.com/tags/ideal/">理想</category></item><item><title>
二〇二〇·成长</title><link>https://guanqr.com/life/ideas/summary-of-2020/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/summary-of-2020/</guid><pubDate>Sun, 03 Jan 2021 23:56:11 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/2021-new-year.jpg" alt="2021-new-year.jpg">&lt;/p>
&lt;h2 id="冬夜怅惘">&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/#冬夜怅惘" class="anchor-link" aria-label="冬夜怅惘">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>冬夜怅惘&lt;/h2>
&lt;p>那一夜，深冬，雨后，寒风，在玉泉河畔，前面是来来往往的车流。泛黄的路灯、刹车的红灯、对面楼上安全出口的绿灯交融在一起成像在眼瞳。河畔有一排座椅，平日总有几位老师坐在这里休息。但那一夜太冷了，街道上的行人都不见了踪影。我走出校门，顺着走向植物园的道路前行。道路旁，竹林后像是无尽的深渊，那是哪里？这一年，我经历了无数个这样的夜晚，无数次泪水落下。&lt;/p>
&lt;p>回顾二〇二〇，我总觉得这一年的时间过得太快了。仿佛昨天还是结束光电子考试的一天，默默祈祷着老师别让我挂科，和博士生学姐讨论着课题下一步的方向，提着行李箱在拥挤的火车站寻找检票口。而后到家，面对那所谓的不明原因肺炎不以为然，打开计算机，追着已经下载到硬盘里的美剧，吃吃喝喝，过年。我没有想到，二〇二〇的上半年都是在家度过的；我没有想到，学院取消了我期待已久的暑期实习，让所有学生参加竞赛；我没有想到，考研已经悄无声息地到来。这一切都让我措手不及，我什么都没有准备好，我什么都没有做好……&lt;/p>
&lt;h2 id="坎坷时光">&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/#坎坷时光" class="anchor-link" aria-label="坎坷时光">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>坎坷时光&lt;/h2>
&lt;h3 id="考研">&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/#考研" class="anchor-link" aria-label="考研">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>考研&lt;/h3>
&lt;p>关于考研，我虽然早在三四月就买了复习资料，每天背一点英语单词，看看政治网课，但直到十月初，我才把政治的网课看完。然后开始做肖秀荣的政治题，看李永乐的数学复习全书。英语和光学这两门科目直到十一月中旬才开始复习。英语每隔几天做一套往年卷，专业课是看教材后面的练习题。十二月的时候，我才开始做数学的模拟卷。可以看到，我复习的时间很短很短，比起大多数复习了将近半年或者一年的人来说，我根本就没有做好准备去迎接即将到来的考试。&lt;/p>
&lt;p>那段日子里，我知道留给我复习的时间不多了，能不能复习完还是个问题。但既然已经走了这条路，根本没有退路。于是我每天将自己置于复习的忙碌之中，试图得到一种麻木的充实感，试图在做对现实最后的挣扎。那段日子里，我每天深夜都会走出校门，穿过植物园，走到苏堤，望着西湖对岸的高楼大厦。这是一天中最为宁静的时候，远离了校园喧嚣的环境，远离了复习时候的焦虑与懊悔。一片湖，一轮明月，一阵寒风，一个人。我终于有时间感受痛苦中的一丝甘甜。&lt;/p>
&lt;p>我第一次对自己的未来感到焦虑，我不知道如果我没有考上目标的研究所，我还能做些什么。错过了秋招，春招又能找到哪些适合自己的工作呢？大学这四年，我只学会了光学，如果不去研究所，我所学的知识，似乎在哪也用不上。去当物理教师，或者考公务员？我迷惘了。原来生活真的很艰辛啊……我当然后悔。我应该早点复习的。但既然事实已经如此，我还能怎么做呢，做好接下来要做的一切吧。就像家人经常对我说的，做一件事，成功与否并不重要，重要的是自己能够尽力把这件事做完。坚持走下去，走到最后再看，这也是一段人生难以忘却的经历。&lt;/p>
&lt;h3 id="社交">&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/#社交" class="anchor-link" aria-label="社交">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>社交&lt;/h3>
&lt;p>大三学年结束后，我在学生会的工作也就结束了。对毕业生的采访是我为学生会做的最后一件事。在我离开学生会后，我发现，主席团成员换了，各部门的部长换了，一切成员的面孔都是那么陌生。他们没有人认识我，我也不认识他们。那个我在过去两年里唯一能找到归属感的学生会，已经不存在了。新年晚会的时候，我坐在台下，看着舞台后的工作人员辛苦的工作，想到了两年前，我也是舞台后为晚会做贡献的一份子。可现在，我只是个普普通通的观众罢了。&lt;/p>
&lt;p>我已经习惯了独自一人的生活，很难走出自己独有的圈子了。但今年似乎又有一些不同。这一年中，有几个学弟学妹在 QQ 上加我为好友。我不知道他们是从哪里知道我这个人的。可能是我在 19 级年级群里经常帮学弟学妹解决问题；或者是我在校论坛里水帖子水的太多了；亦或是上网的时候无意间看到了我的博客，总之，这是我在担任学长组后，第二次认识新的同学。&lt;/p>
&lt;p>通过博客，我还认识了一些陌生的朋友，他们都是通过邮箱和我联系的。有些是想要咨询关于博客前端设计问题的人，有些是看了我写的文章有所感触想要和我交流的人。我在浏览别人网站的时候，似乎从来没有主动对某一话题联系过对方进行交流，我觉得我应该变得积极主动一点。因为写博客的目的，就是为了向别人讲述自己的故事，传达自己的观点。如果缺少了交流，就缺少了读者向自己反馈的环节，这对于自己博客内容的发展没有任何好处。当然，这样看来在文章下方加入评论区是很好的想法，但到现在我都没有找到一个完美适配主题的解决方案。&lt;/p>
&lt;h2 id="未来之路">&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/#未来之路" class="anchor-link" aria-label="未来之路">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>未来之路&lt;/h2>
&lt;p>十二月三十一日，我去了湖对岸，这是杭州最繁华的地段。湖滨银泰前的广场，人头攒动。十字路口处，交警、特警、志愿者们，手拉手维护者交通安全。商场楼上巨大的显示屏播放着各式各样的广告，抬头，看到高楼大厦的上空，一轮明月，挥洒着二〇二〇年最后的光芒。二十二岁，走过了人生的四分之一。我很庆幸自己在这样一个时间节点上重新认识自己，重新面对人生。&lt;/p>
&lt;p>以前我总把生活想的太轻松了，以为什么事情只要做了就能顺顺利利地完成。实际上有很多事，就算做了，最后也不会有什么结果。那我们还要做这些事干什么。这些事还是要做的，因为生活就是一个不断向前探索的过程，只有通过不断尝试，才能找到那条真正属于自己向前发展的方向。希望在二〇二一年，我能顺利毕业，找到一份工作，继续在追梦的道路上不断前行。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/summary-of-2020/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/summary-of-2020/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/ideal/">理想</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
拟鳄龟与草龟</title><link>https://guanqr.com/life/hobbies/snapping-turtle-and-grass-tortoise/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/snapping-turtle-and-grass-tortoise/</guid><pubDate>Tue, 15 Dec 2020 17:12:45 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">某&lt;/span>次在淘宝上看它推荐给我的宝贝，看到了一个叫深海元灵的店。因为这家店的店名起的很有意思，深海元灵到底是什么呢，这激起了我心中的好奇心。进去一看，哦，这家店在卖一种长长的尾巴，黑不溜秋，不及巴掌大小的玩意，拿在手中一动不动，看起来像是什么动物模型。因为我经常在淘宝上看模型，所以推荐给我模型应该是常事。不过在我看到买家秀后，才知道这原来是活的动物，这种动物叫鳄龟。&lt;/p>
&lt;p>这竟然是龟？在我的印象里，龟的外表是圆润的，我从来没有见过这样的龟。它的表面却十分粗糙，头部有明显的暴刺，背甲的每一片盾上都有凸起，尾部也有像恐龙一样凸起的棘。这是一种远古的生物，就像是侏罗纪时代余音。&lt;/p>
&lt;p>很早就想在宿舍里养些宠物，可是猫狗之类的是严禁带入宿舍的。我之前买了一只捕鸟蛛，放在桌上的角落，看着它安安静静地成长，宿管来查房的时候也不会发现异样。可蜘蛛还是缺少了一些趣味，它平时只是缩在自己挖的土坑里，只有在饿的时候前来捕食。龟却不一样。买一只刚出壳的小龟，看着它的背甲越来越大，身体越来越壮实。龟的寿命相对其他小动物要长很多，在喂食的时候龟能够和人进行互动，不会发出叫声。有部分人会对蜘蛛感到恐惧，但很少会有人对憨憨的龟反感。更重要的一点是，坐火车的时候，龟能直接放在口袋里带回家。这确实是宿舍养宠物的不二选择。&lt;/p>
&lt;p>思考了许久，在淘宝上随便找了一家店买了只拟鳄龟（鳄龟的一种）。其实我这样做有点欠妥。第一，冬季买龟，特别是十二月份天寒地冻的时候，龟容易在路途中冻死；第二，淘宝上的龟的品相参差不齐，有很多病龟或者断尾的。不过我是一个新手，品相什么的都无所谓，能把龟养活，养得健康，才是最重要的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/snapping-turtle-and-grass-tortoise-0.jpg" alt="snapping-turtle-and-grass-tortoise-0.jpg">&lt;span class="caption">※ 拟鳄龟&lt;/span>&lt;/p>
&lt;p>第一年的冬天，还是不要让龟冬眠了。我又买了一个黑色的饲养盒，放入了一个加热棒，控制水温温度在 28 度左右。让龟保持活力。刚到家的几天，鳄龟需要适应新的环境，因此没有开食。我喂它龟粮，它根本看都不看一眼。后来我直接买了五六十条小鱼苗，每次放五六只在饲养盒里让他自己捕捉，它渐渐活跃了起来。现在我用镊子给它夹鱼或是龟粮，它都能够直勾勾地盯着食物游来捕食。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/snapping-turtle-and-grass-tortoise-1.jpg" alt="snapping-turtle-and-grass-tortoise-1.jpg">&lt;span class="caption">※ 拟鳄龟的头部&lt;/span>&lt;/p>
&lt;p>我觉得养鳄龟有两个比较明显的问题。首先就是鳄龟平时在水里一动不动，懒，只有在要捕食的时候才会活跃起来，这样不能够完全体会养龟的乐趣。第二就是龟越长越大，危险系数也越长越高，鳄龟的咬合力很大，不要直接用手喂食。为了解决第一个问题，我又在淘宝上买了个小草龟。两块钱的断尾龟，开箱的时候就十分活跃。平时喂食的时候它能够跟着我的手指来回游动。我原本以为草龟的咬合力微不足道，但我还是毅然决定尝试一下，将手放在了它的嘴边，它直接扑了上来，疼，很疼。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/snapping-turtle-and-grass-tortoise-2.jpg" alt="snapping-turtle-and-grass-tortoise-2.jpg">&lt;span class="caption">※ 草龟&lt;/span>&lt;/p>
&lt;p>宿舍里有两只龟和一只蜘蛛陪着我，给我的生活带来了不少乐趣。希望它们能够健健康康活着，陪我走完学习生涯。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/snapping-turtle-and-grass-tortoise/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/snapping-turtle-and-grass-tortoise/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/crawling-pet/">爬宠</category></item><item><title>
我的卡牌收藏之路</title><link>https://guanqr.com/life/hobbies/card-collections/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/card-collections/</guid><pubDate>Wed, 25 Nov 2020 09:43:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>喜欢收藏艺术品。不论是精致的兵人模型，银行发售的雕刻精美的纪念币，还是一张张小卡片上印刷的图案，在我的眼里，都是极具收藏价值的艺术品。尤其是卡牌，有限的纸张承载着绘画者对美的传递以及赋予人物的精神。&lt;/p>
&lt;p>究竟是什么时候入坑卡牌收藏的？我有时候会这样问自己。可能是小学的时候——大家会用自己仅有的五角零花钱买来一袋魔法师干脆面，里面会随机赠送一张三国人物卡，我集齐了所有的人物。后来诞生了三国杀，卡面的人物设计生动形象，而第三方厂家发售的盗版卡也各具特色。我曾经在淘宝上搜以前收集过的卡，网站推荐了仿制的小浣熊水浒卡，点击购买，我便踏进了一个小众的卡圈。&lt;/p>
&lt;p>在这一个圈子里，以前最流行的是仿卡。特别是小浣熊的水浒卡，各种厂商对素材进行高清重制和色彩修正，试图尽最大的努力还原原版卡片的材质与色泽。在制卡工艺成熟的今天，又出现了粗闪卡，彩闪卡等等各种工艺的仿卡，甚至出现了换背景的仿卡。从去年开始，越来越多人不再拘泥于仿卡的圈子，开始了创新之路——制作原创卡。他们联系国内的一些画师对名著或历史人物进行再创作，制作出属于自己独一无二的卡，而这些卡牌的大小也不再是小浣熊式的小卡片，而是日本卡牌的大小或者是国际球星卡的大小。&lt;/p>
&lt;p>在原创卡中，由于画师的风格不同，各家卡牌店的卡都独具一格。不过经常有人会指出某某家的卡涉嫌抄袭，一些卡中人物的动作是抄袭别的卡的，一些人的头是直接拿网图进行换头术……画师的创造能力毕竟有限，人的动作也是有限的，所以那些所谓的抄袭，我认为也正是这些卡牌店的特色所在。&lt;/p>
&lt;p>我入坑的时间算比较晚的了，是在今年 10 月份入的坑，当时看到阿毛家的寻梦江湖水浒卡很有特色，便买来欣赏，从此在原创卡收藏的道路上一去不复返。你可以在 &lt;a href="https://www.instagram.com/guanqr/" target="_blank" rel="noopener">Instagram&lt;/a> 上浏览我分享的一些卡片收藏。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/card-collections/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/card-collections/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/collection/">收藏</category></item><item><title>
不要丢掉自己心中的指南针</title><link>https://guanqr.com/life/ideas/do-not-lose-your-compass/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/do-not-lose-your-compass/</guid><pubDate>Tue, 17 Nov 2020 10:10:55 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">新&lt;/span>闻是人们获取外界信息最为直接的渠道。但新闻媒体作为信息的传播中介，会将自己所接收到的信息进行加工，再传播给别人。那么在加工信息的过程中，媒体很可能会注入自己对所获取到的信息的主观看法。作为群众，我们接收到的新闻就会是这些加工过的消息。这些带有个人主观态度的新闻，会在一定程度上影响我们对这些事件的判断。当然，作为主流的央视，肯定会斟酌最为客观的角度进行新闻播报。但那些蓬勃发展的自媒体，却很难保证客观。&lt;/p>
&lt;p>举个今年发生的例子。在疫情爆发期间，部分网友发表过诸如在医院里无处安置的尸体，哪些药能够预防感染等等的言论，一些人相信了这些言论，造成了小范围的质疑与恐慌。此外，还有人说，方舱医院的条件很差，护士对患者照顾不周。作为没有亲身经历事件的人，我们对这些事件的真伪很难做出判断。但有些人作为吃瓜群众，喜欢接收那些对正常生活造成冲击的新闻，他们转发这些消息，然后因为他们想看一看当事人是如何解决这些棘手的问题。他们对于新闻的正确性并不关心，他们只是喜欢热闹，或者说喜欢混乱。&lt;/p>
&lt;h2 id="关于浙大的某件事">&lt;a href="https://guanqr.com/life/ideas/do-not-lose-your-compass/#关于浙大的某件事" class="anchor-link" aria-label="关于浙大的某件事">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>关于浙大的某件事&lt;/h2>
&lt;p>我原本以为，大部分人会在接受媒体传播的信息后有自己独立的思考，但事实上我错了。导致我产生这种观点的原因是今年夏季学校发生的那件屡次上热搜的包庇强奸犯的新闻。这件事的原貌是，我们学生暑期被禁止出校，但游客和教师家属却能随意进出学校，从而对学校领导产生怨言。有学生因无聊，无意间访问学工部网站，看到学校对犯罪的学生的处分太轻，就将这条处分发到了外网，试图借助外界力量让校方引起重视，让校领导正面面对学生的质疑。然而事情并没有按照我们设想的那样发展。&lt;/p>
&lt;p>有人说，别的学校考试作弊都能开除，浙大强奸只是留校察看。事实上浙大考试作弊也是开除。作弊并没有涉及到犯罪，但强奸涉及到了犯罪。这是两种不同的判定处分的规则，其实并不能相提并论。只能说学习在学生犯罪的处分规定有些轻。还有些人把重点放在了「少数民族」上，对这件事进行炒作。他们给观众说，「我们不能被浙大的公关骗了，他们试图想要将问题放在少数民族上，实际上问题出在强奸的处分上。」但事实上，浙大并没有什么公关，将问题引到「少数民族」上的，也正是这些自媒体。于是，那段时间，各大媒体网站，只要是个自媒体，就会蹭这件事的热度。他们并没有了解这件事情的原貌就对此说天道地，让人们觉得确实是这个道理，实际上却是狗屁不通。&lt;/p>
&lt;p>观众们作为吃瓜群众，自然不会废力去甄别信息的正误，他们看到自己关注的自媒体议论了这件事，他们就会选择相信那些自媒体，他们认为浙大包庇了强奸犯。令我印象最深的就是 b 站的各种视频。由于 b 站的受众大部分是年轻人，年轻人对事物的认知并不全面，他们更容易相信别人说的话，更容易被煽动情绪。在 b 站，每一条有关浙大的视频下面，许许多多的人都在刷「恶心」、「就浙」。他们在一些学生展示浙大录取通知书的下面写「小心强奸犯」、「女生不要去浙大」、「退学重考吧」、「让我去浙大我都不去」诸如此类令人反感的评论。他们甚至说，「浙大的学生们都躲在学校里不敢出声，他们都是护校蛆」。可他们并不知道我们才是爆出事件的第一人。&lt;/p>
&lt;p>这件事让我深刻认识到，原来自媒体的话不能完全相信。自媒体毕竟是要赚钱的，他们要赚足流量才能获得更多的钱。大部分人面对新闻是不会独立思考，深究正误的。有些人会冷静地看待媒体报道的各类事件，他们试图作出客观冷静的评论，但这评论早已被淹没在众人飞溅的唾沫中。&lt;/p>
&lt;h2 id="关于某位导演的某件事">&lt;a href="https://guanqr.com/life/ideas/do-not-lose-your-compass/#关于某位导演的某件事" class="anchor-link" aria-label="关于某位导演的某件事">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>关于某位导演的某件事&lt;/h2>
&lt;p>管虎是国内为数不多的在作品中有较为鲜明特色的导演，他的作品充满痞气。他非常擅长拍摄战争和历史题材的作品，这也是为什么他指导了《我和我的祖国·前夜》《八佰》《金刚川》等电影的原因。然而，就在今年，管虎导演本身引起了热议。&lt;/p>
&lt;p>在去年《八佰》定档后，管虎找到孙元良的后人秦汉做宣发，让人们对他产生了质疑。《金刚川》上映前，管虎带着美军单词的帽子，背手鞠躬的小动作，更引起人们的愤怒。各种自媒体抓着此类问题不放，特别是以观察者网为首的自媒体，更是像一条疯狗一样咬着管虎，写各种长篇评论，发视频，作为自媒体能做的事情都做了，就是为了喷管虎，指责管虎屁股不正。我不知道他们的用意何在，但管虎这个名字，能为他们赚取很多流量。&lt;/p>
&lt;p>导演个人究竟是如何想的，我自然不会知道。但《八佰》上映后，票房稳居第一，这证明了电影的质量过硬，受到观众的喜爱。《八佰》的电影镜头是极具美感的，情节也是十分紧凑的。但各路媒体为了煽风点火，指责这部电影是「历史虚无主义」。说电影不符合历史。可电影，就算是历史题材的电影，为了更好的传达情感，也会对情节做适当的美化。电影说是源自什么事件，也不可能做到真正还原事件。&lt;/p>
&lt;p>观众们看过这些自媒体对导演和电影的批评后，到有关导演的各种视频下面表达自己的愤怒和唾弃。如果你看过此类评论，很容易发现，许多人的评论是复制粘贴的。特别是有人说这段历史怎么怎么样，电影拍摄怎么怎么样，似乎每个人都是历史学家，每个人都是导演。这些人真的了解这段历史吗，他们不也是听的这些自媒体讲述的历史吗？他们懂如何导演电影吗，他们不也是听的这些自媒体讲如何拍摄电影吗？对导演和电影产生质疑是很正常的，毕竟导演的行为确实很迷惑。但我十分反感这些没有经过大脑思考，就复制粘贴别人的言论，认为别人的想法就是正确的人。他们坚定自己所想所做就是正确的，任何与他想法不同的人就是洗地。他们总是说，「你要是觉得不对，去看看马督工的视频再说吧。」马是神吗，他说的都是真理吗？&lt;/p>
&lt;p>有些人对《八佰》中升起了青天白日旗反感，说，「你会为那面青天白日旗挥洒自己的热血吗？」我想说，那是中华民国，我们作为华夏儿女，难道不会为国家的存亡挥洒热血吗？有些人根本没看过电影，说，「我不看电影就不能评价吗，我非要看了电影才能评价吗？」我想说，姜文在《邪不压正》里正好有这句台词，去看看吧。有些人复制粘贴一大段话，说，「《金刚川》中管虎拍的第一段最差，只有第三段情节比较好。」我想说，管虎拍的是第三段。可以看出，很多人只是为了指责导演和电影而指责，他们根本不会思考媒体说的是不是对的，他们并不在乎。他们觉得，反正只要喷管虎，就是对的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-0.jpg" alt="do-not-lose-your-compass-0.jpg">&lt;span class="caption">※ 对电影《八佰》的评论（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-1.jpg" alt="do-not-lose-your-compass-1.jpg">&lt;span class="caption">※ 对电影《八佰》的评论（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-2.jpg" alt="do-not-lose-your-compass-2.jpg">&lt;span class="caption">※ 对电影《金刚川》的评论&lt;/span>&lt;/p>
&lt;h2 id="关于爱国情绪与西方国家">&lt;a href="https://guanqr.com/life/ideas/do-not-lose-your-compass/#关于爱国情绪与西方国家" class="anchor-link" aria-label="关于爱国情绪与西方国家">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>关于爱国情绪与西方国家&lt;/h2>
&lt;p>很多媒体最爱打的就是爱国牌。比如观察者网，每天播报西方各国的负面新闻，鼓吹国内的蓬勃发展。由此滋生了许许多多所谓的「小粉红」。「小粉红」们到哪里都觉得自己一身正气，要人民至上，要打败资本主义，你崇拜资本，就要打倒你。典型的例子有很多，我就不一一列举了，就拿昨天的一个新闻来说吧。观察者网转发了 SpaceX 公司载人火箭成功发射的视频，有些人惊叹 SpaceX 技术很厉害，就被一些人戴上了「公知」的帽子。他们知道「公知」是什么意思吗？难道一点称赞美国的言论都不能说吗？他们说马斯克是大资本家，是为了赚钱；美国为了发射火箭连自己的人民都不管了；上面的日本航天员是日本女人；为什么还有人羡慕美国的技术，我国的技术已经很强了……我看到这些言论后竟说不出什么话来。&lt;/p>
&lt;p>惊叹美国的科技发展有错吗？美国的科技发展难道不是全球领先吗？我国的航天事业确实进步很大，但还是与美国有很大的差距。去年同样播报 SpaceX 公司火箭发射的视频，弹幕里大部分人都在惊叹科技的创新。如今却只有对那些称赞美国的用户的谩骂与嘲讽。爱国教育是思想教育中的重点，媒体播报西方国家负面新闻也很正常，毕竟媒体是政治宣传的一大途径。但如果媒体只是一味地贬低西方国家，观众们无法从全面的角度了解世界格局，就会把观众「忽悠瘸了」，让人们对自己国家的发展有盲目的自信。有人在这个视频的下面做的评论我很赞同，他嘲笑观察者网，说「你看看这评论被你洗脑洗的只会冷眼嘲讽，特朗普的烂梗翻来覆去的嚼，民族自信可不是只会嘲讽别人，夜郎自大」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-3.jpg" alt="do-not-lose-your-compass-3.jpg">&lt;span class="caption">※ 对 SpaceX 载人火箭发射的评论（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-4.jpg" alt="do-not-lose-your-compass-4.jpg">&lt;span class="caption">※ 对 SpaceX 载人火箭发射的评论（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-5.jpg" alt="do-not-lose-your-compass-5.jpg">&lt;span class="caption">※ 对 SpaceX 载人火箭发射的评论（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/do-not-lose-your-compass-6.jpg" alt="do-not-lose-your-compass-6.jpg">&lt;span class="caption">※ 对 SpaceX 载人火箭发射的评论（四）&lt;/span>&lt;/p>
&lt;p>由于我个人的表达能力有限，有很多想说的话都不知道该怎么表达。简单的来说，就是觉得人们应该有独立思考的能力，要保护好自己内心的指南针，明确自己的方向，不要被别人传达的信息误导。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/do-not-lose-your-compass/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/do-not-lose-your-compass/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/introspection/">反省</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
金直间成长记</title><link>https://guanqr.com/life/hobbies/the-growth-of-grammostola-pulchripes/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/the-growth-of-grammostola-pulchripes/</guid><pubDate>Thu, 12 Nov 2020 13:01:00 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;div class="notice notice-warning" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/>&lt;/svg>&lt;/div>&lt;p>&lt;strong>注意&lt;/strong>：本篇文章涉及到蜘蛛、蟑螂等生物的相关文字和图像，对此类生物敏感的读者请勿继续阅读。&lt;/p>&lt;/div>
&lt;p>&lt;span class="drop-cap">某&lt;/span>日突发奇想，想要观察捕鸟蛛的生活状态，于是就去贴吧和淘宝逛了一圈，入手了一只金直间（巴西巨人金直间，Grammostola pulchripes）。为什么选择金直间呢，因为这种捕鸟蛛相对其他捕鸟蛛而言，比较温顺，准确的来说就是怂，不会主动攻击人，自然不会将毒牙插进你的皮肤。&lt;/p>
&lt;p>我收到金直间的时候是十月七日，此时它只是一只蜕了三次皮（3L）的小蜘蛛，长度有 1cm 多。由于是幼蛛，金直间的身上还没有什么颜色，只有白里透黄的肢体和黑色的肚子。&lt;/p>
&lt;p>不论是养什么动物，都需要考虑两个问题，生活环境和食物。环境的准备很简单。饲养蜘蛛需要准备一个透气的盒子，一袋湿润的椰土。杭州的湿度很高，比较适合蜘蛛的生长环境，因此不用给椰土加太多的水，如果环境过于潮湿会生螨。十月份已经是入秋的季节，气温下降的很快，所以我为它准备了一个加热垫。&lt;/p>
&lt;p>至于食物，蜘蛛需要吃能够补充蛋白的虫子，常见的食物是面包虫和蟑螂。卖家送了很多条面包虫，我又买了许多 0.5cm 都不到的樱桃蟑螂。&lt;/p>
&lt;p>幼蛛的体积小，面包虫的体积很大，因此喂食面包虫的时候需要将虫子剪成两半。当然，就算是一半的面包虫对幼蛛来讲也很大，每次只能吃一小部分。吃剩下的面包虫为了防止生螨只能扔掉。樱桃蟑螂的体积很小，每次金直间都能将樱桃蟑螂吃完。喂食金直间的次数大概是一周两次即可，喂食后十二小时不论它吃没吃，都要把剩下的食物取出。&lt;/p>
&lt;p>卖家还送了一个小树皮，用来作为蜘蛛躲藏的地方，我用了一段时间觉得没有必要，蜘蛛会自己搬土挖洞，便取出来了。&lt;/p>
&lt;p>其实还有一个比较麻烦的问题，就是食物的饲养。蜘蛛需要吃活物，面包虫和樱桃蟑螂也需要和蜘蛛一起饲养。樱桃蟑螂的生长速度比较慢，还算省心，可能是我喂的面包屑比较少。但是面包虫的生长周期太短了，每隔几天就有蜕皮的虫子，几周的时间，就有几只面包虫化为了蛹，面包虫成为蛹之后就不再是蜘蛛的食物。再加上蜘蛛不太喜欢吃面包虫，所以我基本上不太关注这些面包虫的生死了。&lt;/p>
&lt;p>下面是对金直间的成长记录，使用手机加微距镜头拍摄，图像边缘会有少许色差。&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2020.10.07&lt;/strong>&lt;/p>
&lt;p>今日刚收到小金直间，长度有 1cm 多，经过长途跋涉后依然很活泼。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-0.jpg" alt="grammostola-pulchripes-0.jpg">&lt;span class="caption">※ 刚收到的 3L 金直间&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-1.jpg" alt="grammostola-pulchripes-1.jpg">&lt;span class="caption">※ 化蛹的面包虫&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2020.10.26&lt;/strong>&lt;/p>
&lt;p>前几天金直间就开始搬土将自己的小窝封住口，今天早上检查的时候发现金直间从洞口探出了白白嫩嫩的肢体，看来它已经蜕皮了。蜘蛛蜕皮前几天会停止进食，而且脚部发黑，在蜕皮的时候尽量不要打扰它。目前的金直间足展已经达到了 2cm。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-2.jpg" alt="grammostola-pulchripes-2.jpg">&lt;span class="caption">※ 刚蜕皮的 4L 金直间&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-3.jpg" alt="grammostola-pulchripes-3.jpg">&lt;span class="caption">※ 在饲养盒里乱爬的小蟑螂&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2020.11.12&lt;/strong>&lt;/p>
&lt;p>昨天看到金直间开始吐丝，结了厚厚一层网，它的脚部发黑，猜想可能又要蜕皮了。今天早上一看，果然蜕皮了。蜕下的皮还很完整。蜕完皮的金直间足展已经将近 3cm，身体已经有发黑的迹象。白里透着黑。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-4.jpg" alt="grammostola-pulchripes-4.jpg">&lt;span class="caption">※ 刚蜕皮的 5L 金直间（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-5.jpg" alt="grammostola-pulchripes-5.jpg">&lt;span class="caption">※ 刚蜕皮的 5L 金直间（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-6.jpg" alt="grammostola-pulchripes-6.jpg">&lt;span class="caption">※ 5L 金直间蜕掉的皮&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2020.12.06&lt;/strong>&lt;/p>
&lt;p>按照前几次蜕皮时间的规律，我已经推算出在 12 月初会有一次蜕皮。其实在 11 月末的时候，我就已经发现金直间不怎么进食了，半条面包虫放在饲养盒了，连碰都不碰。这次蜕皮前的几天并没有结网的行动，今天上午饲养盒里还是光秃秃的，下午三点多就看到一层白色的网、一个蜕掉的皮，还有一只白白嫩嫩的金直间，目前它的足展大约有 4cm。过了几个小时，金直间的身子开始发色，可以看到腿部明显的黑色和关节处的金色。另外，前段时间我发现购买的樱桃蟑螂都死得差不多了，看来蟑螂比面包虫要难养很多，所以我又买了一百多条面包虫，还是面包虫安分。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-7.jpg" alt="grammostola-pulchripes-7.jpg">&lt;span class="caption">※ 刚蜕皮的 6L 金直间&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-8.jpg" alt="grammostola-pulchripes-8.jpg">&lt;span class="caption">※ 身体逐渐变成黑色&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-9.jpg" alt="grammostola-pulchripes-9.jpg">&lt;span class="caption">※ 6L 金直间蜕掉的皮&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2021.01.06&lt;/strong>&lt;/p>
&lt;p>这次蜕皮时间距上次蜕皮时间间隔正好是一个月。估计是因为体型有些大了，随着时间的推移，蜕皮的周期会越来越长。在去年 12 月 10 多日的时候，我就看到它已经吃得饱饱的，肚子要比背甲大很多，而且屁股发亮。谁知道憋了两三周才开始偷偷蜕皮。这次蜕皮是在晚上，我早上起床的时候就发现它已经蜕好了皮。上次蜕皮后，肢体的颜色还是白色，在外皮硬化后才逐渐变成浅黑色，这次蜕皮后直接就是黑色的外表了，连肚子都比以前要黑很多。并且可以看到，金直间的腿部关节已经出现了标志性的金色。目前金直间足展为 5cm。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-10.jpg" alt="grammostola-pulchripes-10.jpg">&lt;span class="caption">※ 7L 金直间（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-11.jpg" alt="grammostola-pulchripes-11.jpg">&lt;span class="caption">※ 7L 金直间（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-12.jpg" alt="grammostola-pulchripes-12.jpg">&lt;span class="caption">※ 7L 金直间（三）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-13.jpg" alt="grammostola-pulchripes-13.jpg">&lt;span class="caption">※ 7L 金直间（四）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-14.jpg" alt="grammostola-pulchripes-14.jpg">&lt;span class="caption">※ 7L 金直间蜕掉的皮（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-15.jpg" alt="grammostola-pulchripes-15.jpg">&lt;span class="caption">※ 7L 金直间蜕掉的皮（二）&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2021.02.10&lt;/strong>&lt;/p>
&lt;p>1 月下旬的时候，学校放假，我回家的时候带上了金直间。用一个小盒子装着它，盒子里铺了层沾上水的纸巾。上次脱皮后我觉得小型饲养盒已经不够金直间活动的了，所以我买了个稍微大一点的盒子。又买了些新鲜的椰土。家里正好有暖气，我就把饲养盒直接放在了暖气上，省的用加热垫了。北方环境最大的问题是湿度太低，我将一个瓶盖放在了饲养盒里，瓶盖里倒上了水。&lt;/p>
&lt;p>2 月 11 日下午的时候，金直间蜕了皮。这次蜕皮有些失败。头部四肢都很顺利地蜕皮了，但腹部两侧和背部却依然连在了旧皮上。我只好进行了人工干预，等新皮硬化后，用牙签将卡住的部分皮挑了下来。其实还算幸运，只要没有把腿卡住就行。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-16.jpg" alt="grammostola-pulchripes-16.jpg">&lt;span class="caption">※ 8L 金直间&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-17.jpg" alt="grammostola-pulchripes-17.jpg">&lt;span class="caption">※ 8L 金直间蜕掉的皮&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2021.03.19&lt;/strong>&lt;/p>
&lt;p>寒假结束，我也将金直间带回了学校。在我把金直间装进盒子的时候，我第一次观察到了踢毛的举动，它把自己的屁股给踢秃了。现在是春天，我以为杭州已经回暖，就没有将加热垫带回了。可事实上杭州依然很冷。来学校三周，金直间一直没有吃东西。看时间，距离上次蜕皮已经过去一个月的时间，肯定是要蜕皮了。不过这次「绝食」的时间太长了。3 月 19 日早上吃完饭回到宿舍，我就发现饲养盒里有一个立起来的干皮。总算是蜕皮了，我一直担心这段时间因为气温太低可能导致金直间生病死亡，看来是我多虑了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-18.jpg" alt="grammostola-pulchripes-18.jpg">&lt;span class="caption">※ 9L 金直间（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-19.jpg" alt="grammostola-pulchripes-19.jpg">&lt;span class="caption">※ 9L 金直间（二）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-20.jpg" alt="grammostola-pulchripes-20.jpg">&lt;span class="caption">※ 9L 金直间蜕掉的皮（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-21.jpg" alt="grammostola-pulchripes-21.jpg">&lt;span class="caption">※ 9L 金直间蜕掉的皮（二）&lt;/span>&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong>2021.05.14&lt;/strong>&lt;/p>
&lt;p>返校后的两个月忙于做毕业设计，基本上没怎么照顾金直间。看着去年买的面包虫都化成了蛹，只好又买来几十只。现在的金直间在看到我用镊子送来面包虫的时候，都会去主动攻击我的镊子。身边有面包虫的时候，不再躲避我的目光，等我离开后才开吃，而是直接扑过来死死咬住。它越来越凶猛了。4 月底的时候，我看到它停止了进食，肚子吃的很大很大。在等待了三周后，它开始在土上铺一层厚厚的网，将自己的身子翻过来，抽搐着蜕皮。这是我第一次真正近距离观察到蜘蛛蜕皮的过程。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-22.jpg" alt="grammostola-pulchripes-22.jpg">&lt;span class="caption">※ 10L 金直间和蜕掉的皮（一）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/grammostola-pulchripes-23.jpg" alt="grammostola-pulchripes-23.jpg">&lt;span class="caption">※ 10L 金直间和蜕掉的皮（二）&lt;/span>&lt;/p>
&lt;hr>
&lt;p>2021 年毕业后，我带着我的金直间入住了公司的公寓。&lt;/p>
&lt;p>2023 年春季，我又带着它搬到了外面租的房子里，并给它换了个更大的玻璃房。这期间它蜕皮了好几次。&lt;/p>
&lt;p>2025 年夏季，在我又进行了一次搬家后，金直间开始了最新一次的蜕皮。时间已经过去了这么久，我早已忘记这是它第几次蜕皮了。由于我疏于对它的关照，它在很长一段时间里摄入的蛋白有些少，肚子很小。蜕皮后，已经没有什么精神气了。再喂它虫子也不吃。就这样蜷缩在角落，逐渐与脚下的泥土融为一体。可能我今后再也没有兴致去养一只蜘蛛了，我也无心把它的躯体做成标本，它是我大学时期的「遗产」，承载着我的部分回忆。永别了！&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/the-growth-of-grammostola-pulchripes/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/the-growth-of-grammostola-pulchripes/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/tags/crawling-pet/">爬宠</category></item><item><title>
孤独的征程</title><link>https://guanqr.com/life/ideas/lonely-journey/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/lonely-journey/</guid><pubDate>Sat, 17 Oct 2020 10:45:31 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">夜&lt;/span>色降临，雨后的杭州并没有丝毫凉爽的气息，潮湿闷热的气流徘徊于林间，我新换的衣服已经被汗水浸湿了。
走在植物园的林间小道，望着被枝叶点缀的天空，我的眼睛有些湿润。「最近过的怎么样？」如果有人这样问我，我可能会向他倾诉我积压在内心的数不尽的辛酸。&lt;/p>
&lt;p>想起了自己为学院组织勤勤恳恳工作了两年，却没有留下任何足迹，想起自己做了许多事，却没有任何回报。家人经常给我说，有付出总会有回报的，我一直在等，可那回报什么时候会来呢？别人只需要做那么一点点工作就能得到无限的回报，而我呢？可能有些人注定是要在背后默默地付出吧，他们做着比别人更多的工作，却没有人记得他们。我可能就是这一类人，终究会被身边的人遗忘。&lt;/p>
&lt;p>学院的毕业生就业动员会上，曾教我们光电子的刘旭老师讲，光工是不推荐本科就业的。确实如此，一个偏向科研的专业，还没有在科研上得到什么训练，本科出来又能做什么呢？前段时间保研名单公布，身边很多同学都保研成功，曾经的初中高中同学，虽然本科学校差了点，但也都保上了 C9 高校。而我虽本在 C9 高校，却因竞争激烈选择离开。身边和我一样选择考研的朋友在想，当初如果上一个差一点的学校，成绩排在前几名，现在也能保研了……可如今已经走到这一步，再怎么「如果」都只是幻想罢了。&lt;/p>
&lt;p>小学的时候，我在数学课堂表现比较好，老师奖励了我一本周年纪念版《读者》，里面有一页文章的标题被老师标上了重点的标记。那篇文章在讲，很多人选择和和其他人一样的道路，因为那条道路平坦宽阔，有很多人与你作伴，但那些能够绽放光彩的人，会选择一条曲折坎坷的路，那是一条注定孤独的征程，没有人会跟着你的脚步。老师希望我走这一条道路，我也希望我能走完这一路。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/lonely-journey/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/lonely-journey/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/ideal/">理想</category></item><item><title>
观国产悬疑类网剧</title><link>https://guanqr.com/life/films/chinese-suspense-online-drama/</link><guid isPermaLink="true">https://guanqr.com/life/films/chinese-suspense-online-drama/</guid><pubDate>Tue, 15 Sep 2020 21:04:05 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">平&lt;/span>时无聊的时候，我就会打开各大视频网站看电视剧。受到朋友的影响，我最近几年比较喜欢看悬疑类型的电视剧。因为悬疑类电视剧的故事会比普通的电视剧更为曲折，叙事节奏紧张，能够带动观众沉浸在剧集中，而且每一集都会留有悬念，引发观众的猜疑。&lt;/p>
&lt;p>不得不说，最近几年，国产的悬疑类型剧集制作的水平有所上升。从《无证之罪》，到《白夜追凶》，再到现在的《&lt;a href="https://guanqr.com/life/films/the-bad-kids/">隐秘的角落&lt;/a>》。这些剧集之所以能如此的火爆，除了有出色的主演，当然还有跌宕起伏的剧情。以往悬疑类剧集的故事发展都有一定的套路。主人公是警察，在故事前期，每一集都会解决一两个小案件，在每个案子中埋下一些大案伏笔；在故事后期，隐藏在主人公背后的大案逐渐浮出水面。但我说的这种套路仅仅能和以往的剧集相匹配，如今的悬疑类型剧集，特别是网剧，想要吸引观众的播放量，就必须跳出以往的套路剧情，走向多样化。&lt;/p>
&lt;p>最近比较火的两部悬疑类剧集，一个是爱奇艺「迷雾剧场」系列的《在劫难逃》，一个是腾讯视频推出的《摩天大楼》。这两部剧称得上是成功跳出套路的作品。说来有趣，这两部剧各有一位此前众人评价演技较差的明星参演，在《在劫难逃》中的是鹿晗，在《摩天大楼》中的是杨颖。但在这两部剧中，这两位明星的演技有了飞跃性的提升。&lt;/p>
&lt;p>《摩天大楼》的剧情十分精妙，每当我以为这个故事就要这样结束的时候，都会有一个惊人的转折发生。当我认定某个角色就是凶手的时候，真正的凶手却尚未出现。当我以为死者是自杀的时候，却有证据显示死者是他杀，而当我确信死者是他杀的时候，其实死者是自杀。虚虚实实，真真假假，每个人都充满了谎言，但每个人的内心都充满了善意。&lt;/p>
&lt;p>《在劫难逃》这部剧，剧本是精良的，演员演技是精良的，拍摄团队是精良的，但审核是拉胯的。前期的剧情剪辑很精致，能看出是很用心地在埋伏笔，但后期的剧情，就是向审核的妥协，故事讲述地很仓促，草草收尾。这样的神剪辑，成功将一部作品从悬疑剪到了玄幻。由于审核的严上加严，或许我们永远无法知道故事原本的结局了。&lt;/p>
&lt;p>同样被审核毁了的，还有《非常目击》这部剧。这部剧我看了两集就放弃了，不是因为剧情烂，而是因为特效烂。故事中两个主要角色都留有胡子，这部剧为了过审，硬生生用特效去掉了主角的胡子，这特效做的比《正义联盟》中大超的去胡特效还差，两个人的上嘴唇都没有了，乍一看有些瘆人。&lt;/p>
&lt;p>在国内严格的审核制度下，剧集中的人物形象必须遵守人们心中理想的形象，而在剧情上，正义必将打败邪恶。所以警察不能有胡子，所以反派必须被抓住。现在的悬疑类故事想要拍出来并播出是很难的。我相信如今有很多编剧写出了很新颖的题材，故事冲破了思想的牢笼，想要拍出来，导演也都拍了出来，但就是放不出来，这是很无奈的。或许这些也不能完全归咎于审核部门，可能有些尺度大的剧集，过审了，但有些思想保守的人就会站出来，抵制这部剧的播出，迫于压力，这部剧还得回炉重造。&lt;/p>
&lt;p>我希望以后随着社会的发展，人们素质不断提升，认知水平不断提升，对于艺术的接受程度能有所提升，不再如此保守。这样才有助于艺术多元化的发展。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/chinese-suspense-online-drama/" target="_blank" rel="noopener">https://guanqr.com/life/films/chinese-suspense-online-drama/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/tv-series/">剧集</category></item><item><title>
绝处逢生</title><link>https://guanqr.com/life/school/in-the-deepest-water-is-the-best-fishing/</link><guid isPermaLink="true">https://guanqr.com/life/school/in-the-deepest-water-is-the-best-fishing/</guid><pubDate>Fri, 11 Sep 2020 09:15:55 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">大&lt;/span>学的最后一学年，时常回忆起刚入学的那段时光——刚结束高考，憧憬着大学的美好生活，对校园里的一切活动都感到好奇，对自己能够成为浙大人而自豪。三年过去，岁月带走了我心中的热血与激情，只留下一份孤独与宁静。&lt;/p>
&lt;p>那张红色的录取通知书上有句话，「此后，你将与历史上众多灿若星辰的名字一起，分享『浙大人』这个无尚光荣的称号，共同承担起国家和社会的责任。」或许我可以称为是一名「浙大人」，但我只是灿若星辰的那帮人身边飘过的一粒尘。「绝处逢生」一词，恰恰可以用来描述我的大学生活。&lt;/p>
&lt;p>大一的第一个学期，我挂科了。那是 C 语言程序设计的上机考试，需要写出四道程序。我为了这次上机考试，将这门课留过的所有上机作业都复习了一遍，就在考试前一个小时，我还在教室上自习，可最终，我没有一道题能够通过全部测试点。按照课程要求，上机考试未通过者，就算期末理论考试考得再好，也无法及格。这就像是在我满怀激情为梦想前行的时候，给我的当头一棒。我那时常常想到的一个问题是，保研没戏了，接下来的几年我要如何度过？&lt;/p>
&lt;p>大二的第一个学期，我重修了 C 语言程序设计，但那一年，我大学物理挂科了。物理是我以前很擅长的科目，那一学期大学物理的内容是电磁和光，这与我的专业息息相关，我为什么又挂科了？那一学期最难的课程是模拟电路，我几乎把我所有的复习时间都给了模拟电路，却忽视了最为基础的大学物理。我逐渐对自己的能力产生了怀疑，也开始对大学的生活产生厌倦。&lt;/p>
&lt;p>在我对在哪个学期重修大学物理的问题苦恼的时候，我的数字电路课程也挂科了。我真的没有想到这么简单的课程也会挂科，我一度怀疑是老师在计算成绩的时候出现了差错，我在课堂上那么认真地做笔记，课下那么认真地写作业，又那么认真地完成每一个实验，为什么最后没有及格。&lt;/p>
&lt;p>挂科是一件很耻辱的事。还记得我第一次挂科的时候，那一天深夜，我在宿舍楼最深处的楼梯痛哭流涕，打电话寻求朋友的安慰。那种还没有到期末考试就知道自己注定不及格的感觉，那种刚步入大学就失去为保研而奋斗的动力的感觉，是痛苦的。我承认，所有课程的挂科，都是因为我所学的知识不能灵活运用。在高中的时候，一个知识点可以通过做很多道对应的题目进行掌握，可大学却没有。有时候一个知识点，往往就只对应两三道题。我只能通过反复计算有限的练习题来假装自己已经掌握了知识点。可这些都是无用功。反复的计算同一道题，却并没有思考这道题的的核心是什么，我每天都在教室中忙碌地复习，却并没有明白我该复习什么。我自以为我在很努力地复习，我自以为我付出了很多，其实只是在浪费时间罢了。&lt;/p>
&lt;p>命运总是喜欢捉弄人。我接受了已成定局的现实，通过反省找到自己的不足，在有限的时间里弥补了自己犯下的错误。在大三的第二个学期里，我重修了大学物理和数字电路。当我看到成绩单上合格的成绩后，压抑在我心中两年的石头终须烟消云散。绝处逢生。&lt;/p>
&lt;p>我时常抱怨命运的不公。这些年我一直有一个问题，不论是在学业上还是工作上，就算我再怎么努力，也不会得到我应有的回报。别人总能够展示出自己光鲜亮丽的一面，我却只能躲避在角落里。既然如此，我这么努力又是为了什么呢？&lt;/p>
&lt;p>我又时常安慰自己，任何事物都有两面性，挂科也有一定的好处。最近有一个很火的词——「内卷」。当无法向外扩张得到更多的资源时，只能向内卷曲竞争有限的资源。在浙大成绩正态分布、绩点三分一档、学生人数多保研名额少等促进恶性竞争现象不断发展的环境下，近几年外部的压力也越来越大。大部分学生都为了提高有限的成绩将自己处在无限的忙碌之中。更有甚者，会在课程计算总评成绩的时候作出各种意想不到的手段。感谢挂科，让我脱离出学校的内卷环境中，能够有更充足的时间来自由支配。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/in-the-deepest-water-is-the-best-fishing/" target="_blank" rel="noopener">https://guanqr.com/life/school/in-the-deepest-water-is-the-best-fishing/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/introspection/">反省</category></item><item><title>
当耐心消耗殆尽</title><link>https://guanqr.com/life/ideas/when-patience-runs-out/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/when-patience-runs-out/</guid><pubDate>Mon, 31 Aug 2020 21:05:50 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">八&lt;/span>月初的时候，我收到了一位网友的问题咨询邮件，咨询我如何做出像我的博客一样部署在 IPFS 上的网站。现在想想这件事，感觉有些滑稽，又有一些气愤。&lt;/p>
&lt;p>我先是推荐他看了几篇其他博主写的教程。他说他看过了，跟着教程部署了，但网站无法访问。我就加了他微信，一步一步教他如何构建。在沟通中，我却发现，他根本没有按照文章中所写的步骤进行部署，完全是自己在胡乱操作。为了解决这些问题，花费了我大量的时间。&lt;/p>
&lt;p>最初的时候，我指导一步，他做一步，好不容易做完了，这已经花费了我五六个小时的时间。我便躺在床上休息了一会。醒来后，打开手机，却看到他依然在向我咨询问题。我已经很疲倦了，但我从他的文字中并没有感受到一丝丝提问者应有的礼貌。&lt;/p>
&lt;p>他说他在部署的过程中报错了。问我如何解决报错问题。他把截图发给了我，那报错信息明明清清楚楚地写着报错的地方在哪里，根据报错的信息，我得知他没有安装 Node.js 还有 Git。又教他如何安装……一些很简单的问题，他却坚持要让我远程帮他配置，我拒绝了。我告诉他，我已经尽力了。我的时间有限，我还要复习考研。我为了解决他的问题花费自己数小时的时间已经很不错了，如果再有问题，请问问别的人吧。&lt;/p>
&lt;p>后来的几天，他时不时地问我各种各样的问题，最后还问到了域名解析的问题上。我出于好心，又手把手教他如何在 Cloudflare 上设置域名解析，如何开启 HTTPS，如何设置域名重定向。问题解决后，他又问我为什么自己的网站访问速度那么慢，我的网站访问速度却很快。我说我的网站有一些缓存。他不信，非要觉得是域名商的问题，又开始问我域名是在哪注册的……&lt;/p>
&lt;p>当我帮他解决了一个问题后，又有一个新的问题出现了，当我解决了新的问题后，又有更多的问题出现了。我一而再再而三地告诉他，我没有这么多时间帮他，他却依然不停地问我问题。在我看到他的消息后，不回复吧，心里总觉得不舒服，总觉得有事情没做完；回复吧，又要花费大量的时间向他解释。最后，为了不影响我的复习计划，我拉黑了他……&lt;/p>
&lt;p>虽然我之前写过一篇&lt;a href="https://guanqr.com/life/ideas/ask-and-answer/">文章&lt;/a>，说我很愿意帮助别人解决问题。但作为一个提问者，必须要遵守一些提问的准则。这里我列出我认为最关键的几点：&lt;/p>
&lt;ol>
&lt;li>请记住，你是向别人寻求帮助的人，别人帮你是处于别人的好心，你不要觉得自己理所应当。请注意你的言辞和礼仪。&lt;/li>
&lt;li>在提问前，一定要想好自己要问的问题，把问题表达清楚。不要一上来说得那么模糊，我根本不知道你的问题到底是什么。&lt;/li>
&lt;li>我有我自己的生活，提问可以，但请不要没完没了地提问，请思考一下你是否打扰到了我的正常生活规律。我不是神，我也要休息，我不能全天候等着你的问题去解决。&lt;/li>
&lt;/ol>
&lt;p>帮这位网友解决问题已经消耗了我大量的时间，以至于破坏了我一天的学习计划，我的耐心也在他不停歇的提问中消耗殆尽，最终忍无可忍。这里我的做法有一些欠妥，但拉黑也是出于无奈，我实在忍受不了这种接连不断的提问了。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/when-patience-runs-out/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/when-patience-runs-out/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/roast/">吐槽</category></item><item><title>
西子湖畔杨公堤</title><link>https://guanqr.com/life/travels/yang-gong-causeway/</link><guid isPermaLink="true">https://guanqr.com/life/travels/yang-gong-causeway/</guid><pubDate>Wed, 05 Aug 2020 18:19:22 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>很久没有去过西湖了，趁着大雨停歇的日子，想出去散散步。以前去西湖散步的时候，走的都是苏堤、孤山一带的路。杨公堤这一段车流量比较大，又没有什么特别的景观，算上这次，我只走过两次全程。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yang-gong-causeway-0.jpg" alt="yang-gong-causeway-0.jpg">&lt;/p>
&lt;p>走出校门，来到植物园的林间小路上，路边的花大多已经凋谢，行道树上的白漆早已掉落，树干上长起了浓绿的苔藓。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yang-gong-causeway-1.jpg" alt="yang-gong-causeway-1.jpg">&lt;/p>
&lt;p>毕竟西湖六月中，风光不与四时同。杨公堤虽然未有荷花映衬，比不上断桥那般秀丽，但也有独特的韵味。雨后的杨公堤并没有一丝丝的清凉。路上的人很少，我在湖边的小路上欣赏这别致的风景。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yang-gong-causeway-2.jpg" alt="yang-gong-causeway-2.jpg">&lt;/p>
&lt;p>上一次漫步杨公堤是在去年的三月份。那是正值初春，嫩柳成阴。绕过杨公堤，来到西湖南侧的雷峰塔上，眺望西湖区远方的高楼。在烦躁的生活中获得一份小小的宁静。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/yang-gong-causeway/" target="_blank" rel="noopener">https://guanqr.com/life/travels/yang-gong-causeway/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category></item><item><title>
生日记忆</title><link>https://guanqr.com/life/ideas/birthday-memories/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/birthday-memories/</guid><pubDate>Mon, 03 Aug 2020 18:12:52 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>个月末，在校论坛里看到有个很特别的帖子，主题是分享那些给自己留下深刻印象的生日。在看到这个话题之前，我从来都没有思考过，在已经度过的二十多个生日中，还记得哪一个。&lt;/p>
&lt;p>我的生日是在农历腊月的中旬，这个时间段学校基本上都已经放假，所以从我记事起，每年的生日基本上是和家里人一起过的。儿时的生日，父母从蛋糕店买一份大的生日蛋糕，晚饭后和爷爷、奶奶、父亲、母亲、堂妹一起吃。中学阶段，生日那天家里人会用压力锅炖一只鸡，我最爱的是那可口的鸡腿、还有那浓香四溢的鸡汤。平日里我结交的朋友很少，知道我生日在哪一天的人少之又少。至今在生日那天会向我发来「生日快乐」四个字的人，最多不超过两个。我很羡慕那些在校过生日的同学，生日那天能够收到许多同学送来的精致的礼物，那些礼物我从来都没有见过。&lt;/p>
&lt;p>所以，我度过的那些生日大都和平时的周末相似，多出来的东西大概只有一份家人的祝福。若要寻找哪些是「记得住的生日」，这些日子都不够格。不过，并非所有的生日都是如此。在「必然」中，也会发生一些「偶然」。在我思索了许久后，终于在那些平平无奇的生日中，拾取到了四段珍贵的记忆。&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong> 一 &lt;/strong>&lt;/p>
&lt;p>他是我儿时最好的朋友，我俩是在幼儿园认识的。他家就在我住的大院马路前的村子里。小学一年级，期末考试前，他知道我的生日在寒假里，所以他提前准备了一个礼物——画画本。这是一个很小的空白本子，当时售价最多不超过 5 角。不过当时在我看来是一份十分珍贵的礼物，因为这是我第一次收到同学送我的礼物。至今我还清晰的记得 WL 在画画本第一页用铅笔写下的稚嫩的文字——「祝你生日快乐，这本画画本送给你，XXX 给你」。&lt;/p>
&lt;p>不过令人遗憾的是，我俩的人生轨迹似乎从上初中开始就错开了，彼此之间的联系越来越少。&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong> 二 &lt;/strong>&lt;/p>
&lt;p>她是我小学的第一个同桌，也是我在小学里交到的第一个朋友。在我的印象里，她是一个非常聪明可爱的女生，我和她经常在语文课和英语课上抢答老师的问题，看谁回答的问题多；每次美术课的作品得分我俩都是班里的最高分。还记得当时她和那帮一起玩的女生问我喜欢谁的时候，我毫不犹豫地给他们说我喜欢她，我将那份情谊看作是最为珍贵的友谊。&lt;/p>
&lt;p>小学二年级的期末考试前，最后一个节日是元旦，她告诉我，她会在元旦放假前送我一个很特别的贺卡，算是元旦和生日的礼物。元旦前一天的早上，她带来了我的礼物——一个青色月牙形状的贺卡，上面有一个卡通小熊的形象。那个贺卡是当天她送出的最大的一个贺卡，我记得那时候经常和她一起玩的女生看到这个贺卡的时候，脸上充满了羡慕。&lt;/p>
&lt;p>时至今日，那张贺卡早已掉色，整个贺卡只剩下那只小熊的图案，但我依然珍藏在自己的「藏宝阁」中。因为那是她送我的唯一一件礼物，也是她和我友谊的象征，更是她走进我的人生的证明。悲痛的是，那年春天，那朵本该盛开的花儿，被命运摧残。我还没有来得及和她告别，她就离开了人世间。她让我明白了友情的珍贵，让我懂得了珍稀。&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong> 三 &lt;/strong>&lt;/p>
&lt;p>高中三年是令人无比怀念的三年。大学中同学之间为了成绩和名利进行各种明暗斗争，让我无比怀念在高中时一起挥洒汗水、一起为梦想拼搏的同学们之间真挚的感情。她是我刚进入高三阶段时候的前桌。她是一个很热情的女生，将近一米八的高个子，又有一点点憨。那年她过生日的时候，想要用相机记录一天的生活，我就把我的&lt;a href="https://guanqr.com/life/ideas/a-card-digital-camera/">卡片相机&lt;/a>借给了她。她经常向我请教一些问题，聊着聊着就从课程聊到了美剧。&lt;/p>
&lt;p>距离我的生日还有三个月的时候，她告诉我，她准备送我一个神秘的礼物。生日那天学校在补课，那是我第一次在学校过生日。她送我了一盒小卡片，那种在文具店卖着的印有各种图案的小卡片，每一张卡片的背面都有一段文字。三个月里她将每天的心里话写在了卡片上。那些文字充满了对未来生活的期待，对理想拼搏的决心。&lt;/p>
&lt;p>高三的记忆本应是黯淡无味的，她却在沉闷的生活中给了我前进的动力。&lt;/p>
&lt;p style="text-align:center; font-size:1.6em">&lt;strong> 四 &lt;/strong>&lt;/p>
&lt;p>她是我的小学同学，是我曾经暗恋的女生。但因为我和她从初中起就一直异地，所以我不曾向她表白。这种特殊的环境下，两个人维持成朋友的关系似乎更为恰当。高三那年，我对社交网络的接触大大减少，她也忙于自己的功课，我和她之间就很少再联系。&lt;/p>
&lt;p>大学二年级，课程最多的一学年。每一周有三天的课都是从早上到晚，中午连吃饭的时间都没有。除了繁忙的学业，各种&lt;a href="https://guanqr.com/life/school/a-job-in-editorial-department/">学生工作&lt;/a>也压得我喘不过气来。大学期间没有结交到那种能够聊到一起说真心话的朋友，很多烦恼只能藏在自己的心里。一天晚上，我在看手机的时候，突然看到她发来了一条消息——她想我了。我也很想她，但却不知如何开口。在惊喜与紧张的情绪中，我拨通了她的电话——那是这三年中我和她之间的第一个电话。&lt;/p>
&lt;p>大学三年级的那个寒假，生日前一天的晚上，我和她聊到了凌晨。在零点整的时候，她发来了一句「生日快乐」。这么多年过去了，她依然记得我的生日。二十一岁的生日，我虽然没有收到什么礼物，但她的一句祝福，就是最贵重的礼物。&lt;/p>
&lt;hr>
&lt;p>这四段记忆都有一个共同元素——友人。生命中对自己影响最大的人，除了家人，就是那些相识已久的友人了。在那些生日中，家人的陪伴成为了习以为常的事，从而使得友人的陪伴变得格外珍贵。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/birthday-memories/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/birthday-memories/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/friendship/">友谊</category><category domain="https://guanqr.com/tags/memory/">回忆</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
第八届光电设计竞赛校赛总结</title><link>https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/</guid><pubDate>Sat, 25 Jul 2020 17:04:33 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>光电设计竞赛和校外实习是大三暑假最为重要的事，这两项内容需要任选一个去做。我原计划在这个暑假去研究所进行实习，想要提前了解一下研究所的工作日常，然而幻想破灭。今年的情况比较特殊，受到疫情的影响，学院的实习计划取消了。所有的同学不论自愿与否，都要参加光电设计竞赛。&lt;/p>
&lt;p>写这篇文章的目的很简单，就是想给学弟学妹们分享一下自己的参赛经历，让学弟学妹们了解光电设计竞赛究竟是什么样的比赛，以此解决在大三暑假阶段面临的取参加竞赛还是去实习的问题。&lt;/p>
&lt;p>这篇文章是光电短学期课程系列文章的最后一篇。之前的两篇文章如下：&lt;/p>
&lt;ul>
&lt;li>大一短学期：&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/">SolidWorks 光机结构设计&lt;/a>&lt;/li>
&lt;li>大二短学期：&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/">光电学院短学期结束&lt;/a>&lt;/li>
&lt;/ul>
&lt;h2 id="竞赛简介">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#竞赛简介" class="anchor-link" aria-label="竞赛简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>竞赛简介&lt;/h2>
&lt;p>光电设计竞赛分为两种：一种是固定题目的比赛，所有人都做同样功能的设备，比谁的性能更好；一种是创意赛，提出一种创新型的设计，比谁的创意更好。创意赛更像是「互联网 +」这种的创新创业大赛。今年原本是固定题目的比赛，苹果糖度检测和垃圾分拣车，但因为情况特殊，无法进行实地比赛，所以改为了更自由的创意赛。&lt;/p>
&lt;p>创意赛的要求很简单，只要是和光电技术相关的即可：&lt;/p>
&lt;blockquote>
&lt;p>参赛项目能够将光电信息技术与移动互联网、云计算、大数据、人工智能、物联网等新一代信息技术和经济社会各领域紧密结合，培育新产品、新服务、新业态、新模式，促进光电技术与教育、医疗、交通、制造、金融、绿色能源、生态农业、消费生活等深度融合。特别鼓励利用光电技术进行传染病疫情防控方面的项目参赛。&lt;/p>&lt;/blockquote>
&lt;p>你也不需要真正作出一个完整的产品，只要论证自己的方法可行，并简单做出一个原型即可。&lt;/p>
&lt;h2 id="参赛目的">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#参赛目的" class="anchor-link" aria-label="参赛目的">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>参赛目的&lt;/h2>
&lt;p>参加竞赛的同学可以分为两类：一类是为了保研，如果团队的项目进了国赛，那很有希望进行保研；另一类是像我这种，划水玩家，只是为了混个学分而已。&lt;/p>
&lt;p>那些优质队伍有经验丰富的指导教师，还有相关领域的研究生，技术方面研究生团队已经做好了样品，队伍中的本科生们说是参赛，实际上只需要做一做市场调研。作为一个坚持「独立自主完成任何事物」理念的人来说，我不愿加入那些研究生的团队，我觉得拿着一个已经研发好的产品去参加一个仅有二十多天准备时间的比赛，是虚假的，也是不公平的。一个技术设计类型的比赛，怎么能演变为和目前国内各种创新创业大赛一样的 PPT 演讲大赛呢？因此，我只有一个由同专业四个本科生组成的小团队，能力十分有限，单凭自己的努力想要拿奖是很艰难的，更不用说保研了。&lt;/p>
&lt;h2 id="如何获奖">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#如何获奖" class="anchor-link" aria-label="如何获奖">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>如何获奖&lt;/h2>
&lt;p>当然，如果你想要获得一等奖，并且得到晋级区赛国赛的资格。请不要像我一样。你一定要主动联系一到两位指导教师，最好有研究生加入到团队当中。你的项目需要符合现阶段的市场需求。团队中也不能只有光电学院的同学。比如说你想要研发一台用于医疗的设备，那么最好邀请一两位医学相关专业的同学加入进来，如果你的产品涉及到软件的开发，对于用户界面的设计，最好寻求美术相关专业的同学帮忙。单单几个光电本科生，在二十多天里能做出来的东西真的很有限。你的产品想要出众，就必须要有实力。&lt;/p>
&lt;p>我非常佩服校赛中一支获得一等奖的队伍，队长是我的同班同学，但他们队伍中只有他一人来自光电学院，其余几人分别来自电气工程学院、信息与电子工程学院、医学院、艺术与考古学院。他们研发的是一个遗传病辅助诊断系统，根据扫描人的面部信息进行遗传病的诊断。他们的团队没有研究生加入，但他们的产品已经研发了很长的时间，不论是软件方面还是硬件方面都有充足的准备，甚至申请到了专利。这样的团队很容易拿到一等奖。&lt;/p>
&lt;h2 id="我的项目设计">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#我的项目设计" class="anchor-link" aria-label="我的项目设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>我的项目设计&lt;/h2>
&lt;p>我的项目受到了宿舍楼前的门禁启发，设计的是一款价格低廉的人脸识别测温打卡机，外加一款在移动端使用的健康管理平台，该平台不仅有通过小程序查看温度检测数据，进行人员数据管理的功能，还添加有天气查询，IBM 计算器等功能。&lt;/p>
&lt;p>在硬件方面，我们借助了树莓派进行硬件的搭建。在软件方面，我们使用 Python 语言设计了人脸识别测温打卡机的用户界面，使用微信小程序对健康管理平台进行开发。相关代码已经开源：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/Face-Recognition-Temperature-Measurement target="_blank">Face-Recognition-Temperature-Measurement&lt;/a>
&lt;/div>
&lt;div class="description">Face recognition and infrared temperature measurement module in health management platform. 健康管理平台人脸识别与红外测温模块设计。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #3572A5">&lt;/span>
&lt;span class="language-name">Python&lt;/span>
&lt;/div>
&lt;/div>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/WeApp-Toolbox target="_blank">WeApp-Toolbox&lt;/a>
&lt;/div>
&lt;div class="description">WeChat MiniApp: Toolbox. 微信小程序：一个健康管理主题的生活工具箱。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #f1e05a">&lt;/span>
&lt;span class="language-name">JavaScript&lt;/span>
&lt;/div>
&lt;/div>
&lt;p>我在项目中主要负责微信小程序的开发和宣传海报的设计，对于微信小程序的开发，相关文章有：&lt;/p>
&lt;ul>
&lt;li>&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/">微信小程序课程后记&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://guanqr.com/tech/computer/raspberry-pi-start/">树莓派，启动&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/">在微信小程序中引入 ECharts 图表&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/">树莓派利用水墨屏显示实时天气状况&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://guanqr.com/tech/computer/upload-local-data-to-the-database-of-wechat-mini-app/">将本地数据上传至小程序云开发数据库&lt;/a>&lt;/li>
&lt;/ul>
&lt;p>这些文章记录了我在程序开发中遇到的问题和解决方案。&lt;/p>
&lt;p>对于海报的设计，我没有使用什么模板，完全是从零开始一点一点地将海报绘制了出来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/optoelectronic-design-competition-2020-poster.png" alt="optoelectronic-design-competition-2020-poster.png">&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/optoelectronic-design-competition-2020-award-certificate.jpg" alt="optoelectronic-design-competition-2020-award-certificate.jpg">&lt;span class="caption">※ 获奖证书&lt;/span>&lt;/p>
&lt;p>我们团队最终得到了三等奖，这也算是一个惊喜吧，毕竟是一个划水的项目，没有很看重这次比赛。不过通过这次竞赛，我觉得我的微信小程序开发能力又得到了一定的提升，这可以说是最大的收获。校赛结束后还会有东部赛区的比赛，然后是国赛，但我想我是不会再去参加了。这些时间更值得用来复习专业课程。&lt;/p>
&lt;p>如果说你的成绩并不是太优秀，但想要保研，那么可以争取在竞赛中加入好的团队进入国赛。如果说你下定决心要考研，那么还是在暑假里找个水一点的实习吧，这样便有充足的时间进行复习。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/optoelectronic-design-competition-2020/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/design-contest/">设计竞赛</category><category domain="https://guanqr.com/tags/mini-app/">小程序</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
处在风口浪尖的浙大</title><link>https://guanqr.com/life/school/zju-is-under-the-gun/</link><guid isPermaLink="true">https://guanqr.com/life/school/zju-is-under-the-gun/</guid><pubDate>Wed, 22 Jul 2020 09:47:09 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">近&lt;/span>期与浙大相关的热词有「强奸」、「留校察看」等等。原本这件事是从校内论坛曝光的，然后有学生将其发到了外网的公众平台，流量大师们将其与民族、女权之类的敏感热词相关联，将事件进一步扩大。时至今日，该事件的火爆程度令人惊诧。&lt;/p>
&lt;p>对于该事件应该如何处理我不做过多评价，我不是学法律的，也没有认真研读过学校相关规定，把这件事留给专业人士做才是正确的选择。我想在这里议论的是该事件发生后的浙大学生、网络舆论、学校领导三方的行为。&lt;/p>
&lt;h2 id="浙大学生">&lt;a href="https://guanqr.com/life/school/zju-is-under-the-gun/#浙大学生" class="anchor-link" aria-label="浙大学生">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>浙大学生&lt;/h2>
&lt;p>最先发现这件事的人是一位因疫情封校在学校中无聊到浏览学工部网站的同学。他把自己的发现分享到了校内论坛里，不知道被谁散播到了外网之中。学生们对于学校长期封校的行为十分不满，怨恨的情绪不断增长。学校的领导一派官僚作风，制定了毫无意义的封校措施，限制浙大学生们自由出入校门，却没有限制外来人员的自由。暑假来临，校园里的教职工都放假回家，大部分的食堂也关门大吉，校领导没有把浙大学生当做人一样看待。因此，所有的人都希望学校能够像天津大学和南京大学一样上一上热搜，让学校重视校门开放的问题。&lt;/p>
&lt;p>谁也没想到，上热搜的并不是讨论是否解封学校的话题，而是有关强奸的话题。许多人觉得浙大的学生应该会站在学校的角度，维护学校的声誉，但我们并没有这样。很多人的心中有一种幸灾乐祸的感觉，却又有一种无奈。作为浙大的学生，我们希望学校能够公开公正处理任何问题，而不是一味地「求仕创薪」。该事件对于学校声誉影响很大，我们希望学校能够借此机会反思自己的行为，更好地建设学校。&lt;/p>
&lt;h2 id="网络舆论">&lt;a href="https://guanqr.com/life/school/zju-is-under-the-gun/#网络舆论" class="anchor-link" aria-label="网络舆论">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>网络舆论&lt;/h2>
&lt;p>很多网友对这件事并没有一个清晰的认识。许多媒体将这件事扯到了少数民族的优待问题中，试图将该事件上升到民族对立。他们不知道法院应该如何判决这样的人，他们也不知道学校负责处理该事件的部门是谁，他们只知道强奸犯需要受到严惩，如果没有受到严惩，相关负责人就是包庇。他们只是从各种蹭热度赚流量的媒体中得到这件事的一个碎片，然后将自己打扮成对社会负责的优秀好青年。&lt;/p>
&lt;p>他们嘲笑道，西湖的水那么深，西湖的法院能有多么公正；他们嘲笑道，在包庇强奸犯的大学读书的，都不是什么好东西。众多网友对浙大学生冷嘲热讽，从对学校的批判上升到了对浙大学生的人身攻击。&lt;/p>
&lt;p>在招生部做志愿者的学生们，本应在电话中接到家长们对专业的咨询，却接受到了一天骚扰电话的辱骂。他们作为志愿者，不能反驳，只有用最和蔼的语气回应，这些替学校挡枪的志愿者们做错了什么呢？在各大视频网站分享开研究生录取通知书视频的新生们，本想在评论中看到网友们对自己的鼓励，得到的却是各种阴阳怪气的评论，劝他们退学重考其他学校……&lt;/p>
&lt;p>对于该事件的看法，客观的人也不少。作为一个浙大的学生，我试图以一个客观的角度评论他们的行为，他们却在自己的帖子中果断删除了我的评论，只留下那些肮脏的谩骂，似乎为黑而黑才是正确的选择。他们并不是想得到正义，而是想要得到混乱，在混乱中满足自己——看，这场混乱中我也出了一份力。你无法向他们解释什么，你想要表达任何客观的观点，在他们看来都是包庇，都是洗地。&lt;/p>
&lt;p>我国互联网网民的受教育程度并不高，很多人甚至还未成年，他们并没有完全接触到事情的真相，而是被各种媒体带了一波节奏，然后就跟风起哄，在一些蹭热度的视频下方阴阳怪气，发表一些莫名其妙的言论，试图站在道德制高点去声讨一所自己无法考上，自己根本不了解的高校，试图以此来得到内心一丝丝的优越感，认为那所著名的高校也不过如此，那些高校的学生也不过是人渣罢了，自己的道德观念要比他们强。如果你作为浙大的学生，非要和他们争论出谁对谁错，那么你肯定处于一个劣势地位。因为你处在这件事发生的漩涡之中，而他们只是在岸边瞥见这个漩涡的人。他们最多会拾起几个石头，投向水中，试图在漩涡中激起更大的浪花，却不知道也不想知道这个漩涡到底是如何产生的。人与人之间的认知是存在差异的，而认知的鸿沟是无法用言语来填补的。&lt;/p>
&lt;h2 id="学校领导">&lt;a href="https://guanqr.com/life/school/zju-is-under-the-gun/#学校领导" class="anchor-link" aria-label="学校领导">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>学校领导&lt;/h2>
&lt;p>学校没有想到这一天的来临，自己辛辛苦苦打造的网红校园，被网络舆论破坏到灰飞烟灭。&lt;/p>
&lt;p>学校的做法和以往面对各种突发事件一样，先保持沉默，然后发表一篇毫无任何意义的声明，表示学校相关部门正在处理。这件事学校终究是做错了。学校保持沉默，错过了事件回复的黄金时间，让越来越多人质疑。&lt;/p>
&lt;p>学校做错的事还不够多吗？去年玉泉校区集体食物中毒，学校发布一个说明，表示将进一步调查发病原因，到现在也没有后文。学生在食堂的食物中吃出了一枚铁钉，吃出了一整只蟑螂，学校后勤集团并没有任何整改的迹象。学校私设健康码限制学生出入校园，对学生进行「假闭环管理」，在出校审批上层层刁难，对校外人员却疏于监管，牺牲学生的利益去服务社会人员……&lt;/p>
&lt;p>校领导们坐在自己的位子上，举着「求是创新」的口号，做着「求仕创薪」的事。学校在官媒上宣传豪华的餐厅与建筑，试图打造网红校园。学校一味地寻求「创新」，创办各种创新创业大赛，强制让许多不想参与创业的学生参与创业课程的学习，参加创业比赛，却忘了竺可桢老校长所说的「求是」。「求是」才是浙大之根。&lt;/p>
&lt;hr>
&lt;p>竺可桢老校长在 1936 年的开学典礼上讲过：&lt;/p>
&lt;blockquote>
&lt;p>世界上万事万物统有他存在的理由，朱子所谓格物致知就是即事而穷其理。要能即事而穷其理，最要紧的是一个清醒的头脑。&lt;/p>&lt;/blockquote>
&lt;p>他还说：&lt;/p>
&lt;blockquote>
&lt;p>盲从的习惯，我们应该竭力避免，我们不能因为口号叫得响一点，或是主义新一点，就一唱百和的盲从起来。我们大家要静心平气的来观察口号的目的，主义的背景，凭我们的裁判，扪良心来决定我们的主张。若是对的，我们应竭力奉行。若是不对的我们应尽力排除。依违两可，明哲保身的态度，和盲从是一样要避免的。我们要做有主张有作为的人，这样就非有清醒之头脑不可。&lt;/p>&lt;/blockquote>
&lt;p>这是竺可桢校长教育学生要做的事。我也希望各位读者能够做到如此。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/zju-is-under-the-gun/" target="_blank" rel="noopener">https://guanqr.com/life/school/zju-is-under-the-gun/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
偷偷潜入 CCG EXPO 2020</title><link>https://guanqr.com/life/travels/ccg-expo-2020/</link><guid isPermaLink="true">https://guanqr.com/life/travels/ccg-expo-2020/</guid><pubDate>Sat, 18 Jul 2020 11:59:10 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">就&lt;/span>在昨天，我偷偷前往上海，参加了期待已久的 CCG EXPO 2020。为什么说是偷偷的呢？因为学校只允许学生每周申请出校一次，而且要当天出去当天回。虽然杭州和上海距离很近，但毕竟也是跨省出行，在当前疫情仍在的情况下，有一定的风险。&lt;/p>
&lt;p>在今年这种特殊的情况下 CCG EXPO 能够顺利举办出乎我的意料。还记得在 2018 年期末考试正好结束的时候，我花了 1600 元看了场音乐剧《猫》，然后就去上海参加了 CCG EXPO，当时的现场十分热闹，琳琅满目的手办和模型，大饱眼福。2019 年暑假的时候，我正好在上小学期的课程，因此没能去成。今年呢？以后是否还会留在南方尚未确定，今年或许是最后一次机会了，所以我还是买了一张周五的门票。&lt;/p>
&lt;p>随申办绿码、通信行程卡、身份证，我带着这三样通行证，进入了上海世博展览馆。我对国漫之类的东西并没有太多兴趣，此次前往 CCG EXPO 要参观的展厅有两个——高达和 Hot Toys。&lt;/p>
&lt;h2 id="高达">&lt;a href="https://guanqr.com/life/travels/ccg-expo-2020/#高达" class="anchor-link" aria-label="高达">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>高达&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-0.jpg" alt="ccg-expo-2020-0.jpg">&lt;/p>
&lt;p>从入口进入就能看到高达的展厅。今年伴随着高达 40 周年活动，会场有许多新产品的展示和限定产品的发售。和往年一样，展厅中展示了很多学生制作的高达模型展品。我玩高达只是穷玩，因为没有条件喷漆，玩的只有素组。那些学生已经能把喷涂的手艺做到如此地步，让我很佩服。路过排着长队购买限定产品的队伍，我犹豫了片刻，觉得既然来了，不能空手而归——于是我也排在了队伍的后面——购买了一款 MG 彩色透明板的正义高达。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-1.jpg" alt="ccg-expo-2020-1.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-2.jpg" alt="ccg-expo-2020-2.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-3.jpg" alt="ccg-expo-2020-3.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-4.jpg" alt="ccg-expo-2020-4.jpg">&lt;/p>
&lt;h2 id="hot-toys">&lt;a href="https://guanqr.com/life/travels/ccg-expo-2020/#hot-toys" class="anchor-link" aria-label="hot-toys">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Hot Toys&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-5.jpg" alt="ccg-expo-2020-5.jpg">&lt;/p>
&lt;p>今年的 Hot Toys 用一个词来形容，就是「失望至极」。前几年涉及到的影视题材还很多元化，近两年就只有漫威和星战了。自从漫威无限传奇画上了圆满的句号之后，Hot Toys 开启了无限复刻和推出一款又一款游戏蜘蛛侠的骗钱模式。会展中只有星战系列，特别是曼达洛人，称得上是 Hot Toys 仅剩的一点良心。&lt;/p>
&lt;h2 id="其他展品">&lt;a href="https://guanqr.com/life/travels/ccg-expo-2020/#其他展品" class="anchor-link" aria-label="其他展品">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>其他展品&lt;/h2>
&lt;p>会场中还有一些正在监修的展品。比如说初音未来与吃豆人，万代 S.H.F 的哪吒和敖丙……&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-6.jpg" alt="ccg-expo-2020-6.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-7.jpg" alt="ccg-expo-2020-7.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-8.jpg" alt="ccg-expo-2020-8.jpg">&lt;/p>
&lt;hr>
&lt;p>今年因为受到疫情的影响，CCG EXPO 2020 的筹划比往年要延后很多，因此很多公司并没有做好充足的准备参与本次会展。今年的规模要比以往小很多，人数也少了很多，完全没有 2018 年的氛围。当时我去参观的时候，尽管是会展的最后一天，现场依然爆满，依然举办了很多活动，有很多展品售卖，而这次，什么也没有。总的来说，这是一次平平淡淡的博览会吧，没有太多令人惊艳的东西。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ccg-expo-2020-9.jpg" alt="ccg-expo-2020-9.jpg">&lt;/p>
&lt;p>从世博展览馆出来，到中国馆旁乘坐地铁回去，回想当初第一次来上海，是在十年以前了。那是上海正在举办世博会，中国馆刚刚对外开放，世博园区人山人海。如今，世博园区空空荡荡，早已没有当初那番热闹的景象。细雨过后，地面上蒸腾的热气又给园区增加了几分沉闷。再见，CCG EXPO，我们有缘再相见！&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/ccg-expo-2020/" target="_blank" rel="noopener">https://guanqr.com/life/travels/ccg-expo-2020/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category><category domain="https://guanqr.com/tags/shanghai/">魔都</category></item><item><title>
将本地数据上传至小程序云开发数据库</title><link>https://guanqr.com/tech/computer/upload-local-data-to-the-database-of-wechat-mini-app/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/upload-local-data-to-the-database-of-wechat-mini-app/</guid><pubDate>Thu, 09 Jul 2020 13:28:43 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/">前文&lt;/a>中我提到，在本次光电竞赛中我设计了一款小程序，需要借助树莓派，利用传感器采集数据并上传至小程序的云开发数据库，再通过小程序读取数据库中的数据，绘制温度变化曲线。获取数据并绘制曲线的功能已经在前文实现，现在需要做的就是，如何将本地的数据上传至云开发数据库。&lt;/p>
&lt;p>要想实现数据的传输，最重要的一点就是获取到微信公众平台的 access_token。而要想得到 access_token，就需要提供小程序的 AppID 和 AppSecret，这两者都可以在微信公众平台中获取到。&lt;/p>
&lt;p>这里我们可以定义一个函数来获取 access_token：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">access_token&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> 获取 access_token
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> &amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">APPID&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;#39;&lt;/span> &lt;span class="c1"># 小程序ID&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">APPSECRET&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;#39;&lt;/span> &lt;span class="c1"># 小程序秘钥&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">WECHAT_URL&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;amp;appid=&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">APPID&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&amp;amp;secret=&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">APPSECRET&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">response&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WECHAT_URL&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">response&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">result&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;access_token&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 将返回值解析获取 access_token&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>正常情况下，返回的 JSON 数据包内容为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="nt">&amp;#34;access_token&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;ACCESS_TOKEN&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nt">&amp;#34;expires_in&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">7200&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>至此，我们就得到了 access_token。接下来就要上传数据。我想要上传的数据为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">openId&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;o2XBq5FtxdiSDfJRpxfVi74QhQSQ&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tempName&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;GuanQirui&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tempTemp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;36.5&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tempLct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;杭州&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tempDate&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;2020-07-12&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>openId&lt;/code> 为微信用户的唯一标识，这段字符串表示该段数据是属于「我」这个用户的。在小程序中，我们上传数据后可以发现，每一组数据都有自己的 &lt;code>openId&lt;/code>，因此每个用户只能访问到属于自己 &lt;code>openId&lt;/code> 的数据。所以说，如果不上传 &lt;code>openId&lt;/code>，尽管这段数据存放在数据库中，你也无法通过小程序访问。&lt;code>tempName&lt;/code> 到 &lt;code>tempData&lt;/code> 这几个数据就是自己定义的数据，分别表示姓名、温度、地点、日期。&lt;/p>
&lt;p>数据上传的格式应该和在小程序中使用 JavaScript 编写的上传函数相同。在小程序中的代码为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">add&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">location&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">location&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">date&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">counterId&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">_id&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">count&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>temp&lt;/code> 是数据库中存放这组数据的集合名称。从这段代码可以看出，数据上传的关键是 &lt;code>db.collection().add&lt;/code> 这部分函数。&lt;/p>
&lt;p>另外，上传数据的接口为：&lt;/p>
&lt;pre tabindex="0">&lt;code>https://api.weixin.qq.com/tcb/databaseadd?access_token=ACCESS_TOKEN
&lt;/code>&lt;/pre>&lt;p>我们再定义一个函数对数据进行上传：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">databaseAdd&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">access_token&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> 新建记录并对内容进行定义
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> &amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://api.weixin.qq.com/tcb/databaseadd?access_token=&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">access_token&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">query&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;db.collection(&amp;#34;temp&amp;#34;).add({data:{_openid:&amp;#34;&amp;#39;&lt;/span>&lt;span class="o">+&lt;/span> &lt;span class="n">openId&lt;/span> &lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;&amp;#34;,name:&amp;#34;&amp;#39;&lt;/span>&lt;span class="o">+&lt;/span> &lt;span class="n">tempName&lt;/span> &lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;&amp;#34;,temperature:&amp;#34;&amp;#39;&lt;/span>&lt;span class="o">+&lt;/span> &lt;span class="n">tempTemp&lt;/span> &lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;&amp;#34;,location: &amp;#34;&amp;#39;&lt;/span>&lt;span class="o">+&lt;/span> &lt;span class="n">tempLct&lt;/span> &lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;&amp;#34;,date:&amp;#34;&amp;#39;&lt;/span>&lt;span class="o">+&lt;/span> &lt;span class="n">tempDate&lt;/span> &lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;&amp;#34;}})&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;env&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;toolbox-01&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;query&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">query&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">response&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">post&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dumps&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">response&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">result&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>data&lt;/code> 中的 &lt;code>env&lt;/code> 是数据库的名称。我们执行以上的函数，即可在小程序云开发的后台查看到新添加的数据。&lt;/p>
&lt;p>对云开发数据库中的数据进行获取的方法类似。比如现在有一个名为 &lt;code>user&lt;/code> 的数据集合，数据中包含了用户的姓名 &lt;code>name&lt;/code> 和位置 &lt;code>location&lt;/code>，我们想要获取到有关 Tony 用户的所有数据。同样定义一个函数：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">databaseQuery&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">access_token&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> 检索数据库，获取 tempName 用户数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> &amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://api.weixin.qq.com/tcb/databasequery?access_token=&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">access_token&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">#query = &amp;#39;db.collection(&amp;#34;user&amp;#34;).limit(100).get()&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">query&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;db.collection(&amp;#34;user&amp;#34;).where({&amp;#34;name&amp;#34;:&amp;#34;&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">tempName&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&amp;#34;}).get()&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;env&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;toolbox-01&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;query&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">query&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">response&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">post&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dumps&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">length&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">response&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">user&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">response&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">length&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">user_dict&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ast&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">literal_eval&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">user&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">openId&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">user_dict&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;_openid&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">location&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">user_dict&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;location&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">openId&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">location&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中， &lt;code>tempName = Tony&lt;/code>，函数打印出了有关 Tony 的最新数据中对应的 &lt;code>_openid&lt;/code> 和 &lt;code>location&lt;/code> 信息。&lt;/p>
&lt;p>因为我想要实现的功能仅为本地数据的上传，数据的修改和删除操作均在小程序端执行，所以就没有编写有关修改和删除的函数。感兴趣的读者可以自行查阅网上相关资料自行编写。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/upload-local-data-to-the-database-of-wechat-mini-app/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/upload-local-data-to-the-database-of-wechat-mini-app/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/design-contest/">设计竞赛</category><category domain="https://guanqr.com/tags/mini-app/">小程序</category><category domain="https://guanqr.com/tags/python/">Python</category><category domain="https://guanqr.com/tags/wechat/">微信</category></item><item><title>
树莓派利用水墨屏显示实时天气状况</title><link>https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/</guid><pubDate>Wed, 08 Jul 2020 18:17:53 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pie-and-e-paper.jpg" alt="raspberry-pie-and-e-paper.jpg">&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>一直想给自己的树莓派配一个屏幕，不是用于显示系统桌面，而是用于设计一些可以显示信息的程序。普通的屏幕不够有特色，不够新颖，因此我购买了微雪的一款 2.7 英寸三色水墨屏。这一款水墨屏和树莓派差不多大小，可以直接固定在树莓派上。&lt;/p>
&lt;p>微雪在官方的树莓派例程中提供了写好的绘图、字符显示、图像显示的函数，我们直接使用这些函数即可，下面是官方例程的代码仓库：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/waveshare/e-Paper target="_blank">waveshare / e-Paper&lt;/a>
&lt;/div>
&lt;div class="description">Jetson Nano、Raspberry Pi、Arduino、STM32 例程&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #555555">&lt;/span>
&lt;span class="language-name">C&lt;/span>
&lt;/div>
&lt;/div>
&lt;p>三色水墨屏可以显示黑、白、红三种颜色，我选择购买三色正是因为三色比双色能够传达更多的信息。不过通过测试，我发现如果要显示三种颜色的话，屏幕刷新率要比显示双色慢得多，所以在程序开发的时候，我选择了双色显示。&lt;/p>
&lt;h2 id="获取天气信息">&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/#获取天气信息" class="anchor-link" aria-label="获取天气信息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>获取天气信息&lt;/h2>
&lt;p>天气信息我使用的是「&lt;a href="https://www.seniverse.com/" target="_blank" rel="noopener">心知天气&lt;/a>」的 API 接口。对于 API 接口的使用，在&lt;a href="https://docs.seniverse.com/api/start/start.html" target="_blank" rel="noopener">官方文档&lt;/a>中有详细的说明。当然，我使用的是免费版的服务，因此获取到的信息只有天气和温度：&lt;/p>
&lt;blockquote>
&lt;p>获取指定城市的天气实况。付费用户可获取全部数据，免费用户只返回天气现象文字、代码和气温 3 项数据。注：中国城市暂不支持云量和露点温度。&lt;/p>&lt;/blockquote>
&lt;p>首先在「心知天气」的控制台中获取到你申请的应用的私钥，即为下面代码 &lt;code>key&lt;/code> 的值，代码中 &lt;code>location&lt;/code> 是你想要获取信息的城市拼音，这里我选择的是杭州。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">location&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;hangzhou&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;YOUR_KEY&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;https://api.seniverse.com/v3/weather/now.json?key=&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">key&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;location=&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">location&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;language=zh-Hans&amp;amp;unit=c&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">weaData&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后我们通过 &lt;code>weaData.json()&lt;/code> 即可获取到返回的信息：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;location&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;id&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;WTMKQ069CCJ7&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;name&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;杭州&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;country&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;CN&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;path&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;杭州,杭州,浙江,中国&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;timezone&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;Asia/Shanghai&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;timezone_offset&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;+08:00&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;now&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;text&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;小雨&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;code&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;13&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;temperature&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;27&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s1">&amp;#39;last_update&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;2020-07-09T19:24:00+08:00&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我想要的是城市名字、天气、温度这三个信息，因此有：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">cityName&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;location&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;name&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># city&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">cityWea&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;now&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;text&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># weather&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">cityTemp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;now&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;temperature&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;°C&amp;#39;&lt;/span> &lt;span class="c1"># temp&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>至此，我们已经获取到了指定城市的天气信息。&lt;/p>
&lt;h2 id="文字显示">&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/#文字显示" class="anchor-link" aria-label="文字显示">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>文字显示&lt;/h2>
&lt;p>文字显示功能，由于微雪官方的例程已经提供了很方便的函数，直接使用这些函数即可。这里我没有使用绘图的函数，只是用了显示文本的函数，即 &lt;code>draw.text()&lt;/code> 函数。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">sys&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">picdir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">realpath&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="vm">__file__&lt;/span>&lt;span class="p">))),&lt;/span> &lt;span class="s1">&amp;#39;pic&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">libdir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">realpath&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="vm">__file__&lt;/span>&lt;span class="p">))),&lt;/span> &lt;span class="s1">&amp;#39;lib&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">exists&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">libdir&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sys&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">libdir&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">logging&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">waveshare_epd&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">epd2in7&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ImageDraw&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ImageFont&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">traceback&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">epd2in7&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">EPD&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">init&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Clear&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font36&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font84&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">84&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Himage&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">new&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;1&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">height&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">width&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageDraw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Draw&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Himage&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityName&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font36&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityWea&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font36&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityTemp&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font84&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">display&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">getbuffer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Himage&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>此外，为了显示获取天气信息的时间，我还添加了一行信息：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">datetime&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">datetime&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font16&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">dayTime&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">now&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strftime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%Y-%m-&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1"> %H:%M:%S&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="sa">u&lt;/span>&lt;span class="s1">&amp;#39;更新时间：&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font16&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">dayTime&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font16&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="按键控制">&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/#按键控制" class="anchor-link" aria-label="按键控制">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>按键控制&lt;/h2>
&lt;p>我购买的水墨屏模块上还有四个按键，因此我想，可以通过按键切换城市，从而能够显示不同城市的天气信息。通过观察，我发现四个按键对应 BCM 编码的引脚号为 5、6、13、19。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pie-pins.png" alt="raspberry-pie-pins.png">&lt;span class="caption">※ 树莓派引脚对照表&lt;/span>&lt;/p>
&lt;p>因此有：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">RPi.GPIO&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">5&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">6&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button3&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">13&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button4&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">19&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setmode&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">BCM&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button4&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>实现切换城市，可以考虑将不同城市的名称存放在一个数组中，通过按键选择数组中指定位的数据。这里我以杭州、北京
天津、上海四个城市为例：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;hangzhou&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;beijing&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;tianjin&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;shanghai&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里间隔 0.1s 重复确认一次按键是否按下，是为了防抖动，经过测试，我发现如果不增加防抖动，那么按下按钮一次会返回多次信息。&lt;/p>
&lt;p>当然，为了让程序能够在任意时刻切换城市，我们需要设定一个循环。综合上述分析，下面给出我的完整程序。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="ch">#!/usr/bin/python&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># -*- coding:utf-8 -*-&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">sys&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">picdir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">realpath&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="vm">__file__&lt;/span>&lt;span class="p">))),&lt;/span> &lt;span class="s1">&amp;#39;pic&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">libdir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">dirname&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">realpath&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="vm">__file__&lt;/span>&lt;span class="p">))),&lt;/span> &lt;span class="s1">&amp;#39;lib&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">exists&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">libdir&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sys&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">libdir&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">logging&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">waveshare_epd&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">epd2in7&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ImageDraw&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ImageFont&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">traceback&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># custom&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">datetime&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">datetime&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">RPi.GPIO&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">5&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">6&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button3&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">13&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">button4&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">19&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setmode&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">BCM&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button4&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">IN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">pull_up_down&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PUD_UP&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">epd2in7&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">EPD&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">init&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Clear&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font24&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font16&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font36&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">font84&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageFont&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">truetype&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">picdir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;Font.ttc&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">84&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Location&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;hangzhou&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;beijing&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;tianjin&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;shanghai&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">refreshWeather&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Himage&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">new&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;1&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">height&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">width&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 255: clear the frame&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ImageDraw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Draw&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Himage&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;YOUR_KEY&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;https://api.seniverse.com/v3/weather/now.json?key=&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">key&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;location=&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">lct&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&amp;amp;language=zh-Hans&amp;amp;unit=c&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">weaData&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cityName&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;location&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;name&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># city&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cityWea&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;now&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;text&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># weather&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cityTemp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weaData&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;results&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;now&amp;#39;&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s1">&amp;#39;temperature&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;°C&amp;#39;&lt;/span> &lt;span class="c1"># temp&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityName&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font36&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityWea&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font36&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">cityTemp&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font84&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># show the refresh date&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dayTime&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">now&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strftime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%Y-%m-&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1"> %H:%M:%S&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="sa">u&lt;/span>&lt;span class="s1">&amp;#39;更新时间：&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font16&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">draw&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">dayTime&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">font16&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fill&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">display&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">getbuffer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Himage&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">try&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">refreshWeather&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">refreshWeather&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">c&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lct&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Lct&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">refreshWeather&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">epd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Clear&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button4&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">RPi&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">GPIO&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">button4&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">epd2in7&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">epdconfig&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">module_exit&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">exit&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">except&lt;/span> &lt;span class="ne">IOError&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">e&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">logging&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">e&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">except&lt;/span> &lt;span class="ne">KeyboardInterrupt&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">logging&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;ctrl + c:&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">epd2in7&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">epdconfig&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">module_exit&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">exit&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/raspberry-pie-shows-the-weather-through-e-paper/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/design-contest/">设计竞赛</category><category domain="https://guanqr.com/tags/python/">Python</category><category domain="https://guanqr.com/tags/raspberry-pi/">树莓派</category></item><item><title>
在微信小程序中引入 ECharts 图表</title><link>https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/</guid><pubDate>Sat, 04 Jul 2020 14:54:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>最近在忙着做光电竞赛的项目。为了实现手机端对数据的访问，我重新拾起年初做的那一个&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/">微信小程序&lt;/a>，在该小程序的基础上添加了部分新功能。我们最初设想的功能是物联网开发，利用传感器采集温度数据并上传至服务器，再通过小程序读取数据库中的数据，绘制温度变化曲线。前面数据采集这一部分交给了同学去做，我负责的是小程序这一部分内容。&lt;/p>
&lt;p>我构思的小程序功能是，第一个页面展示近一周的温度变化曲线，再添加一个按钮，跳转到另一个页面展示全部数据。由于目前硬件设备尚未开发，所以我利用原先的小程序当中的「家庭记账本」中的添加「添加收支」页面，对其进行改写，做了个添加新数据的功能，能够任意添加或删除数据。目前数据库采用的是小程序云开发默认的数据库。&lt;/p>
&lt;p>ECharts 是一个纯 Javascript 的图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。为了在小程序中实现数据可视化，ECharts 是一个不错的选择。幸运的是，目前有一个微信小程序版 ECharts 库可以直接使用：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/ecomfe/echarts-for-weixin target="_blank">ecomfe / echarts-for-weixin&lt;/a>
&lt;/div>
&lt;div class="description">ECharts 的微信小程序版本&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #f1e05a">&lt;/span>
&lt;span class="language-name">JavaScript&lt;/span>
&lt;/div>
&lt;/div>
&lt;h2 id="根据静态数据绘制图像">&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/#根据静态数据绘制图像" class="anchor-link" aria-label="根据静态数据绘制图像">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>根据静态数据绘制图像&lt;/h2>
&lt;p>首先将该仓库下载下来，将仓库中的 &lt;code>ec-canvas&lt;/code> 文件夹存放在和 &lt;code>app.js&lt;/code> 同级的目录下。我要将 ECarts 插入到 temperature-list 页面中，所以在 &lt;code>temperature-list.json&lt;/code> 中引入该组件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;usingComponents&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;ec-canvas&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;../../ec-canvas/ec-canvas&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我想要实现的是绘制温度变化曲线，在仓库所给的示例程序中，有一个名为在 line 的例程，这一例程正好达到了我的要求，所以可以参考该例程进行编写。在 &lt;code>temperature-list.wxml&lt;/code> 中添加 ECharts 图表。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-0.png" alt="insert-echart-into-wechat-mini-app-0.png">&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;container&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">ec-canvas&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;mychart-dom-line&amp;#34;&lt;/span> &lt;span class="na">canvas-id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;mychart-line&amp;#34;&lt;/span> &lt;span class="na">ec&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ ec }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">ec-canvas&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 &lt;code>temperature-list.wxss&lt;/code> 中添加下面的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* pages/temperature-list/temperature-list.wxss */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">page&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">ec-canvas&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">ec-canvas&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">container&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">flex-direction&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">column&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">justify-content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">space-between&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-sizing&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">border-box&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">picker-pos&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-130&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">blueviolet&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后在 &lt;code>temperature-list.js&lt;/code> 中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// pages/temperature-list/temperature-list.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">echarts&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;../../ec-canvas/echarts.js&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">app&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">getApp&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">function&lt;/span> &lt;span class="nx">initChart&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">canvas&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">width&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">height&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">dpr&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">chart&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">echarts&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">canvas&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kc">null&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">width&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">height&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">devicePixelRatio&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">dpr&lt;/span> &lt;span class="c1">// new
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">canvas&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setChart&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">chart&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">option&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;近七日温度统计&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;center&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;#37A2DA&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">grid&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">containLabel&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">tooltip&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">trigger&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;axis&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">xAxis&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;category&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">boundaryGap&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;2020-07-05&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-06&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-07&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-08&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-09&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-10&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;2020-07-11&amp;#39;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// show: false
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">yAxis&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">x&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;center&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">min&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">max&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">37&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;value&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">splitLine&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">lineStyle&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;dashed&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// show: false
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">series&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;GuanQirui&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;line&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">smooth&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mf">36.6&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">36.5&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">chart&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setOption&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">option&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">chart&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">ec&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">onInit&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">initChart&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>编译后即可看到绘制的曲线图。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-1.png" alt="insert-echart-into-wechat-mini-app-1.png">&lt;span class="caption">※ 绘制的曲线&lt;/span>&lt;/p>
&lt;p>不过目前我使用的数据是静态的，直接存储在代码中，并不能够修改，也就无法根据实时数据绘制曲线。为了实现该功能，和「家庭记账本」一样，我使用到了小程序的云开发。这里我创建了一个名为 &lt;code>temp&lt;/code> 的集合，存储在这里的每一条记录，都需要包含姓名、温度、位置、日期这四个元素。&lt;/p>
&lt;h2 id="将数据上传至数据库">&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/#将数据上传至数据库" class="anchor-link" aria-label="将数据上传至数据库">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>将数据上传至数据库&lt;/h2>
&lt;p>我在显示温度变化曲线的页面添加一个按钮，点击能够跳转查看全部统计信息，点击右下角的加号按钮就能够添加新的数据到数据库中。这一部分功能的实现可以参考我之前的那一篇文章——《&lt;a href="http://localhost:1313/tech/computer/wechat-mini-app-development-toolbox/" target="_blank" rel="noopener">微信小程序课程后记&lt;/a>》，和「家庭记账本」的功能类似，这里不再赘述。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-2.png" alt="insert-echart-into-wechat-mini-app-2.png">&lt;span class="caption">※ 全部统计信息&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-3.png" alt="insert-echart-into-wechat-mini-app-3.png">&lt;span class="caption">※ 添加新数据&lt;/span>&lt;/p>
&lt;p>我们利用添加新数据的功能向数据库添加了几组新的数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-4.png" alt="insert-echart-into-wechat-mini-app-4.png">&lt;span class="caption">※ 数据库页面&lt;/span>&lt;/p>
&lt;h2 id="根据动态数据绘制图像">&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/#根据动态数据绘制图像" class="anchor-link" aria-label="根据动态数据绘制图像">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>根据动态数据绘制图像&lt;/h2>
&lt;p>接下来就是最为关键的部分——如何载入这些数据并绘制曲线。&lt;/p>
&lt;p>观察绘图的函数可知，绘图需要的变量只有三个——姓名、温度、日期。因此可以创建三个数组（&lt;code>name&lt;/code>、&lt;code>temperature&lt;/code>、&lt;code>date&lt;/code>）存放这三组数据。然后在 &lt;code>option&lt;/code> 中将原来的数组替换为现在的数组。&lt;/p>
&lt;p>从数据库获取数据很简单，如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">get&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">reverse&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">date&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果你直接按照这种方法，对上面的程序进行改写，编译后可以发现图像并没有出来，是一个只有坐标轴的空白图像。虽然我们获取到了数据库中的数据，但是图像并没有更新。所以我们需要设置图像为懒加载（&lt;code>lazyLoad: true&lt;/code>），并在页面加载的时候载入数据，再绘制图像。完整的代码如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// pages/temperature-list/temperature-list.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">echarts&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;../../ec-canvas/echarts.js&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">name&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">temperature&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">Chart&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">null&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">ec&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">lazyLoad&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temp&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">seeDetail&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">setTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">navigateTo&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;/pages/temperature-list-detail/temperature-list-detail&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">onLoad&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">options&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">echartsComponnet&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">selectComponent&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;#mychart-dom-line&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getData&lt;/span>&lt;span class="p">();&lt;/span> &lt;span class="c1">// 获取数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">getData&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 如果是第一次绘制
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="nx">Chart&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init_echarts&lt;/span>&lt;span class="p">();&lt;/span> &lt;span class="c1">// 初始化图表
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">}&lt;/span>&lt;span class="k">else&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setOption&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">Chart&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">// 更新数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 从数据库获取数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">get&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">reverse&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">date&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">date&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init_echarts&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 初始化图表
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">init_echarts&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">echartsComponnet&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nx">canvas&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">width&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">height&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 初始化图表
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">Chart&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">echarts&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">canvas&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kc">null&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">width&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">height&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setOption&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">Chart&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 注意这里一定要返回 chart 实例，否则会影响事件处理等
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">return&lt;/span> &lt;span class="nx">Chart&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">setOption&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">Chart&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">Chart&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">clear&lt;/span>&lt;span class="p">();&lt;/span> &lt;span class="c1">// 清除
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">Chart&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setOption&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getOption&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">//获取新数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">getOption&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 指定图表的配置项和数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">option&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;近七日温度统计（℃）&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;center&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;#37A2DA&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">grid&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">containLabel&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">tooltip&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">trigger&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;axis&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">xAxis&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;category&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">boundaryGap&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">date&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">yAxis&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">x&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;center&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">min&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">max&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">37&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;value&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">splitLine&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">lineStyle&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;dashed&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">series&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;line&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">smooth&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">option&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果在绘制完图像后，再添加新的数据，那么当前图像页面需要刷新才能显示新的数据。因此我还添加了一个刷新（&lt;code>refresh&lt;/code>）按钮：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 刷新数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">refresh&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">get&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">reverse&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">date&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">date&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temperature&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">temperature&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">init_echarts&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>完整的页面如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/insert-echart-into-wechat-mini-app-5.png" alt="insert-echart-into-wechat-mini-app-5.png">&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/insert-echart-into-wechat-mini-app/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/design-contest/">设计竞赛</category><category domain="https://guanqr.com/tags/mini-app/">小程序</category><category domain="https://guanqr.com/tags/wechat/">微信</category></item><item><title>
今日的朝阳终将东升</title><link>https://guanqr.com/life/films/the-bad-kids/</link><guid isPermaLink="true">https://guanqr.com/life/films/the-bad-kids/</guid><pubDate>Tue, 30 Jun 2020 09:47:39 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-bad-kids-0.jpg" alt="the-bad-kids-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>一周，我花了两天的时间看完了最近爆火的犯罪悬疑类网剧《隐秘的角落》，我觉得这部剧可以称得上是近些年制作最为精良的国产网剧。称之为精良，一是因为人物的形象刻画细致入微，剧中出现的每一个人物都有鲜明的特点，有血有肉，没有出现大众化的形象；二是因为场景的布置、台词的设计、烘托氛围的配乐都恰到好处。在大量古装玄幻爱情国产剧充斥的今天，《隐秘的角落》确实让人眼前一亮。&lt;/p>
&lt;p>这部剧改编自紫金陈的小说《坏小孩》。紫金陈是浙大的校友。在刚入学的时候，我就看过他基于紫金港校区写的一篇恐怖类型的小说《浙大夜惊魂》——浙大学子代代相传的小说。因为《坏小孩》是校友的作品，这部剧自然在校论坛中成为了很热门的话题，NexusHD 中相关资源做种的人也有很多。这样一来，我，作为一个很少看国产剧的人，也对这部剧产生了浓浓的兴趣，想看一看这部剧是否真的实至名归。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-bad-kids-1.png" alt="the-bad-kids-1.png">&lt;span class="caption">※ NexusHD 相关资源做种情况&lt;/span>&lt;/p>
&lt;p>该剧中最让我喜欢的角色是张东升。在事业上，浙大数学系毕业，拥有聪明的才智，却只是少年宫的一名教工。在家庭上，岳父岳母对自己不满，女友出轨，面临着分手。生活的残酷将他带向人性恶的那一面。「我还有机会吗？」是他对即将受到自己「审判」的人的最后挽留。在形象方面，他每天穿着白色衬衫，带着眼镜，一幅众人像，但从他的眼神中，能看得到他对人的仇恨和坚定的内心。虽然说他称得上是一个优秀的「斯文败类」，但我看得出他的心中还有一丝丝的「善」，这一丝丝的「善」可以从普普受到惊吓犯哮喘的时候张东升变得惊慌失措看出。他无意杀害善良的小孩，内心的内疚在普普死亡后涌上心头。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-bad-kids-2.jpg" alt="the-bad-kids-2.jpg">&lt;/p>
&lt;p>如果要让我选出剧中最让我讨厌的角色，那我一定会选择朱朝阳。可能是因为年龄小，演戏经验不足的元素，亦或是因为剧中的形象就是这样，朱朝阳的面部表情似乎很少会有变化。稚嫩的脸庞却丝毫没有流露那个年龄本应有的童真。家庭的支离破碎和在生活中饱受歧视，让他的心灵过度早熟，做事深思熟虑，令人惊恐。他会撒谎，那一双无辜的眼神让人无法确认他什么时候说的是真话，什么时候说的是假话。如果不是他一步步地错下去，任由心中的恶之花生长，或许他的朋友和他的亲人也不会失去生命。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-bad-kids-3.jpg" alt="the-bad-kids-3.jpg">&lt;/p>
&lt;p>据说剧中的警察老陈是一个原创的角色。这一角色大概是剧中最为「善」的存在。他作为警察，是正义一方的代表。但他又在严良的人生中充当了父亲的角色。他因为严良父亲一事心中内疚，知道严良不想继续留在福利院，毅然决定成为他的监护人。故事的最后，他为了救严良而献出了自己的生命。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-bad-kids-4.jpg" alt="the-bad-kids-4.jpg">&lt;/p>
&lt;p>上一次看的国产剧，大概是在大一的时候看的青春校园剧《致我们单纯的小美好》。虽然说近几年播出了许多很火的剧集，每天各大社交媒体热搜不断，但我并没有关注过。这些剧集有很高热度，有一部分原因是参演的演员是当红的「小鲜肉」，就算他们缺少演员的职业素养，只要出现他们的镜头，一定会引起众多粉丝的高潮。如此火爆的剧集，真正的制作水平已经不重要、《隐秘的角落》中，参演的最为著名的演员是秦昊和王景春，剧中并没有光鲜亮丽的角色，也没有当红「小鲜肉」的参演，却成为了年度最佳剧集，很不容易。&lt;/p>
&lt;p>如今网剧的制作水平已经比几年前大幅提升了不少。工作之余，人们接触网络的时间要比接触电视的时间多很多。网剧的剧情发展较电视剧更为自由，因此能够挖掘出社会中更有深度的故事。得益于《隐秘的角落》的成功，网剧将走向更为多元化的时代。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/the-bad-kids/" target="_blank" rel="noopener">https://guanqr.com/life/films/the-bad-kids/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/family/">家庭</category></item><item><title>
畅游 Minecraft 浙大</title><link>https://guanqr.com/life/school/minecraft-zhejiang-university/</link><guid isPermaLink="true">https://guanqr.com/life/school/minecraft-zhejiang-university/</guid><pubDate>Sat, 27 Jun 2020 22:30:54 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-0.png" alt="minecraft-zhejiang-university-0.png">&lt;span class="caption">※ 启真湖与管院楼&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">随&lt;/span>着六月的结束，又一年的毕业季降临。今年的毕业季虽说充满了遗憾，但也有不少新鲜的事物诞生。最大的特定就是，有很多学校都利用 Minecraft 游戏还原了校园，甚至在游戏中举办了毕业典礼。我们学校也对紫金港校区进行了还原，甚至还原了大西区的一些在计划中但尚未建设的建筑。这一项目从五月初启动，不仅有经验丰富的老师带队，还有网易提供专属服务器。&lt;/p>
&lt;p>很久没玩过 Minecraft 了。因为学业繁重，除了在空闲时间里玩一玩手机游戏，再也没有什么时间进入 Minecraft。第一次接触到 Minecraft，是在初中一年级的时候，那时候网易还没有代理 Minecraft，mojäng 推出的最新版还是经典的 v1.4.7。当时最为快乐的时光就是在优酷上看籽岷的游戏视频。时隔这么多年，当年的那些制作游戏视频的作者，有的淡出了人们的视线，有的依然在坚持。&lt;/p>
&lt;p>虽然我尚未毕业，但也在一年前离开了紫金港，对原来生活过的地方甚是怀念。趁着这次机会，我进入到了浙大服务器，沉浸在虚拟与现实融合的奇妙感觉之中。很多人登录到游戏中，肯定要做的有两件事，第一件事是回到自己曾经住过的宿舍，第二件事是来到管院楼顶，跳跃至启真湖中。&lt;/p>
&lt;p>为了增加游戏乐趣，策划者在地图中添加了十六个彩蛋，如果你能够将全部彩蛋集齐的话，能够获得一份纪念品。尽管有很多外校的同学进入浙大服务器，不过，也只有我们在紫金港生活过的人，才懂得彩蛋的含义吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-1.png" alt="minecraft-zhejiang-university-1.png">&lt;span class="caption">※ 云峰的樱花树&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-2.png" alt="minecraft-zhejiang-university-2.png">&lt;span class="caption">※ 启真湖上赛龙舟&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-3.png" alt="minecraft-zhejiang-university-3.png">&lt;span class="caption">※ 我们都是勇仔&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-4.png" alt="minecraft-zhejiang-university-4.png">&lt;span class="caption">※ 线上毕业典礼&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-5.png" alt="minecraft-zhejiang-university-5.png">&lt;span class="caption">※ 西区大草坪的夜晚&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/minecraft-zhejiang-university-6.png" alt="minecraft-zhejiang-university-6.png">&lt;span class="caption">※ 热闹的服务器&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/minecraft-zhejiang-university/" target="_blank" rel="noopener">https://guanqr.com/life/school/minecraft-zhejiang-university/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/minecraft/">Minecraft</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
通过网页控制 ESP8266 模块 LED</title><link>https://guanqr.com/tech/computer/control-esp8266-through-web-page/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/control-esp8266-through-web-page/</guid><pubDate>Fri, 19 Jun 2020 14:08:17 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/computer/control-esp8266-through-web-page/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>嵌入式系统课程的期末设计项目是基于 ESP8266 模块的，在上个月月初的时候，我写了一篇《&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/">基于 ESP8266 模块的 MicroPython 入门操作&lt;/a>》，当时还没对 ESP8266 模块进行深入探索。因为在课程中老师没有讲解过关于 ESP8266 模块的开发，期末设计需要完全依靠我们自己进行摸索，而且悲剧的是，我并没有杜邦线、面包板、传感器等基本元器件，所以仅凭一块小板子进行物联网相关功能的开发有些困难。不过好在期末设计可以从以下几项中任选一项或多项做：&lt;/p>
&lt;ul>
&lt;li>利用模块的 AD 通道，设计对外部信号进行模拟量采集；&lt;/li>
&lt;li>利用模块的 IO 口，设计对 1-wire 总线传感器采集数据；&lt;/li>
&lt;li>编制一个网页，在网页上对采集到的信号输出显示；&lt;/li>
&lt;li>编制一个网页，通过该网页控制 LED 灯的工作状态；&lt;/li>
&lt;li>将采集到的信号传送到手机上，建议使用 MQTT 协议；&lt;/li>
&lt;li>通过手机控制 LED 灯的状态，建议使用 MQTT 协议；&lt;/li>
&lt;li>在云端建立数据模型和服务，对物联数据进行分析；&lt;/li>
&lt;li>用其他方式（如 aduino）搭建物联系统和编程。&lt;/li>
&lt;/ul>
&lt;p>在使用 WebREPL 终端进行编程或者默认上传 Python 脚本的方式进行编程和程序调试的话，存在一定的弊端。特别是在 WebREPL，最大的缺点是代码不能复制，需要逐行输入。这样一来，如果输入一个很长的循环语句，且存在代码缩进，最终提示执行错误的话，又需要花费很长的时间重新编写。在大一的「电子工程训练」课程中，我接触过 Arduino 的开发，基本的操作还未忘记。因此我就考虑使用 Arduino IDE 编程，编制一个网页，通过该网页控制 LED 灯的工作状态。Arduino IDE 需要使用 C/C++ 语言编程，因此就和 MicroPython 没有什么关系了。&lt;/p>
&lt;h2 id="正文">&lt;a href="https://guanqr.com/tech/computer/control-esp8266-through-web-page/#正文" class="anchor-link" aria-label="正文">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>正文&lt;/h2>
&lt;h3 id="配置">&lt;a href="https://guanqr.com/tech/computer/control-esp8266-through-web-page/#配置" class="anchor-link" aria-label="配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配置&lt;/h3>
&lt;p>首先在 Arduino 官网下载编译器。打开编译器后，点击菜单栏中的「文件」菜单，进入「首选项」设置。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-11.png" alt="esp8266-11.png">&lt;/p>
&lt;p>在附加开发板管理器网址汇总添加有关 ESP8266 的内容：&lt;/p>
&lt;pre tabindex="0">&lt;code>http://arduino.esp8266.com/stable/package_esp8266com_index.json&amp;gt;
&lt;/code>&lt;/pre>&lt;p>然后进入「工具」菜单，在「开发板」中选择进入「开发板管理器」，搜索 &lt;code>esp8266&lt;/code> 并下载安装。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-12.png" alt="esp8266-12.png">&lt;/p>
&lt;p>接着将开发板接入计算机。因为我是用的是 NodeMCU 开发板，如下图所示，在工具菜单中的「开发板」一栏选择的是 NodeMCU1.0(ESP-12E)，「端口」一栏选择开发板接入的端口，我这里是 COM3。&lt;/p>
&lt;p>为了验证当前设置是否正确，可以在「文件」菜单的「示例」中找到有关 ESP8266 的例程，比如控制 LED 闪烁的 Blink 程序，编译上传，成功运行则证明设置正确。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-13.png" alt="esp8266-13.png">&lt;/p>
&lt;h3 id="编程">&lt;a href="https://guanqr.com/tech/computer/control-esp8266-through-web-page/#编程" class="anchor-link" aria-label="编程">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>编程&lt;/h3>
&lt;p>首先编写一个简单的网页。设置两个超链接，一个控制 LED 点亮，链接跳转至 &lt;code>/gpio/0&lt;/code>，一个控制 LED 熄灭，链接跳转至 &lt;code>/gpio/1&lt;/code>。再添加一个状态显示区域，显示当前 LED 的亮灭情况，具体的网页画面如下图所示（图中遮盖了个人信息）。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-14.png" alt="esp8266-14.png">&lt;/p>
&lt;p>在程序中，需要将该网页存放进一个字符串中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c++" data-lang="c++">&lt;span class="line">&lt;span class="cl">&lt;span class="n">String&lt;/span> &lt;span class="n">s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s">&amp;#34;HTTP/1.1 200 OK&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">Content-Type: text/html&lt;/span>&lt;span class="se">\r\n\r\n&lt;/span>&lt;span class="s">&amp;lt;!DOCTYPE HTML&amp;gt;&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">&amp;lt;html&amp;gt;&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">&amp;lt;p style=&amp;#39;color:#666; font-size:40px; text-align:center;&amp;#39;&amp;gt;状态：&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="s">&amp;#34;&amp;lt;head&amp;gt;&amp;lt;meta http-equiv=&amp;#34;&amp;#34;Content-Type&amp;#34;&amp;#34; content=&amp;#34;&amp;#34;text/html; charset=utf-8&amp;#34;&amp;#34; /&amp;gt;&amp;lt;/head&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">val&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">?&lt;/span>&lt;span class="s">&amp;#34;LED 已关闭&amp;lt;/p&amp;gt;&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="s">&amp;#34;LED 已开启&amp;lt;/p&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="s">&amp;#34;&amp;lt;p style=&amp;#39;font-size:40px; text-align:center;&amp;#39;&amp;gt;&amp;lt;a style=&amp;#39;color:#666;&amp;#39; href=&amp;#39;/gpio/0&amp;#39;&amp;gt;开启 LED&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;p style=&amp;#39;font-size:40px; text-align:center;&amp;#39;&amp;gt;&amp;lt;a style=&amp;#39;color:#666;&amp;#39; href=&amp;#39;/gpio/1&amp;#39;&amp;gt;关闭 LED&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;p style=&amp;#39;color:#666; font-size:40px; text-align:center;&amp;#39;&amp;gt;&amp;lt;NAME&amp;gt; &amp;lt;ID&amp;gt; 嵌入式系统与应用课程设计&amp;lt;/p&amp;gt;&amp;lt;/html&amp;gt;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>程序的运行步骤是，先连接手机提供的热点，通过 ID 和密码进行连接，得到一个固定的 IP 地址。我们需要用这个 IP 地址来访问设计的网页。完整的程序如下所示，经编译测试，功能运行良好。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c++" data-lang="c++">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;ESP8266WiFi.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">const&lt;/span> &lt;span class="kt">char&lt;/span>&lt;span class="o">*&lt;/span> &lt;span class="n">ssid&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s">&amp;#34;&amp;lt;SSID&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// 替换为自己的热点 ID
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="k">const&lt;/span> &lt;span class="kt">char&lt;/span>&lt;span class="o">*&lt;/span> &lt;span class="n">password&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s">&amp;#34;&amp;lt;PASSWORD&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// 替换为自己的热点密码
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Create an instance of the server
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// specify the port to listen on as an argument
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">WiFiServer&lt;/span> &lt;span class="nf">server&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">80&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">setup&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">begin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">9600&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// prepare GPIO2
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">pinMode&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">OUTPUT&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">digitalWrite&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Connect to WiFi network
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;Connecting to &amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ssid&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">begin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ssid&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">password&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">struct&lt;/span> &lt;span class="nc">ip_info&lt;/span> &lt;span class="n">info&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">IP4_ADDR&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">ip&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">192&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">168&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">43&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">119&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//替换为自己的热点 IP
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">IP4_ADDR&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">gw&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">192&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">168&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">43&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//替换为自己的热点网关 IP
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">IP4_ADDR&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">netmask&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">wifi_station_dhcpc_stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">wifi_set_ip_info&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">STATION_IF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">info&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//设置 sta 模式的 IP
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">status&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="n">WL_CONNECTED&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;.&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;WiFi connected&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Start the server
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">server&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">begin&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;Server started @ &amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Print the IP address &amp;amp; instructions
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">localIP&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;To control GPIO, open your web browser.&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;To set GPIO 0 high, type:&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">localIP&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/1&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;To set GPIO 0 low, type:&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">localIP&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/0&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;To toggle GPIO 0, type:&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WiFi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">localIP&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/0&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">loop&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Check if a client has connected
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">WiFiClient&lt;/span> &lt;span class="n">client&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">server&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">available&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">client&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Read the first line of the request
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">String&lt;/span> &lt;span class="n">req&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">readStringUntil&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sc">&amp;#39;\r&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">req&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">flush&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Match the request
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">val&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">req&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">indexOf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/0&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">req&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">indexOf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/1&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">req&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">indexOf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;/gpio/4&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">digitalRead&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c1">// &amp;lt;&amp;lt;&amp;lt;&amp;lt;&amp;lt; Edit: insert /gpio/3 lines after this line.
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;invalid request&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;HTTP/1.1 404&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Set GPIO2 according to the request
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">digitalWrite&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">val&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">flush&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Prepare the response
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">String&lt;/span> &lt;span class="n">s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s">&amp;#34;HTTP/1.1 200 OK&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">Content-Type: text/html&lt;/span>&lt;span class="se">\r\n\r\n&lt;/span>&lt;span class="s">&amp;lt;!DOCTYPE HTML&amp;gt;&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">&amp;lt;html&amp;gt;&lt;/span>&lt;span class="se">\r\n&lt;/span>&lt;span class="s">&amp;lt;p style=&amp;#39;color:#666; font-size:40px; text-align:center;&amp;#39;&amp;gt;状态：&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">+=&lt;/span>&lt;span class="s">&amp;#34;&amp;lt;head&amp;gt;&amp;lt;meta http-equiv=&amp;#34;&amp;#34;Content-Type&amp;#34;&amp;#34; content=&amp;#34;&amp;#34;text/html; charset=utf-8&amp;#34;&amp;#34; /&amp;gt;&amp;lt;/head&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">val&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">?&lt;/span>&lt;span class="s">&amp;#34;LED 已关闭&amp;lt;/p&amp;gt;&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="s">&amp;#34;LED 已开启&amp;lt;/p&amp;gt;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="s">&amp;#34;&amp;lt;p style=&amp;#39;font-size:40px; text-align:center;&amp;#39;&amp;gt;&amp;lt;a style=&amp;#39;color:#666;&amp;#39; href=&amp;#39;/gpio/0&amp;#39;&amp;gt;开启 LED&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;p style=&amp;#39;font-size:40px; text-align:center;&amp;#39;&amp;gt;&amp;lt;a style=&amp;#39;color:#666;&amp;#39; href=&amp;#39;/gpio/1&amp;#39;&amp;gt;关闭 LED&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;p style=&amp;#39;color:#666; font-size:40px; text-align:center;&amp;#39;&amp;gt;GuanQirui 嵌入式系统与应用课程设计&amp;lt;/p&amp;gt;&amp;lt;/html&amp;gt;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// Send the response to the client
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">client&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Serial&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;Client disonnected&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// The client will actually be disconnected
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">// when the function returns and &amp;#39;client&amp;#39; object is detroyed
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/control-esp8266-through-web-page/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/control-esp8266-through-web-page/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/internet-of-things/">物联网</category><category domain="https://guanqr.com/tags/network/">网络</category></item><item><title>
非同凡想</title><link>https://guanqr.com/life/ideas/think-different/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/think-different/</guid><pubDate>Sun, 14 Jun 2020 10:21:05 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/think-different.png" alt="think-different-0.png">&lt;/p>
&lt;blockquote class="quote">
&lt;p>苹果品牌代表的，是那些跳出固有模式进行思考的人，那些想用计算机帮助自己改变世界的人。&lt;/p>
&lt;p style="text-align:right">——《史蒂夫·乔布斯传》&lt;/p>&lt;/blockquote>
&lt;p>在 b 站无意间点开了乔布斯 2007 年发布第一款 iPhone 手机的发布会视频。现在人们使用着不同品牌推出的各式各样的智能手机，享受着越来越快的无线网络带来的便捷生活……很少会有人回忆起那一年，当人们还在用着诺基亚砸核桃的时候，一场技术革命诞生了。那是一场推动智能手机发展的发布会，那是一场注定要载入史册的发布会。&lt;/p>
&lt;p>乔布斯时代的苹果公司，是推进技术变革的领头羊。从最开始的滑动解锁、多点触控、视频与音乐播放、应用商店，到后来的陀螺仪、追求真实光线采集的摄像镜头、玻璃与不锈钢材质。苹果公司的每一款产品，都是先进科技的集成之作。与其说是一款产品，不如说是一款艺术品。因为乔布斯懂得艺术，追求「大繁归于至简」的理念。他会尽最大努力地将自己想要呈现的完美之作展现出来——比如白色，到底使用哪种白色，比如圆角，圆角的度数确定为多少——他不会忽略任何一点瑕疵。&lt;/p>
&lt;p>后乔布斯时代的苹果公司，逐步从技术发展与创新的带领着成为了追随者……而苹果手机也逐步从完美艺术品神坛跌落。就拿最简单的例子来说，iPhone 11 层层凸起的镜头，我相信以乔布斯的性格，宁可把镜头换成单镜头，也不会妥协现在的设计方案，因为这破坏了设计的完美。乔布斯会通过自己的现实扭曲力场，促使团队设计出更加完美的镜头结构，从而解决镜头凸起的问题。这也是库克时代的苹果公司所缺少的精神。&lt;/p>
&lt;p>不可否认的是，苹果公司的产品依然是绝佳的艺术品。美观的用户界面，流畅的响应动画，以及苹果独特的生态系统，让苹果公司依然领先于其他品牌。库克时代的苹果向市场妥协也是必然的。手机必须那么小的屏幕，平板不能再配上一支笔……当年乔布斯的这些理念，只符合那个时代。现在如果依然坚持如此，就是一种错误的决策，越来越大的屏幕和越来越多功能的平板电脑是时代发展的需要。&lt;/p>
&lt;p>初中的时候，我拥有了一款 iPod Touch 4，玻璃屏幕，光滑如镜面的不锈钢机身，我第一次见到如此完美的科技产品。当时使用苹果产品的人还没有现在这么多，系统也比现在更为封闭，因此系统越狱是每一个苹果用户的必需工作，我也不断探索着 iOS 系统的各种功能与设计，如何自己修改图标、透明度、如何加入各种翻页效果……我还记得当年我会认认真真看完每一场苹果发布会，关注每一款新产品的创新。&lt;/p>
&lt;p>但是现在，我逐渐从一个果粉，转变成了一名路人。每一年的发布会，我相信很多人都希望苹果公司能带来哪些黑科技，然而等来的只是一次又一次地失望。但是很多人还在等待，还在期待着苹果的再一次创新。我希望，苹果能再一次推动智能时代的发展，就像 1997 年苹果公司的广告词一样——Think Different，非同凡想！&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/think-different/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/think-different/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/apple/">苹果</category><category domain="https://guanqr.com/tags/creativity/">创造力</category></item><item><title>
自定义 Hugo Shortcodes 简码</title><link>https://guanqr.com/tech/website/hugo-shortcodes-customization/</link><guid isPermaLink="true">https://guanqr.com/tech/website/hugo-shortcodes-customization/</guid><pubDate>Sat, 06 Jun 2020 19:28:42 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">目&lt;/span>前我的博客采用 Hugo 框架，使用 Markdown 进行写作。Markdown 语法的特点是简洁，但有时我们在写作的过程中需要插入一些特殊的样式，然而 Markdown 并没有相对应的语法，我们就不得不额外插入一些 HTML 语言。Hugo 提供了简码（Shortcodes）的功能，我们事先设定好某种样式的模板和对应的简码，当你需要插入这种样式的时候，直接使用简码插入，Hugo 能够自动将其转化为 HTML 语言。这样便节省了书写大量繁琐的 HTML 语言的时间。&lt;/p>
&lt;p>Hugo 在其官网上介绍了&lt;a href="https://gohugo.io/content-management/shortcodes/" target="_blank" rel="noopener">自带的一些简码的形式&lt;/a>和&lt;a href="https://gohugo.io/templates/shortcode-templates/" target="_blank" rel="noopener">自定义简码的方法&lt;/a>。对于官方自带简码的介绍和如何插入简码，请阅读上述的两篇文章，这里不再赘述。下面我来分享一些我的博客目前使用的自定义简码。需要注意的是，部分简码需要搭配 MemE 主题使用，如果你使用的是其他主题，可能需要做适当的修改。&lt;/p>
&lt;h2 id="align">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#align" class="anchor-link" aria-label="align">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>align&lt;/h2>
&lt;p>这个简码的功能是设定文字的位置（居左、居中、居右、两端对齐等等），支持的样式基于 CSS 语法。你需要在 &lt;code>~/layouts/shortcodes/&lt;/code> 下创建 &lt;code>align.html&lt;/code> 文件，其内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/align.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text-align:{{ index .Params 0 }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ index .Params 1 | markdownify }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体简码和样式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">align&lt;/span> &lt;span class="na">left&lt;/span> &lt;span class="err">&amp;#34;&lt;/span>&lt;span class="na">文字居左&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p style="text-align:left">文字居左&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">align&lt;/span> &lt;span class="na">center&lt;/span> &lt;span class="err">&amp;#34;&lt;/span>&lt;span class="na">文字居中&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p style="text-align:center">文字居中&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">align&lt;/span> &lt;span class="na">right&lt;/span> &lt;span class="err">&amp;#34;&lt;/span>&lt;span class="na">文字居右&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p style="text-align:right">文字居右&lt;/p>
&lt;h2 id="github">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#github" class="anchor-link" aria-label="github">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>github&lt;/h2>
&lt;p>这个简码的功能是插入 GitHub 仓库。有时候我们会在文中分享某个 GitHub 仓库，但如果只是放一个超链接，样式有些单一，不能吸引读者的注意力。所以我模仿 GitHub 仓库的形式写了这个简码。首先创建 &lt;code>github.html&lt;/code> 文件，内容如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/github.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;github&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;logo&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ replace $.Site.Data.SVG.repository &amp;#34;icon&amp;#34; &amp;#34;icon github-icon&amp;#34; | safeHTML }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;name&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">{{&lt;/span> &lt;span class="err">.&lt;/span>&lt;span class="na">Get&lt;/span> &lt;span class="err">&amp;#34;&lt;/span>&lt;span class="na">link&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="err">}}&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .Get &amp;#34;name&amp;#34; }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .Get &amp;#34;description&amp;#34; }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;language&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;language-color&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;background-color: {{ .Get &amp;#34;&lt;/span>&lt;span class="na">color&lt;/span>&lt;span class="err">&amp;#34;&lt;/span> &lt;span class="err">}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;language-name&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .Get &amp;#34;language&amp;#34; }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后添加自定义 CSS 样式。在 &lt;code>~/assets/scss/custom/_custom.scss&lt;/code> 文件中添加如下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nc">.github&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">low&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-radius&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ni">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.github-icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-right&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">fill&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">high&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">transition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">all&lt;/span> &lt;span class="mf">.5&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.name&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">primary&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.description&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">high&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-align&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">justify&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">transition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">all&lt;/span> &lt;span class="mf">.5&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.language-color&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.75&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.75&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-radius&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.language-name&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">high&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">transition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">all&lt;/span> &lt;span class="mf">.5&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后需要在 &lt;code>~/data/SVG.toml&lt;/code> 文件中插入图标：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/data/SVG.toml&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># GitHub Icon&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">repository&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 16 16&amp;#34;&amp;gt;&amp;lt;path fill-rule=&amp;#34;evenodd&amp;#34; clip-rule=&amp;#34;evenodd&amp;#34; d=&amp;#34;M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>你需要在简码中填写仓库名 &lt;code>name&lt;/code>，仓库链接 &lt;code>link&lt;/code>，仓库描述 &lt;code>description&lt;/code>，代码语言 &lt;code>language&lt;/code>，代码语言对应的颜色 &lt;code>color&lt;/code>。&lt;/p>
&lt;p>具体简码和样式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">github&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;Organic-Carbon-Estimating&amp;#34;&lt;/span> &lt;span class="na">link&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://github.com/guanqr/Organic-Carbon-Estimating&amp;#34;&lt;/span> &lt;span class="na">description&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;A program used in estimating organic carbon stocks in oceans. 计算指定海域的有机碳存量，包括颗粒有机碳与溶解有机碳，数据依赖于 NASA 中分辨率成像光谱仪 MODIS 遥感产品。&amp;#34;&lt;/span> &lt;span class="na">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="ni">#e16737&lt;/span>&lt;span class="s">&amp;#34;&lt;/span> &lt;span class="na">language&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;MATLAB&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/Organic-Carbon-Estimating target="_blank">Organic-Carbon-Estimating&lt;/a>
&lt;/div>
&lt;div class="description">A program used in estimating organic carbon stocks in oceans. 计算指定海域的有机碳存量，包括颗粒有机碳与溶解有机碳，数据依赖于 NASA 中分辨率成像光谱仪 MODIS 遥感产品。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #e16737">&lt;/span>
&lt;span class="language-name">MATLAB&lt;/span>
&lt;/div>
&lt;/div>
&lt;h2 id="notice">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#notice" class="anchor-link" aria-label="notice">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>notice&lt;/h2>
&lt;p>之前在使用 Hexo 的 NexT 主题的时候，主题中自带了很多标签样式，其中就有一个类似的提示标签。在 Hugo 中，也有人写了一个类似的简码：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/martignoni/hugo-notice target="_blank">martignoni / hugo-notice&lt;/a>
&lt;/div>
&lt;div class="description">A Hugo theme component to display nice notices&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #e34c26">&lt;/span>
&lt;span class="language-name">HTML&lt;/span>
&lt;/div>
&lt;/div>
&lt;p>如果你在 MenM 主题中直接使用这个短代码的话，其样式会有一些错误。因此我对原有的代码进行了小小的修改，改成了和 Hexo 的 NexT 主题 Note 标签类似的样式。&lt;/p>
&lt;p>首先创建 &lt;code>notice.html&lt;/code> 文件，内容如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/notice.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!--https://github.com/martignoni/hugo-notice--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $noticeType := .Get 0 -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $raw := (markdownify .Inner | chomp) -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $block := findRE &amp;#34;(?is)^&lt;span class="err">&amp;lt;&lt;/span>(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b&amp;#34; $raw 1 -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ $icon := (replace (index $.Site.Data.SVG $noticeType) &amp;#34;icon&amp;#34; &amp;#34;icon notice-icon&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;notice {{ $noticeType }}&amp;#34;&lt;/span> &lt;span class="err">{{&lt;/span> &lt;span class="na">if&lt;/span> &lt;span class="na">len&lt;/span> &lt;span class="err">.&lt;/span>&lt;span class="na">Params&lt;/span> &lt;span class="err">|&lt;/span> &lt;span class="na">eq&lt;/span> &lt;span class="na">2&lt;/span> &lt;span class="err">}}&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .Get 1 }}&amp;#34;&lt;/span> &lt;span class="err">{{&lt;/span> &lt;span class="na">end&lt;/span> &lt;span class="err">}}&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;notice-title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ $icon | safeHTML }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- if or $block (not $raw) }}{{ $raw }}{{ else }}&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ $raw }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ end -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后添加自定义 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nc">.notice&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="ni">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-radius&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">p&lt;/span>&lt;span class="nd">:last-child&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.8&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-warning&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-info&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-note&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-tip&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">[&lt;/span>&lt;span class="nt">data-theme&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;dark&amp;#34;&lt;/span>&lt;span class="o">]&lt;/span> &lt;span class="nc">.notice&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-warning&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-info&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-note&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.notice-tip&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">background&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsla&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后同样需要在 &lt;code>~/data/SVG.toml&lt;/code> 文件中插入图标：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/data/SVG.toml&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Notice Icon&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">notice-warning&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 576 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M570 440c18 32-5 72-42 72H48c-37 0-60-40-42-72L246 24c19-32 65-32 84 0l240 416zm-282-86a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">notice-info&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 512 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">notice-note&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 512 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">notice-tip&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 512 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体简码和样式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">notice&lt;/span> &lt;span class="na">notice-warning&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-warning" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">notice&lt;/span> &lt;span class="na">notice-info&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-info" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">notice&lt;/span> &lt;span class="na">notice-note&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">notice&lt;/span> &lt;span class="na">notice-tip&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;h2 id="simple-notice">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#simple-notice" class="anchor-link" aria-label="simple-notice">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>simple-notice&lt;/h2>
&lt;p>simple-notice 是 notice 的简化版本。代码构成和 notice 基本一致，其样式参考了 &lt;a href="https://web.dev/" target="_blank" rel="noopener">web.dev&lt;/a> 的设计。虽然说 simple-notice 和 notice 都是四种配色，但颜色的深浅不同。主要是因为，simple-notice 的文字也带有相应的颜色，如果采用 notice 的配色，明模式下颜色过浅，暗模式下颜色过深，不易识别。&lt;/p>
&lt;p>创建 &lt;code>simple-notice.html&lt;/code> 文件，内容如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/notice.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!--https://github.com/martignoni/hugo-notice--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $noticeType := .Get 0 -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $raw := (markdownify .Inner | chomp) -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{- $block := findRE &amp;#34;(?is)^&lt;span class="err">&amp;lt;&lt;/span>(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b&amp;#34; $raw 1 -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ $icon := (replace (index $.Site.Data.SVG $noticeType) &amp;#34;icon&amp;#34; &amp;#34;icon simple-notice-icon&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;simple-notice {{ $noticeType }}&amp;#34;&lt;/span> &lt;span class="err">{{&lt;/span> &lt;span class="na">if&lt;/span> &lt;span class="na">len&lt;/span> &lt;span class="err">.&lt;/span>&lt;span class="na">Params&lt;/span> &lt;span class="err">|&lt;/span> &lt;span class="na">eq&lt;/span> &lt;span class="na">2&lt;/span> &lt;span class="err">}}&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .Get 1 }}&amp;#34;&lt;/span> &lt;span class="err">{{&lt;/span> &lt;span class="na">end&lt;/span> &lt;span class="err">}}&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;simple-notice-title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ $icon | safeHTML }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- if or $block (not $raw) }}{{ $raw }}{{ else }}&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ $raw }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ end -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>添加自定义 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nc">.simple-notice&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="ni">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">transition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">all&lt;/span> &lt;span class="mf">.5&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">p&lt;/span>&lt;span class="nd">:last-child&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.8&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="mf">.8&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-warning&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-info&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">45&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">45&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">45&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">45&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">40&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">45&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-note&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">210&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">210&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">210&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">210&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">210&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-tip&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">[&lt;/span>&lt;span class="nt">data-theme&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;dark&amp;#34;&lt;/span>&lt;span class="o">]&lt;/span> &lt;span class="nc">.simple-notice&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-warning&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-info&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">70&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-note&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.simple-notice-tip&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.simple-notice-title&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration-color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">hsl&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="mi">65&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在 &lt;code>~/data/SVG.toml&lt;/code> 文件中插入图标：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/data/SVG.toml&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Notice Icon&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">simple-notice-warning&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 512 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">simple-notice-note&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 192 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">simple-notice-info&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 192 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">simple-notice-tip&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;svg xmlns=&amp;#34;http://www.w3.org/2000/svg&amp;#34; class=&amp;#34;icon&amp;#34; viewBox=&amp;#34;0 0 512 512&amp;#34;&amp;gt;&amp;lt;path d=&amp;#34;M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z&amp;#34;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体简码和样式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">simple-notice&lt;/span> &lt;span class="na">simple-notice-warning&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">simple-notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="simple-notice simple-notice-warning" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 512 512">&lt;path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">simple-notice&lt;/span> &lt;span class="na">simple-notice-info&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">simple-notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="simple-notice simple-notice-info" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 192 512">&lt;path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">simple-notice&lt;/span> &lt;span class="na">simple-notice-note&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">simple-notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="simple-notice simple-notice-note" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 192 512">&lt;path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">simple-notice&lt;/span> &lt;span class="na">simple-notice-tip&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">simple-notice&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="simple-notice simple-notice-tip" >
&lt;div class="simple-notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon simple-notice-icon" viewBox="0 0 512 512">&lt;path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/>&lt;/svg>&lt;/div>&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/div>
&lt;h2 id="quote">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#quote" class="anchor-link" aria-label="quote">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>quote&lt;/h2>
&lt;p>这个简码是用来替代 Mardown 默认的引用样式。我常常将这个简码插入到随笔的引用中。首先创建 &lt;code>quote.html&lt;/code> 文件，其内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/quote.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">blockquote&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;quote{{ range .Params }} {{ . }}{{ end }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $content := .Inner | markdownify -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- if not (strings.HasPrefix $content &amp;#34;&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ printf `&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>%s&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>` $content | safeHTML }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- else }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $content }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- end -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">blockquote&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后添加自定义 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">blockquote&lt;/span>&lt;span class="nc">.quote&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="ni">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nd">::before&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">content&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;“&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">low&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;JetBrains Mono&amp;#39;&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="s1">&amp;#39;Amstelvar&amp;#39;&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="s1">&amp;#39;Noto Serif SC&amp;#39;&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="ni">serif&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">line-height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nc">.en&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">p&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">line-height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.618&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-align&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">left&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">hyphens&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">-webkit-hyphens&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">-moz-hyphens&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体简码和样式如下：&lt;/p>
&lt;p>中文：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">quote&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">quote&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;blockquote class="quote">
&lt;p>十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。&lt;/p>&lt;/blockquote>
&lt;p>英文：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">quote&lt;/span> &lt;span class="na">en&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">To see a world in a grain of sand. And a heaven in a wild flower. Hold infinity in the palm of your hand. And eternity in an hour.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">quote&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;blockquote class="quote en">
&lt;p>To see a world in a grain of sand. And a heaven in a wild flower. Hold infinity in the palm of your hand. And eternity in an hour.&lt;/p>&lt;/blockquote>
&lt;h2 id="quote-center">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#quote-center" class="anchor-link" aria-label="quote-center">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>quote-center&lt;/h2>
&lt;p>这是一个用于居中引用的简码，其样式也是借鉴自 Hexo 的 NexT 主题。首先创建 &lt;code>quote-center.html&lt;/code> 文件，其内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/shortcodes/quote-center.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">blockquote&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;quote-center&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $content := .Inner | markdownify -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- if not (strings.HasPrefix $content &amp;#34;&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>&amp;#34;) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ printf `&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>%s&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>` $content | safeHTML }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- else }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $content }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- end -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">blockquote&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后添加自定义 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">blockquote&lt;/span>&lt;span class="nc">.quote-center&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding-left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">lower&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">lower&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">p&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-align&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">center&lt;/span> &lt;span class="k">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="mf">.5&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nd">::before&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">left&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">content&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;“&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">low&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="mf">.42&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">&amp;amp;&lt;/span>&lt;span class="nd">::after&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">position&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">right&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">content&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;”&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">color&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">low&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin-top&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="mf">.7&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体简码和样式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">quote-center&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">十里青山远，潮平路带沙&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>数声啼鸟怨年华&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>又是凄凉时候，在天涯&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>白露收残月，清风散晓霞&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>绿杨堤畔问荷花&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>记得年时沽酒，那人家
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">quote-center&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;blockquote class="quote-center">
&lt;p>十里青山远，潮平路带沙&lt;br>数声啼鸟怨年华&lt;br>又是凄凉时候，在天涯&lt;br>白露收残月，清风散晓霞&lt;br>绿杨堤畔问荷花&lt;br>记得年时沽酒，那人家&lt;/p>&lt;/blockquote>
&lt;hr>
&lt;p>注：因为简码的具体形式写出来会直接被 Hugo 转义渲染，所以需要在简码的括号内加入 &lt;code>/* */&lt;/code> 来防止被转义&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。即你需要在 Markdown 中输入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="err">&amp;lt;&lt;/span>/* myshortcode */&amp;gt;}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>渲染出来的结果是：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">myshortcode&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://tin6.com/post/how-to-escape-hugo-shortcodes-within-hugo-markdown/" target="_blank" rel="noopener">如何在代码块里内嵌 HUGO 的简码 (SHORTCODES) | 消夏錄&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/" target="_blank" rel="noopener">https://guanqr.com/tech/website/hugo-shortcodes-customization/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
OCT 视网膜图像分割</title><link>https://guanqr.com/tech/optics/retina-image-segmentation/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/retina-image-segmentation/</guid><pubDate>Wed, 03 Jun 2020 09:37:37 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">光&lt;/span>学相干断层扫描技术（Optical Coherence Tomography，OCT）是一种利用低相干光从散射介质中获取微米级分辨率的二维或三维图像的技术&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。本学期的「机器视觉与图像处理」课程的老师是激光生物医学研究所的研究光学成像技术的老师，因此期末作业就是与 OCT 技术相关的内容——OCT 视网膜图像分割。关于该课程的其他三次作业内容，请查看我的另一篇文章：《&lt;a href="https://guanqr.com/tech/optics/digital-image-processing-practice/">数字图像处理基础练习&lt;/a>》。&lt;/p>
&lt;h2 id="题目要求">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#题目要求" class="anchor-link" aria-label="题目要求">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:题目要求" class="headings">题目要求&lt;/a>&lt;/h2>
&lt;p>人眼视网膜由多层组织构成，利用给出的 OCT 视网膜断层图，实现如下图所示的图像分割。给出分割处理方法、结果、程序代码，分析讨论分割方法的稳定性。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-0.jpg" alt="retina-image-segmentation-0.jpg">&lt;span class="caption">※ 图 1：示例图像&lt;/span>&lt;/p>
&lt;p>其实题目仅仅要求画出 Vitreous, NFL, RPE 三条线，不过我了解到在以往的课程中，同学们都画出了全部 8 条线，所以我也就尝试画出了 8 条线。关于这种图像的分割方法，老师提供了一个参考程序：&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/pangyuteng/caserel target="_blank">pangyuteng / caserel&lt;/a>
&lt;/div>
&lt;div class="description">computer-aided segmentation of retinal layers in OCT images&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #e16737">&lt;/span>
&lt;span class="language-name">MATLAB&lt;/span>
&lt;/div>
&lt;/div>
&lt;p>然而该程序看起来有些复杂，在这么短时间内看懂是很困难的。这个作业毕竟只是个期末作业，自己从零开始写代码也是可以的。&lt;/p>
&lt;h2 id="问题分析">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#问题分析" class="anchor-link" aria-label="问题分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:问题分析" class="headings">问题分析&lt;/a>&lt;/h2>
&lt;p>老师提供了 12 幅需要处理的图像，这些图像可以分为两类，一类是上端较为平滑的，一类是上端凹陷的。这两类图由于差异较大，在部分区域进行分割的时候会有一定的困难。下面我主要详细讲述如何画出 Vitreous, NFL, RPE 三条线，其他线的提取操作与之类似，就不再过多赘述，只讲一讲图像处理中比较困难的地方。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-1.png" alt="retina-image-segmentation-1.png">&lt;span class="caption">※ 图 2：需要处理的 12 幅图像&lt;/span>&lt;/p>
&lt;h3 id="vitreous-层">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#vitreous-层" class="anchor-link" aria-label="vitreous-层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:vitreous-层" class="headings">Vitreous 层&lt;/a>&lt;/h3>
&lt;p>通过观察所给的示意图可知，Vitreous 层是断层图中最上面的一层。该层与背景黑色的边界清晰，因此分割该层很容易。可以考虑先试用中值滤波去除背景噪点的干扰，然后使用大津法确定合适的二值化阈值，进行二值化操作。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.tif&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">medfilt2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">,[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="c">% 中值滤波&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">graythresh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 大津法全局阈值调整&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imbinarize&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">thresh&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 二值化&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对三幅图（#1、#2、#11）进行处理，得到的结果如图 3 至图 5 所示，可以看出效果良好。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-2.png" alt="retina-image-segmentation-2.png">&lt;span class="caption">※ 图 3：Vitreous 层二值化（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-3.png" alt="retina-image-segmentation-3.png">&lt;span class="caption">※ 图 4：Vitreous 层二值化（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-4.png" alt="retina-image-segmentation-4.png">&lt;span class="caption">※ 图 5：Vitreous 层二值化（3）&lt;/span>&lt;/p>
&lt;p>接着对二值化后的图像进行边缘提取。这里我是使用的是 Canny 算子进行边缘检测。完成后对整幅图逐个像素点从上至下，从左至右进行遍历，提取最上层白点的边缘。具体代码如下。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elseif&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">10&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="o">~=&lt;/span> &lt;span class="mi">2&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>图 6 和图 7 所示的是对第一幅图（#1）进行边缘检测和提取最上层边缘线条的结果。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-5.png" alt="retina-image-segmentation-5.png">&lt;span class="caption">※ 图 6：Vitreous 层边缘检测&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-6.png" alt="retina-image-segmentation-6.png">&lt;span class="caption">※ 图 7：Vitreous 层提取最上层边缘&lt;/span>&lt;/p>
&lt;p>目前已经将 Vitreous 层的边缘提取出来，只需要对该条线上的每个点进行拟合，形成一条曲线即可，具体代码如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">yV&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xV&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 绘制边界&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyfit&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1V&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyval&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xV&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xxV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">300&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yyV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">spline&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y1V&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xxV&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">V&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xxV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yyV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;color&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;b&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Vitreous&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对不同的图像（#1、#2、#11）进行处理，得到的结果如下。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-7.png" alt="retina-image-segmentation-7.png">&lt;span class="caption">※ 图 8：Vitreous 层结果（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-8.png" alt="retina-image-segmentation-8.png">&lt;span class="caption">※ 图 9：Vitreous 层结果（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-9.png" alt="retina-image-segmentation-9.png">&lt;span class="caption">※ 图 10：Vitreous 层结果（3）&lt;/span>&lt;/p>
&lt;h3 id="nfl-层">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#nfl-层" class="anchor-link" aria-label="nfl-层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:nfl-层" class="headings">NFL 层&lt;/a>&lt;/h3>
&lt;p>NFL 层的检测有些困难，因为该层上下区域的灰度对比不是很明显，有的图像用肉眼看也十分难以辨别出 NFL 层的位置。由此可见，直接使用和提取 Vitreous 层相同的做法是不可行的。在多次尝试后，我发现在图像处理的第一步使用直方图均衡化的方法，能够很好地突出 NFL 层上下区域的差异。然后再使用大津法，对图像进行二值化操作，便能够较为有效地提取出所需区域。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.tif&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">histeq&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">graythresh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imbinarize&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">thresh&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mf">0.46&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对三幅图（#1、#2、#11）进行处理，效果如下所示。可以看出，上层较为平滑的图像，其 NFL 层和 Vitreous 层之间的区域较宽，能够很好地分辨。但如图 11 和图 12 所示的上层下凹的图像，该区域较薄，不易分辨。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-10.png" alt="retina-image-segmentation-10.png">&lt;span class="caption">※ 图 11：NFL 层二值化（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-11.png" alt="retina-image-segmentation-11.png">&lt;span class="caption">※ 图 12：NFL 层二值化（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-12.png" alt="retina-image-segmentation-12.png">&lt;span class="caption">※ 图 13：NFL 层二值化（3）&lt;/span>&lt;/p>
&lt;p>为了提取 NFL 层，需要排除其他层的干扰。这里我同样采用了遍历整幅图的方法，从上至下，首先检测出第一个白点，然后去除白点下方一定距离外区域的所有白点。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 确定第一个点&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 去除下方多余的点&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果这种二值化图像z直接采用 Vitreous 层所用的 Canny 算子进行边缘检测，效果肯定很不好，因为该二值化后的图像上的点是杂散分布的，点与点之间距离很大，并未连通。可以考虑使用闭运算将距离较近的点进行连通，其效果如图 14 至图 16 所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 闭运算连通&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imclose&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-13.png" alt="retina-image-segmentation-13.png">&lt;span class="caption">※ 图 14：NFL 层闭运算（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-14.png" alt="retina-image-segmentation-14.png">&lt;span class="caption">※ 图 15：NFL 层闭运算（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-15.png" alt="retina-image-segmentation-15.png">&lt;span class="caption">※ 图 16：NFL 层闭运算（3）&lt;/span>&lt;/p>
&lt;p>接着就可以提取 NFL 层的曲线。因为图 15 和图 16 中，仍有较多的点并未连通，因此决定不采用 Canny 算子边缘检测。如果直接由下至上遍历图像，提取第一次出现的白点，那么由于部分图像下方的杂散点太多，会影响边界的确认。因此依然考虑从上至下遍历，在同一个纵行，如果出现的第一个像素点是白点，贴紧该点的下方像素点依然是白点的话，那么就将该点去除，保留下方的点。如果该点为白点，其下方的点为黑色，那么该点下方的所有点都改为黑色。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 提取底部轮廓&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elseif&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="c">% 去除底部多余杂点&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其效果如下所示。效果还算可以，能够辨别出该条线的区域在哪里。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-16.png" alt="retina-image-segmentation-16.png">&lt;span class="caption">※ 图 17：NFL 层边缘提取（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-17.png" alt="retina-image-segmentation-17.png">&lt;span class="caption">※ 图 18：NFL 层边缘提取（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-18.png" alt="retina-image-segmentation-18.png">&lt;span class="caption">※ 图 19：NFL 层边缘提取（3）&lt;/span>&lt;/p>
&lt;p>最后就是将该边缘进行函数拟合，然后绘制出来。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I4&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymax&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I4&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="n">ymax&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymax&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I4&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="n">ymax&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">yN&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xN&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pN&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyfit&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1N&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyval&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xN&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xxN&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yyN&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">spline&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y1N&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xxN&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xxN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yyN&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;color&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;g&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;NFL&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-19.png" alt="retina-image-segmentation-19.png">&lt;span class="caption">※ 图 20：NFL 层结果（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-20.png" alt="retina-image-segmentation-20.png">&lt;span class="caption">※ 图 21：NFL 层结果（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-21.png" alt="retina-image-segmentation-21.png">&lt;span class="caption">※ 图 22：NFL 层结果（3）&lt;/span>&lt;/p>
&lt;p>由于图像的边界模糊，提取出来的边缘并不太连续，周围有很多杂散点，因此拟合出来的曲线在部分图中稍微有些偏离。不过曲线主体大部分是与 NFL 层吻合的。&lt;/p>
&lt;h3 id="rpe-层">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#rpe-层" class="anchor-link" aria-label="rpe-层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:rpe-层" class="headings">RPE 层&lt;/a>&lt;/h3>
&lt;p>RPE 层的分辨较 NFL 层容易很多，但是因为其与下方区域的边界灰度值较高，因此不太好确定具体的边界。直接进行二值化操作，图像的下方会出现很多杂散点。因此我先使用了伽马变换提高图像的灰度值，便于区分。然后使用上述同样的方法进行二值化操作，具体代码和处理后的图像如下。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.tif&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">medfilt2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">,[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imadjust&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">,[],[],&lt;/span>&lt;span class="mf">1.5&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 伽马变换&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">graythresh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imbinarize&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">thresh&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mf">0.17&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-22.png" alt="retina-image-segmentation-22.png">&lt;span class="caption">※ 图 23：RPE 层二值化（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-23.png" alt="retina-image-segmentation-23.png">&lt;span class="caption">※ 图 24：RPE 层二值化（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-24.png" alt="retina-image-segmentation-24.png">&lt;span class="caption">※ 图 25：RPE 层二值化（3）&lt;/span>&lt;/p>
&lt;p>然后考虑提取最下方边缘的曲线。由于是最下方的曲线，因此可以使用由下至上的遍历方法。保留同一列第一次出现的白点。但因为下方仍存在部分杂散点，曲线存在间断，拟合曲线的时候会在间断处发生明显的偏移，所以我使用了膨胀操作，然后保留连通的最大区域，再一次进行遍历，保留同一列第一次出现的白点，即为下边界。具体代码如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">edge&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;canny&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 边界特征提取&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">%区域膨胀，连通边缘&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">B1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">1&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">6&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imdilate&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">B1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">B2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">1&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imdilate&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">B2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imLabel&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">bwlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 对各连通域进行标记&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">stats&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">regionprops&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imLabel&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;Area&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 求各连通域的大小&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">area&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">cat&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">stats&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">Area&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">index&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">area&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">area&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c">% 求最大连通域的索引&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">ismember&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imLabel&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">index&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 获取最大连通域图像&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 提取下边界特征&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>通过上述操作处理后的图像如下所示。因为进行了膨胀操作，在图像边缘部分，有些杂散点也与 RPE 层曲线连通，因此在一些图像的边缘部分，曲线并不太理想。不过进行膨胀操作，能够有效地避免了曲线的间断。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-25.png" alt="retina-image-segmentation-25.png">&lt;span class="caption">※ 图 26：RPE 层边缘提取（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-26.png" alt="retina-image-segmentation-26.png">&lt;span class="caption">※ 图 27：RPE 层边缘提取（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-27.png" alt="retina-image-segmentation-27.png">&lt;span class="caption">※ 图 28：RPE 层边缘提取（3）&lt;/span>&lt;/p>
&lt;p>最后同样是通过提取的边缘数据进行曲线拟合与绘制。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="n">ymin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">yV&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xV&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">%绘制边界&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyfit&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1V&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">polyval&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xV&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xxV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">300&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yyV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">spline&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y1V&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">xxV&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">V&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xxV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">yyV&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;color&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;m&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;RPE&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-28.png" alt="retina-image-segmentation-28.png">&lt;span class="caption">※ 图 29：RPE 层结果（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-29.png" alt="retina-image-segmentation-29.png">&lt;span class="caption">※ 图 30：RPE 层结果（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-30.png" alt="retina-image-segmentation-30.png">&lt;span class="caption">※ 图 31：RPE 层结果（3）&lt;/span>&lt;/p>
&lt;h3 id="其他层">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#其他层" class="anchor-link" aria-label="其他层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:其他层" class="headings">其他层&lt;/a>&lt;/h3>
&lt;p>对于其余的 5 条曲线的识别与绘制，方法与前三种类似。先确定合适的阈值做二值化处理，根据不同的阈值，二值化后保留的图像有所不同。然后根据所需要的结构对其余部分进行去除，接着进行遍历操作，上层的曲线就从上至下遍历，下层的曲线就从下至上遍历。最后根据保留的点进行曲线拟合与绘制即可。由于操作方法类似，这里就不再赘述，只对部分特殊情况进行分析。&lt;/p>
&lt;p>在图像处理中，比较特殊的是提取 GCL 层。对于平滑的图像操作和提取其他曲线一样，能够直接得到想要保留的结构，但对于下凹的图像来说，进行二值化处理后，会得到如图 32 所示的图像。还需要对图 33 中红线圈出的区域进行去除。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.tif&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">medfilt2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">graythresh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imbinarize&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">thresh&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mf">0.08&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imclose&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-31.png" alt="retina-image-segmentation-31.png">&lt;span class="caption">※ 图 32：GCL 层二值化&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-32.png" alt="retina-image-segmentation-32.png">&lt;span class="caption">※ 图 33：GCL 层待去除的部分&lt;/span>&lt;/p>
&lt;p>为此，我们需要对下凹的图像进行单独的处理，这就需要先检测出哪一幅图是下凹的。这里我使用的方法是，在边缘处由上至下遍历，找到第一个白点，作为最小值，在图像中间位置由上至下遍历，找到第一个白点，作为最大值，二者之差如果大于一定的数值，就表明上层下凹的程度大，是下凹图像。这样，就能分别对平滑图像和下凹图像分别处理。为了去除红线圈出区域的白点，因为线条的变化是不规则的，使用循环语句很容易将需要保留的白点去除，所以我对图像划分为五个区域分别去除。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;span class="lnt">84
&lt;/span>&lt;span class="lnt">85
&lt;/span>&lt;span class="lnt">86
&lt;/span>&lt;span class="lnt">87
&lt;/span>&lt;span class="lnt">88
&lt;/span>&lt;span class="lnt">89
&lt;/span>&lt;span class="lnt">90
&lt;/span>&lt;span class="lnt">91
&lt;/span>&lt;span class="lnt">92
&lt;/span>&lt;span class="lnt">93
&lt;/span>&lt;span class="lnt">94
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="c">% 判断是否下凹&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">imin&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">imax&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="n">imax&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="n">imin&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="mi">60&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 去除凹形多余白色区域&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imin&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">medfilt2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 左 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">del&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">80&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">del&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">del&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 左 2&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">120&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">del&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">140&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">del&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">del&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">20&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 右 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">160&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">del&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">180&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">220&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">del&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">del&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">20&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 右 2&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">240&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">del&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">220&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">260&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">del&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">del&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">20&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 右 3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">260&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">300&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">del&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">del&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">20&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">imLabel&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">bwlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">stats&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">regionprops&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imLabel&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;Area&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">area&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">cat&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">stats&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="n">Area&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">index&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">area&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">area&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">ismember&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imLabel&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">index&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">% 针对第 10 幅图需要单独删除多余区域&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">70&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">m&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">I3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="结果讨论">&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#结果讨论" class="anchor-link" aria-label="结果讨论">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#contents:结果讨论" class="headings">结果讨论&lt;/a>&lt;/h2>
&lt;p>对三幅图（#1、#2、#11）进行处理，程序运行效果如下图所示。从图中可以看出，整体效果良好。如果是边缘较为平滑的图像，标注的结果精确度较高。然而如果是下凹较为明显以及图像灰度有间断的图像，其标注的结果在边缘部分和下凹的中心区域的偏差较大，部分曲线出现波动，也会发生交错的现象。对于以上问题，由于个人能力有限，目前还没有能够完美解决的方法。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-33.png" alt="retina-image-segmentation-33.png">&lt;span class="caption">※ 图 34：最终结果（1）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-34.png" alt="retina-image-segmentation-34.png">&lt;span class="caption">※ 图 35：最终结果（2）&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/retina-image-segmentation-35.png" alt="retina-image-segmentation-35.png">&lt;span class="caption">※ 图 36：最终结果（3）&lt;/span>&lt;/p>
&lt;p>本文中所用的程序代码已经整理放在了 GitHub 仓库中，仅供个人参考。&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/Retina-Image-Segmentation target="_blank">Retina-Image-Segmentation&lt;/a>
&lt;/div>
&lt;div class="description">Image segmentation of retinal analysis with optical coherence tomography. OCT 视网膜断层图的图像分割程序。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #e16737">&lt;/span>
&lt;span class="language-name">MATLAB&lt;/span>
&lt;/div>
&lt;/div>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://en.wikipedia.org/wiki/Optical_coherence_tomography" target="_blank" rel="noopener">Optical coherence tomography | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/retina-image-segmentation/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/retina-image-segmentation/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/matlab/">MATLAB</category></item><item><title>
一次对优秀毕业生的采访</title><link>https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/</link><guid isPermaLink="true">https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/</guid><pubDate>Sat, 30 May 2020 22:19:22 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>天我对一个我们学院的优秀毕业生进行了采访。这次采访估计是我作为院级学生会成员做的最后一项工作了，因此接「锅」的时候丝毫没有推脱。本来计划是线上采访的，但我联系到学长，得知他也在学校后，就觉得面对面交流能更深入一些。于是，约在了教三楼前见面。此时恰逢梅雨季节，交谈中伴随着连绵不断的雨水，别有一番意境。&lt;/p>
&lt;p>在采访前我准备了将近 20 个问题，从回忆刚步入大学开始，到探讨学习、科研和生活，再到议论国际局势，几乎每一方面都准备了几个问题。我想，既然是对优秀毕业生的采访，当然要体现他的优秀之处，要发掘那些和我们普通学生不一样的地方，所以问题一定要带有引导的作用，层层深入。这位学长有 18 门课程满绩，参与过许多竞赛，获得过许多奖项，目前计划前往香港读博。我们聊了大概有 40 分钟的时间，这里我分享几则我提的问题和他的回答，有关本次采访的全部内容请访问「光小电」微信公众号进行查看。&lt;/p>
&lt;h2 id="学习篇">&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/#学习篇" class="anchor-link" aria-label="学习篇">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>学习篇&lt;/h2>
&lt;p>问：专业课程是如何学习的，有没有进行课前预习还有课后复习，能否分享一下自己的学习经验？&lt;/p>
&lt;p>答：我会先提前看一些书中的重要章节。每一章刚开始的绪论和介绍，都是不太重要的部分，这些不用去看。像「物理光学」课程我会提前看一下衍射、干涉、傅里叶光学部分的内容，「应用光学」的话我会去看一些典型的光路。这些都是在开学前进行的，大概浏览一遍教材，基本了解这门课是讲什么的。预习方面，我并没有刻意地去预习，因为我觉得每节课老师讲得很清晰，都是按照教材的顺序讲的，只要课堂上认真听就行了。我觉得课程学习最重要的就是课堂听讲，要保证自己在课堂上不犯困，不走神，抓住重点知识。复习方面，我会在课后第一时间完成作业，我习惯于当天任务当天完成，不会拖到后面去做，除非有大作业之类的任务。但大作业我一般也会在布置的那一周周末开始做。很多人都喜欢把大作业拖到最后一天再做，我觉得这样就比较麻烦，因为一般课程都有考试。大二、大三的考试有很多，如果你能提前完成作业，很早就可以计划复习考试的内容。我的复习方式比较费时间。我会在距考试周还有两周的时候开始计划课程的复习。我会把整本书还有课件从头到尾过一遍，基本上是以抄写的形式，把知识点一条一条地写在纸上。这基本上就要花费一到两周的时间，因为我是一个单元一个单元地看，一般一个单元就要看一个早上。这个做完之后，整本书基本上就浓缩在了那几张纸上。考试前一天我会把那张纸拿出来从头到尾边看边背，把那些知识点再理解一遍，再用一天的时间刷题，这样考试的时候就不会有什么问题了。&lt;/p>
&lt;h2 id="深造篇">&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/#深造篇" class="anchor-link" aria-label="深造篇">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>深造篇&lt;/h2>
&lt;p>问：你选择去香港读博，前期做了哪些准备？&lt;/p>
&lt;p>答：我在大三刚开始的时候才开始学习托福和 GRE。当时我还没有决定去香港还是美国，直到后来参加了香港的暑研。当时暑研招人的时候挺严格的，整个浙大就招一个学生，在光电和机械里面选拔，最后录取了我。本来说再看看其他的学习，但是觉得自己费这么大劲争取到了这个机会，不如去看看这个项目究竟怎么样。去了之后发现挺不错的，是我喜欢的研究方向，于是就决定去香港了。其实我感觉选择哪个学校是一方面，但最主要的还是把最基础的东西都准备好，托福和 GRE，一定要早点准备，我个人觉得大三准备英语成绩已经很迟了。如果想要出国还有去香港的话最好是大二上学期开始准备，大二暑假的时候就可以开始尝试去参加考试。这样的话在大三交流之前就已经有足够的条件去申请那些想去的学校。&lt;/p>
&lt;h2 id="思考篇">&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/#思考篇" class="anchor-link" aria-label="思考篇">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>思考篇&lt;/h2>
&lt;p>问：目前我国还有很多落后于西方国家的技术，你觉得我们这一代大学生应该怎么做？&lt;/p>
&lt;p>答：目前有很多尖端技术领域西方国家会限制我国的发展，我觉得我们自己需要努力攻克技术难题。不过我觉得这也是一个机会去推动我们自己的技术发展。对于我们本科生来说，还是要学好自己的基础知识，找到感兴趣的领域，在自己的领域潜心研究。不同的人有不同的追求，有些人很喜欢研究，有些人喜欢做管理层的工作。想要做研究的话，目标还是要放高远一点，不要仅仅追求一些功利性的东西。我们要保证自己学业的情况下更多地去尝试攻克一些难题，去挑战自我。我们要想着凭借自己的能力去解决问题，不要总想着依靠别人，借助一些外力，只专注于模仿而忽视了创新。创新是很重要的。我们要多学会涉猎各种知识，本科期间更多的是开眼界，知识面广了脑中才会有更多创新的想法，去做一些创新的事情。&lt;/p>
&lt;h2 id="竺老校长的两问">&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/#竺老校长的两问" class="anchor-link" aria-label="竺老校长的两问">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>竺老校长的两问&lt;/h2>
&lt;p>问：如何回答竺可桢老校长的两个问题：来到浙大做什么，将来毕业后要做什么样的人？&lt;/p>
&lt;p>答：第一个问题，我觉得来浙大更多的是完善自己和提升自己，只有自己足够的强大才有资格去谈贡献，只有自己积累了足够多的知识才清楚自己将来要做什么，厚积薄发。第二个问题，我觉得首先要做一个不拖国家后腿的人。首先能够独立地养活自己，其次是在这个基础上做一个对国家有用的人。&lt;/p>
&lt;h2 id="对光电学子的寄语">&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/#对光电学子的寄语" class="anchor-link" aria-label="对光电学子的寄语">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>对光电学子的寄语&lt;/h2>
&lt;p>问：临近毕业，有什么想要对学弟学妹们说的话？&lt;/p>
&lt;p>答：祝愿各位光电的学弟学妹们可以一直追寻着求是之光不停歇，「和光同尘，潜心立志；与时舒卷，奋发待时！」&lt;/p>
&lt;hr>
&lt;p>在交谈中，学长提到最多的是「兴趣」还有「机遇」，他说，只顾着学习是不够的，要找到自己感兴趣的事，同时毫不犹豫地抓住一切机遇，因为兴趣所在，因为抓住了机遇，所以才有了成功。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/" target="_blank" rel="noopener">https://guanqr.com/life/school/an-interview-with-an-outstanding-graduate/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/ideal/">理想</category><category domain="https://guanqr.com/tags/research/">科研</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
对北方的眷恋</title><link>https://guanqr.com/life/ideas/nostalgia-for-the-north/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/nostalgia-for-the-north/</guid><pubDate>Sun, 24 May 2020 12:04:35 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">和&lt;/span>朋友谈及自己在南方求学的这几年时光，想着未来的人生规划，忽然有一种异常的情绪涌上心头——就像我为自己的网站所起的名字一样——「独彷徨」。曾经，年少的我，总想着去一个遥远的地方，越远越好。来到陌生的环境，对一切都充满好奇心与新鲜感。然而在杭州的三年，收获最多的是孤独。&lt;/p>
&lt;p>独自一人去电影院看电影。那些日子，紫金港的夜晚，我总是在周末的晚上十一点去校门口的电影院看一场新上映的电影。回宿舍的路上，路过校内的湿地，各种昆虫蛙类的鸣叫，为沉闷的夜色点缀了些许生机。独自一人去西湖散步。从植物园的竹林中穿过，走上断桥，在孤山下望着西湖上缓缓行驶的小船，岸边的柳枝随着清风舞动，我似乎忘记了心中沉重的担子。&lt;/p>
&lt;p>每当我看到在帝都北洋的同学们一起聚餐，一起游玩，心中充满了羡慕。他们延续了高中的友情，而我呢？在大学里，我没有找到像高中一样志同道合的人，发现维护人与人之间关系的是利益。三年里接触最多的人只有住在同一个宿舍下的同学。由于浙大比较自由的教学模式，每个教学班的学生都是随机分配的不同专业的人，所以我并不会和我行政班里的同学在同一门课中见面，到现在为止，行政班里还有一些人我并不认识。所以说，交朋友就更难了，因为不存在一个稳定的人群，我就没有每天都能稳定接触到的人，周围的那些同学，更像是走在街头的路人罢了。&lt;/p>
&lt;p>平日里有什么忧愁烦恼，我都是找北洋的朋友倾诉。可她的课业压力比我要重很多，随着专业课程的深入，空闲时间越来越少，两个人之间的交流也变得越来越少了。还记得大学第一年的跨年夜，学校在紫云篮球场搭起的舞台，宿舍楼前温馨的游园会，我给朋友做着直播。可现在，每天除了问候一句早安晚安，也没什么时间聊天了。&lt;/p>
&lt;p>两周前光电学院组织了中科院的六个光学研究所进行招生宣传。除了上海光机所和技物所研一阶段在中科大学习，长春光机所研一阶段留所学习外，其他几所研一阶段都在国科大学习。留在浙大继续读研从学业上讲是最佳的选择，不过到研究所读研也是在我考虑之内的。虽然研究所的生活不像大学生活丰富，压力也比较大，但考研的竞争总比浙大小很多——本科在浙大光电学院学习，和那些普通一本的学生一起考光学研究所，多少会有一些优势。除此之外，最重要的一点，我有机会回到北方生活。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/nostalgia-for-the-north/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/nostalgia-for-the-north/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
爬取指定城市的气象数据</title><link>https://guanqr.com/tech/computer/obtain-meteorological-data/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/obtain-meteorological-data/</guid><pubDate>Tue, 19 May 2020 20:02:07 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>周六，北京外国语大学的一个朋友找我帮忙改一改她的 Python 程序。她搬运了这篇文章的代码，老师要求的是收集 2016 年至 2020 年北京市的气象数据，包括时间、天气、温度、湿度、风力、风级、降水量、体感温度和云量数据，但按照这篇文章中的代码，输出到 &lt;code>.csv&lt;/code> 文件中的数据只有四项：时间、温度、湿度和降水量，并且时间并没有加上年份。&lt;/p>
&lt;p>由于我最近写的最多的就是 MATLAB，没怎么系统性地写过 Python 代码，更不用说什么爬虫程序了。不过既然已经有了代码，在此基础上改一改还是不成问题的。&lt;/p>
&lt;p>先附上她给我的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">pandas&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">pd&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">bs4&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">collections&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">defaultdict&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">dateutil.relativedelta&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">relativedelta&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">datetime&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">datetime&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">numpy&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">np&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">class&lt;/span> &lt;span class="nc">weather_data&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">def&lt;/span> &lt;span class="fm">__init__&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">city&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">start_year&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">end_year&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">start_month&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">end_month&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> :param city: 需爬取的城市全拼
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> :param start_year: 爬取开始年份
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> :param end_year: 爬取结束年份
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> :param start_month: 爬取开始月份
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> :param end_month: 爬取结束月份
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> &amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">city&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">city&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strptime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sa">f&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="n">start_year&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">-&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="n">start_month&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;%Y-%m&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">end_time&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strptime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sa">f&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="n">end_year&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">-&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="n">end_month&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;%Y-%m&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">def&lt;/span> &lt;span class="nf">_get_original_html&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> 网页爬取
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s2"> &amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="sa">f&lt;/span>&lt;span class="s2">&amp;#34;https://tianqi.911cha.com/&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">city&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">/&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">year&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">-&lt;/span>&lt;span class="si">{&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">month&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="s2">.html&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">header&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;User-Agent&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36&amp;#34;&lt;/span>&lt;span class="p">}&lt;/span> &lt;span class="c1"># 填写自己浏览器内容&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">response&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">headers&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">header&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">response&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">decode&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;utf-8&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">def&lt;/span> &lt;span class="nf">_parse_data&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 一次解析一个月&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">soup&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">html&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;html.parser&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">defaultdict&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">dict&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">tr&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">enumerate&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">soup&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find_all&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;tr&amp;#34;&lt;/span>&lt;span class="p">)):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">n&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">!=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">date&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">tr&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;a&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get_text&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 创建日期字典&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># [时间，图片，天气，温度，湿度，风力，风级，降水量，体感温度，云量]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">date&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s2">&amp;#34;Day&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">year&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">con&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get_text&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="k">for&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">con&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">zip&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s1">&amp;#39;time&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;image&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;weather&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;temperature&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;humidity&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;wind_force&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;wind_scale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;precipitation&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;sendible_temperature&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;cloud_amount&amp;#39;&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="n">tr&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find_all&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;td&amp;#34;&lt;/span>&lt;span class="p">))}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">date&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="s2">&amp;#34;Night&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">con&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get_text&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="k">for&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">con&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">zip&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;time&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;image&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;weather&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;temperature&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;humidity&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;wind_force&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;wind_scale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;precipitation&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;sendible_temperature&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;cloud_amount&amp;#39;&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="n">tr&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find_all&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;td&amp;#34;&lt;/span>&lt;span class="p">))}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">data&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">def&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span> &lt;span class="o">&amp;lt;=&lt;/span> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">end_time&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">html&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">_get_original_html&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">_parse_data&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="bp">self&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start_time&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="n">relativedelta&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">months&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">data&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="vm">__name__&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s2">&amp;#34;__main__&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">T&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weather_data&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">city&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;beijing&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">start_year&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">2016&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">end_year&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">2020&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">start_month&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">end_month&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">with&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;weather_dict.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">encoding&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;UTF-8&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">f&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">line&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">T&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">main&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">result&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">line&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">writelines&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">line&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">key_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">key2_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">val_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">val3_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">val5_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">result&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key_value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">(&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">keys&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key_value&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val_value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">(&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">values&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val_value&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">key_list&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key2_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">key2_list&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 下面全是对val值进行操作&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">val2&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">val_list&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">val3&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">val2&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val3_value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val3&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">values&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val3_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val3_value&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">nu&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span> &lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val3_list&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">val4&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">val3_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">nu&lt;/span>&lt;span class="p">]:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val5&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val4&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">values&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val6&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;0&amp;#39;&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">val5&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 把降雨的-改成0，工作需要 &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">val5_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val6&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data_key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DataFrame&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key2_list&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 日期&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data_val&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DataFrame&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">val5_list&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 气象信息，可以根据自己需要对这个变量进行修改&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 去除符号&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">temp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;℃&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">humd&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rain&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">weather&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DataFrame&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">humd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rain&lt;/span>&lt;span class="p">])&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">T&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 保留奇数行，删除偶数行&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">day&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weather&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">weather&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">reset_index&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">drop&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 白天数据&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 保留偶数行，删除奇数行&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">night&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">weather&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">weather&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">reset_index&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">drop&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 晚上数据&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">fin&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">concat&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">data_key&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">night&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">day&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">axis&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">fin&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">to_csv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;beijing_weather.csv&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">encoding&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;utf_8_sig&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我将这个程序完整看了一遍后就找到了问题所在。很明显，数据爬取不全的问题出现在了第 104 行那里：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">weather&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DataFrame&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">humd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rain&lt;/span>&lt;span class="p">])&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">T&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>只输出了三个量，把其他的量也去除单位后加上就好了：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">temp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;℃&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">humd&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">wind_scal&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;级&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">prec&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">send_temp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;℃&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">clou_amou&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">data_val&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">str&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">weather&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DataFrame&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">humd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">wind_scal&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">prec&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">send_temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">clou_amou&lt;/span>&lt;span class="p">])&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">T&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>至于时间数据不显示年份这一问题，因为获取到的数据本身就没有年份信息，自己加上就可以了。为了省事，我采用的办法是重写一个数组存储时间，时间的格式是 &lt;code>xxxx年xx月xx日&lt;/code>，然后将原数据中存放时间的数组替换成这个新的数组。观察原程序，注意到时间存放在了 &lt;code>key2_list&lt;/code> 中，因此进行如下操作进行替换：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 修改日期，添加年份&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">locale&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">setlocale&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">locale&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">LC_CTYPE&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;chinese&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">datestart&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;2016年1月1日&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">dateend&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;2020年5月29日&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">datestart&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strptime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">datestart&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;%Y年%m月&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">日&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">dateend&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strptime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dateend&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;%Y年%m月&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">日&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">date_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">date_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">datestart&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strftime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%Y年%m月&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">日&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">while&lt;/span> &lt;span class="n">datestart&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="n">dateend&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 日期叠加一天&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">datestart&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">timedelta&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">days&lt;/span> &lt;span class="o">=+&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># 日期转字符串存入列表&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">date_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">datestart&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strftime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%Y年%m月&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">日&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 删除原网站中缺少的日期&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">del&lt;/span> &lt;span class="n">date_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">533&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">del&lt;/span> &lt;span class="n">date_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">562&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">key2_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">date_list&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这一部分程序额外引入 &lt;code>local&lt;/code> 库（&lt;code>import locale&lt;/code>），并且将原来的 &lt;code>from datetime import datetime&lt;/code> 改为 &lt;code>import datetime&lt;/code>，代码中的 &lt;code>datetime.strptime&lt;/code> 都要改为 &lt;code>datetime.datetime.strptime&lt;/code>。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/obtain-meteorological-data/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/obtain-meteorological-data/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/data-processing/">数据处理</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
疫情淡去，毅然返校</title><link>https://guanqr.com/life/school/back-to-school/</link><guid isPermaLink="true">https://guanqr.com/life/school/back-to-school/</guid><pubDate>Sun, 10 May 2020 17:46:54 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">随&lt;/span>着国内疫情局势逐渐缓和，一些比较安全的地区的高校已经决定安排学生返校。今天一早，我就乘坐高铁，回到了学校。因为我生活在北方，身边的朋友大多就读于北京的高校，随着境外输入病例越来越多，京城的防疫工作依然紧张，高校开学还是遥遥无期，所以我算是朋友圈汇总返校比较早的人了。&lt;/p>
&lt;p>浙大的返校措施十分严格。首先，返校有一个优先级：毕业生优先返校、研究生优先返校、省内学生优先返校……最后返校的是疫情重点地区的学生。其次，返校需要有一个蓝色的返校二维码，这个二维码的获取需要两个条件，一是获得杭州的绿色健康码；二是将自己的返校时间、乘坐的交通等等报备给辅导员审核，再由学院的党委书记审核通过。如果你是从疫情重点地区来的，或者是乘坐的交通工具路过疫情重点地区，那么返校的时候需要先进行检测，严重者进行隔离。当你进入校园的时候，会有人对你进行测温，对你的行李进行消毒，然后刷蓝色二维码。这个二维码是一次性的，只要进入校园，二维码就会变成灰色，你不能再出校门，更无法再进入校门，如有特殊情况需要重新申请。&lt;/p>
&lt;p>虽然说返校后的生活就像在「监狱」里似的，不能出校园，每天上午都要测体温，晚上十点半之前需要回宿舍楼。但是学校并没有强制要求学生返校，声称是「自愿返校」，我想可能是因为学校怕担不起因「强制返校」而出事的责任吧。在我返校的时候，校门口根本没有多少人，校内大多是研究生，很多本科生都没有返校。这其实也在我意料之中的事，既然实验课推迟到了暑期进行，期末考试推迟到了秋季开学的时候进行，本学期的课程全程网络直播教学，这个时候返校进行全封锁式的生活，确实很枯燥乏味。&lt;/p>
&lt;p>很多人也问过我，为什么还要返校。我返校的意愿是很明确的。因为我觉得，第一，在家学习的环境很差，周围施工的噪声、年长的人坐在楼前聊天的笑声，街头卖小吃的吆喝声，一直在扰动着我的心——我喜欢宁静。第二，大三即将结束，今年年末要进行考研，我需要做好考研的准备，认真复习，在家的学习效率远不如在学校高。第三，我喜欢在学校中自由自在的生活，在家中，我不断地接受着长辈们的唠叨，自己仿佛小鸟囚禁在牢笼中，连空气都是沉闷的。&lt;/p>
&lt;p>在返校的过程中，我看到街上的所有人都带着口罩，车站里的人很少，乘坐地铁的时候也没有往日那么拥挤。不过，在我乘坐公交车路过西湖的时候，我看到游客还是很多。当公交车到达学校门口的时候，车里只剩我一个人……&lt;/p>
&lt;p>回到学校，一切都要步入正轨了，新的学期，加油。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/back-to-school/" target="_blank" rel="noopener">https://guanqr.com/life/school/back-to-school/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
真正的后浪</title><link>https://guanqr.com/life/ideas/the-real-waves-behind/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/the-real-waves-behind/</guid><pubDate>Tue, 05 May 2020 10:13:57 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-real-waves-behind.png" alt="the-real-waves-behind.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">五&lt;/span>四青年节 b 站的宣传视频《后浪》火了起来。我看完的第一感受就是尬。不出我所料的是，在 b 站视频评论区还有知乎等平台，出现了很多对该视频所表达的内容批判的声音。&lt;/p>
&lt;p>我觉得，这个视频犯的错误和前阵子&lt;a href="https://guanqr.com/life/ideas/zju-wechat-official-account/">浙大官微犯的错误&lt;/a>是一样的，脱离了「真实」——以少数追求精神富裕的年轻人的生活状况代表多数正在追求物质富裕的年轻人的生活状况。那些在视频中光鲜亮丽的人让我们羡慕，我们努力却达不到他们那种高度。这就让许多不曾学习过琴棋书画，不曾享受过旅行探险，正在为自己的未来埋头苦干的普通人觉得，自己配不上称作「后浪」。如果视频的内容由那些高大上的 up 主换成街头辛勤工作的年轻人，或许，在视觉上就没有那么大的冲击。&lt;/p>
&lt;p>我想说的是，我们不必对视频的制作者，对视频所传达的内容进行批判，这个视频只不过是在五四青年节的一种高大上的宣传罢了。我们不能否认自己的价值。我们每一个人都是后浪。那些出彩的人，是后浪中溅起的浪花，他们被岸上的人所关注，但这个时代的命运，在我们每一个人的手中。后浪不需要溅起多大的浪花，后浪只需要保持勇往直前的力量。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/the-real-waves-behind/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/the-real-waves-behind/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
YOLO v3 目标检测</title><link>https://guanqr.com/tech/computer/yolo-v3/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/yolo-v3/</guid><pubDate>Sat, 02 May 2020 13:11:09 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/yologo.png" alt="yologo.png">&lt;/p>
&lt;h2 id="下载与测试">&lt;a href="https://guanqr.com/tech/computer/yolo-v3/#下载与测试" class="anchor-link" aria-label="下载与测试">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>下载与测试&lt;/h2>
&lt;p>YOLO (You Only Look Once) 基于深度学习框架——darknet 的目标检测开源项目。本次操作的全部过程均在 Linux 系统（Ubuntu）中完成。因为在 Windows 系统下，YOLO 源码编译的环境配置十分繁琐，容易出现问题。首先直接从 GitHub 上下载 darknet 源码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">git clone https://github.com/pjreddie/darknet.git darknet
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/yolo-0.png" alt="yolo-0.png">&lt;span class="caption">※ darknet 源码仓库&lt;/span>&lt;/p>
&lt;p>然后进入 &lt;code>darknet&lt;/code> 文件夹中，打开 &lt;code>Makefile&lt;/code> 文件。文件中最上方的三行，默认值为 &lt;code>0&lt;/code>，如果你想要使用 GPU 进行运算，并开启 CUDA 加速和 OpenCV 的话，将其改为 &lt;code>1&lt;/code> 即可。这里因为我仅做一个测试，数据运算量并不大所以没有开启 GPU 运算。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-make" data-lang="make">&lt;span class="line">&lt;span class="cl">&lt;span class="nv">GPU&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nv">CUDNN&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nv">OPENCV&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/yolo-1.png" alt="yolo-1.png">&lt;span class="caption">※ Makefile 文件内容&lt;/span>&lt;/p>
&lt;p>然后执行 &lt;code>make&lt;/code> 命令编译源码。编译完成后，我们从作者的&lt;a href="https://pjreddie.com/darknet/yolo/" target="_blank" rel="noopener">网站&lt;/a>上下载一个训练好的模型进行测试，这里有两个模型，一个名为 &lt;code>yolov3.weights&lt;/code>，另一个名为 &lt;code>yolov3-tiny.weights&lt;/code>，后者是一个轻量化的模型。因为我考虑后续可能会在树莓派上进行测试，所以这里我是用的是 &lt;code>yolov3-tiny.weights&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yolo-2.png" alt="yolo-2.png">&lt;span class="caption">※ 作者网站上的训练数据&lt;/span>&lt;/p>
&lt;p>将下载好的模型放在 &lt;code>darknet&lt;/code> 文件夹下即可。我们可以在 &lt;code>data&lt;/code> 文件夹下找到一些可以测试的图片，比如说 &lt;code>dog.jpg&lt;/code>，执行命令：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">./darknet detect cfg/yolov3-tiny.cfg yolov3-tiny.weights data/dog.jpg
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在这一条命令中，&lt;code>cfg/yolov3-tiny.cfg&lt;/code> 为模型训练的相关配置文件，如果你是用的是 yolov3.weights 模型，直接替换为 &lt;code>cfg/yolov3.cfg&lt;/code>即可；同样，命令中的 &lt;code>yolov3-tiny.weights&lt;/code> 即为下载的模型；命令的最后一句 &lt;code>data/dog.jpg&lt;/code> 为测试的图片。&lt;/p>
&lt;p>执行命令后，我们可以在终端查看到图像检测的过程和结果。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yolo-3.png" alt="yolo-3.png">&lt;span class="caption">※ 图像目标检测&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yolo-4.jpg" alt="yolo-4.jpg">&lt;span class="caption">※ 检测结果&lt;/span>&lt;/p>
&lt;h2 id="制作数据集">&lt;a href="https://guanqr.com/tech/computer/yolo-v3/#制作数据集" class="anchor-link" aria-label="制作数据集">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>制作数据集&lt;/h2>
&lt;p>因为课程项目的需要，我制作的是一个简单的垃圾分类数据集。首先我们将搜集到的图片放在同一个文件夹下，文件夹命名为 &lt;code>JPEGImages&lt;/code>，将图片编号，重新命名为 &lt;code>000000.jpg&lt;/code>、&lt;code>000001.jpg&lt;/code>……这里我提供一个 Python 程序，直接运行即可给图片自动编号：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">path&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="sa">r&lt;/span>&lt;span class="s2">&amp;#34;JPEGImages&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">filelist&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">listdir&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 该文件夹下所有的文件（包括文件夹）&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">file&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">filelist&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">file&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">file&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">filelist&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 遍历所有文件&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Olddir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">file&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 原来的文件路径&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">isdir&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Olddir&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 如果是文件夹则跳过&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">filename&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">splitext&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">file&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 文件名&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">filetype&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;.jpg&amp;#39;&lt;/span> &lt;span class="c1"># 文件扩展名&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Newdir&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">path&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">zfill&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">filetype&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 用字符串函数 zfill 以 0补全所需位数&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rename&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Olddir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">Newdir&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 重命名&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下面进行图片的标注工作。我是用的标注工具是 LabelImg，其 GItHub 仓库地址为：&lt;a href="https://github.com/tzutalin/labelImg" target="_blank" rel="noopener">https://github.com/tzutalin/labelImg&lt;/a>。作者只提供了 Windows 端的可执行文件，在 Linux 端需要自己编译。软件的编译用到了 Python 3 与 Qt 5。依次执行以下命令安装 LabelImg：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install pyqt5-dev-tools
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">pip install lxml
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git clone https://github.com/tzutalin/labelImg.git
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> labelImg
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">make all
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 &lt;code>labelImg&lt;/code> 文件夹下执行 &lt;code>python labelImg.py&lt;/code> 即可运行软件。&lt;/p>
&lt;p>在运行软件之前，可以先打开文件夹下的 &lt;code>\data\predefined_classes.txt&lt;/code> 文件，该文件中的内容是标注所用到的标签。比如我在标注垃圾的时候，会标注 &lt;code>glass&lt;/code>、&lt;code>metal&lt;/code>、&lt;code>paper&lt;/code>、&lt;code>plastic&lt;/code> 四类，那么在该文件中依次填写名称即可。&lt;/p>
&lt;pre tabindex="0">&lt;code>glass
metal
paper
plastic
&lt;/code>&lt;/pre>&lt;p>下面我们需要新建一个文件夹，命名为 &lt;code>VOC + 年份&lt;/code>，比如 &lt;code>VOC2007&lt;/code>，然后将之前编号序号的图片集文件夹复制进来。另外再新建两个文件夹，分别命名为 &lt;code>Annotations&lt;/code> 和 &lt;code>ImageSets&lt;/code>。前者存放我们标注好的文件，后者存放的是之后编译源码的时候用到的一些文件，在 &lt;code>ImageSets&lt;/code> 文件夹下再建一个名为 &lt;code>Main&lt;/code> 的文件夹。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yolo-5.png" alt="yolo-5.png">&lt;span class="caption">※ 文件详情&lt;/span>&lt;/p>
&lt;p>然后我们运行 LabelImg，软件的左侧一栏，点击「改变存放目录」，修改存放地址为 &lt;code>Annotations&lt;/code> 文件夹，接着点击「打开目录」，打开 &lt;code>JPEGImages&lt;/code> 文件夹即可进行标注。标注后生成的文件类型为 &lt;code>xml&lt;/code> 文件，记录了图片的所在位置和标注的横纵坐标。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yolo-6.png" alt="yolo-6.png">&lt;span class="caption">※ 标注图片&lt;/span>&lt;/p>
&lt;p>图片标注完成后，在 &lt;code>VOC2007&lt;/code> 文件夹下创建一个 Python 程序脚本，其代码如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">random&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">trainval_percent&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mf">0.1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">train_percent&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mf">0.9&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xmlfilepath&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;Annotations&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">txtsavepath&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;ImageSets\Main&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">total_xml&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">listdir&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xmlfilepath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">num&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">total_xml&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tv&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">num&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">trainval_percent&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tr&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tv&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">train_percent&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">trainval&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sample&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">tv&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">train&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sample&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">trainval&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">tr&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftrainval&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;ImageSets/Main/trainval.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftest&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;ImageSets/Main/test.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftrain&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;ImageSets/Main/train.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">fval&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;ImageSets/Main/val.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">name&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">total_xml&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">][:&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">trainval&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ftrainval&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">name&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">train&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ftest&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">name&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fval&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">name&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ftrain&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">name&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftrainval&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftrain&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">fval&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ftest&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>运行该脚本，在 &lt;code>ImageSets&lt;/code> 文件夹下会生成四个文件：&lt;code>train.txt&lt;/code>，&lt;code>val.txt&lt;/code>，&lt;code>test.txt&lt;/code> 和 &lt;code>trainval.txt&lt;/code>。&lt;/p>
&lt;h2 id="源码修改">&lt;a href="https://guanqr.com/tech/computer/yolo-v3/#源码修改" class="anchor-link" aria-label="源码修改">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>源码修改&lt;/h2>
&lt;p>回到 &lt;code>darkent&lt;/code> 文件夹，在该文件夹下新建一个名为 &lt;code>VOCdevkit&lt;/code> 的文件夹，将之前制作的数据集 &lt;code>VOC2007&lt;/code> 文件夹复制进来。&lt;/p>
&lt;p>我们需要将数据集中的标注文件转换为 YOLO 格式的标注文件，下载作者提供的 Python 脚本至 &lt;code>darknet&lt;/code> 文件夹：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">wget https://pjreddie.com/media/files/voc_label.py
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>打开该 Python 脚本，修改其中的 &lt;code>sets&lt;/code> 和 &lt;code>classes&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">sets&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">[(&lt;/span>&lt;span class="s1">&amp;#39;2007&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;train&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2007&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;val&amp;#39;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2007&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;test&amp;#39;&lt;/span>&lt;span class="p">)]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">classes&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;glass&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;metal&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;paper&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;plastic&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>classes&lt;/code> 为图片的全部种类。&lt;/p>
&lt;p>运行该脚本，&lt;code>darknet&lt;/code> 文件夹下会生成三个文件：&lt;code>2007_train.txt&lt;/code>，&lt;code>2007_val.txt&lt;/code>，&lt;code>2007_test.txt&lt;/code>，&lt;code>VOCdevkit&lt;/code>下的 &lt;code>VOC2007&lt;/code> 也会多生成一个 &lt;code>labels&lt;/code> 文件夹。然后再执行下面的命令生成最终训练用到的 &lt;code>train.txt&lt;/code> 文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">cat 2007_train.txt 2007_val.txt &amp;gt; train.txt
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下面需要对 darknet 的源码进行一些修改。打开 &lt;code>cfg/voc.data&lt;/code> 文件，修改为：&lt;/p>
&lt;pre tabindex="0">&lt;code>classes= 4
train = /home/guanqirui/darknet/train.txt
valid = /home/guanqirui/darknet/2007_test.txt
names = data/voc.names
backup = backup
&lt;/code>&lt;/pre>&lt;p>其中 &lt;code>classes&lt;/code> 为图像的种类，&lt;code>train&lt;/code> 和 &lt;code>valid&lt;/code> 修改为相应的文件路径。&lt;/p>
&lt;p>然后修改 &lt;code>data/voc.names&lt;/code> 和 &lt;code>coco.names&lt;/code>，内容都修改为图片的种类名称，与之前的 &lt;code>predefined_classes.txt&lt;/code> 文件内容一样。接着修改 &lt;code>cfg/yolov3-voc.cfg&lt;/code>，搜索文件中的关键词 &lt;code>yolo&lt;/code>，总共可以找到三处：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">convolutional&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">size&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stride&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">pad&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">filters&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">27&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">activation&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nx">linear&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">yolo&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">mask&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">anchors&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">33&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">23&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">61&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">62&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">59&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">119&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">116&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">156&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">198&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">373&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">326&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">classes&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">4&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">num&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">9&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">jitter&lt;/span>&lt;span class="p">=.&lt;/span>&lt;span class="mi">3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">ignore_thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="mi">5&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">truth_thresh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">random&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>每一处都要修改两个地方：&lt;code>filters&lt;/code> 和 &lt;code>classes&lt;/code>。&lt;code>classes&lt;/code> 为图片的种类，&lt;code>filters&lt;/code> 的数值等于 &lt;code>3*(5+classes)&lt;/code>。&lt;/p>
&lt;p>在该文件的开头，有：&lt;/p>
&lt;pre tabindex="0">&lt;code>[net]
# Testing
batch=1
subdivisions=1
# Training
# batch=64
# subdivisions=16
&lt;/code>&lt;/pre>&lt;p>在训练的时候，将 &lt;code># Training&lt;/code> 下的 &lt;code> batch&lt;/code> 和 &lt;code>subdivisions&lt;/code> 取消注释，将 &lt;code># Testing&lt;/code> 下的对应值注释掉。反之，在预测图片的时候，&lt;code># Testing&lt;/code> 下的对应值要取消注释。&lt;/p>
&lt;h2 id="训练模型">&lt;a href="https://guanqr.com/tech/computer/yolo-v3/#训练模型" class="anchor-link" aria-label="训练模型">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>训练模型&lt;/h2>
&lt;p>我们需要下载作者提供的预训练模型至 &lt;code>darknet&lt;/code> 文件夹：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">wget https://pjreddie.com/media/files/darknet53.conv.74
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>执行下面的代码开始训练：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">./darknet detector train cfg/voc.data cfg/yolov3-voc.cfg darknet53.conv.74
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="参考">&lt;a href="https://guanqr.com/tech/computer/yolo-v3/#参考" class="anchor-link" aria-label="参考">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>参考&lt;/h2>
&lt;ul>
&lt;li>&lt;a href="https://blog.csdn.net/learning_tortosie/article/details/80947301" target="_blank" rel="noopener">标注工具 LabelImg 在 Ubuntu 系统的安装和使用 | W_Tortoise&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://blog.csdn.net/qq_21578849/article/details/84980298" target="_blank" rel="noopener">超详细教程：YOLO_V3（yolov3）训练自己的数据 | idotc&lt;/a>&lt;/li>
&lt;/ul>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/yolo-v3/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/yolo-v3/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/linux/">Linux</category><category domain="https://guanqr.com/tags/machine-learning/">机器学习</category></item><item><title>
基于 ESP8266 模块的 MicroPython 入门操作</title><link>https://guanqr.com/tech/computer/esp8266-the-internet-of-things/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/esp8266-the-internet-of-things/</guid><pubDate>Fri, 01 May 2020 14:34:04 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-0.jpg" alt="esp8266-0.jpg">&lt;span class="caption">※ ESP8266 模块&lt;/span>&lt;/p>
&lt;p>前些日子老师给每位同学邮寄了一个 ESP8266 模块，要求根据春学期学习的嵌入式系统课程进行一些小型实验。本次实验提前准备的文件和相关软件有：&lt;/p>
&lt;ul>
&lt;li>esp8266-20180511-v1.9.4.bin&lt;/li>
&lt;li>Flash Download Tools&lt;/li>
&lt;li>MicroPython File Uploader&lt;/li>
&lt;li>uPyLoader&lt;/li>
&lt;li>WebREPL&lt;/li>
&lt;/ul>
&lt;h2 id="烧写-micropython-固件">&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#烧写-micropython-固件" class="anchor-link" aria-label="烧写-micropython-固件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>烧写 MicroPython 固件&lt;/h2>
&lt;p>首先将 ESP8266 模块接入计算机，使用 Flash Download Tools 烧写 ESP8266 固件，这里需要注意软件中的一些参数设定和通信端口的选择。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-1.png" alt="esp8266-1.png">&lt;span class="caption">※ 选择使用 ESP8266 烧写工具&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-2.png" alt="esp8266-2.png">&lt;span class="caption">※ 注意参数设定和通信端口的选择&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-3.png" alt="esp8266-3.png">&lt;span class="caption">※ 烧写完成&lt;/span>&lt;/p>
&lt;p>接着运行 MicroPython File Uploader， 选择正确的端口，点击「Open」，出现下图表示烧写成功。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-4.png" alt="esp8266-4.png">&lt;span class="caption">※ 烧写成功&lt;/span>&lt;/p>
&lt;p>然后运行 uPyLoader，操作界面左侧列表为本地文件，右侧列表为实验模块上的文件。操作界面中上部显示的是 WiFi 连接，我们需要进行串口连接，点击刷新按钮，就可以显示选择串口连接的选项。然后点击「Connect」，窗口左上角显示已连接的状态，表示可以进行文件传送。在这一步操作中，如果点击刷新按钮，仍未显示串口连接的选项，可能是因为此前运行 MicroPython File Uploader 结束后未关闭软件，需要关闭后再操作。连接成功后如果弹出报错窗口，无法进行文件传输，可以尝试点击 「File」中的「Init transfer files」进行传输的初始化。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-5.png" alt="esp8266-5.png">&lt;span class="caption">※ 使用 uPyLoader 连接 ESP8266 模块&lt;/span>&lt;/p>
&lt;h2 id="配置无线网络连接">&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#配置无线网络连接" class="anchor-link" aria-label="配置无线网络连接">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配置无线网络连接&lt;/h2>
&lt;p>ESP8266 模块既可以作为服务器（AP），也可以作为客户端（STA）使用。以手机作为热点，模块工作在客户端模式下，计算机无线网卡和模块同时连接手机热点后，处于同一网段中，就可以方便地通过 WebREPL 进行无线连接，进而进行文件收发和程序调试。&lt;/p>
&lt;p>将下面的程序保存为 &lt;code>main.py&lt;/code> 文件，利用 uPyLoader 上传到模块，然后使用 MicroPython File Uploader 启动运行程序，即可进行手机热点连接。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">network&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sta_if&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">network&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">WLAN&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">network&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">STA_IF&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="ow">not&lt;/span> &lt;span class="n">sta_if&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">isconnected&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;connecting to network...&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sta_if&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">active&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sta_if&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">connect&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;&amp;lt;ap_name&amp;gt;&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;&amp;lt;password&amp;gt;&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 手机热点的 SID 和密码&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="ow">not&lt;/span> &lt;span class="n">sta_if&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">isconnected&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">pass&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;network config:&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">sta_if&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">ifconfig&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/esp8266-6.png" alt="esp8266-6.png">&lt;span class="caption">※ 显示网络连接的 IP 地址&lt;/span>&lt;/p>
&lt;h2 id="使用-webrepl-远程连接">&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#使用-webrepl-远程连接" class="anchor-link" aria-label="使用-webrepl-远程连接">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>使用 WebREPL 远程连接&lt;/h2>
&lt;p>WebREPL 客户端功能很强大，通过网页的方式读取 ESP8266 的文件系统，可以上传文件或者下载开发板
中已存在的文件，可以输入指令并实时查看开发板的输出状态。WebREPL 在固件中默认是不启动的，在使用之前，需要先将服务打开。在 MicroPython File Uploader 输入命令：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">webrepl_setup&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到如下界面，输入 &lt;code>E&lt;/code> 确认在 boot 中开启 WebREPL，然后设置 4-6 位的密码，根据提示重启系统。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-7.png" alt="esp8266-7.png">&lt;span class="caption">※ 配置 WebREPL&lt;/span>&lt;/p>
&lt;p>然后输入下面两行代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">webrepl&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">webrepl&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">start&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>就能够开启 WebREPL 了。如果想要配置自动开启服务，则将上述代码添加至 &lt;code>.py&lt;/code> 文件，开机启动即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-8.png" alt="esp8266-8.png">&lt;span class="caption">※ 成功开启 WebREPL&lt;/span>&lt;/p>
&lt;p>这里我出现了一个比较坑的问题，如果我关机后再次连接启动，WebREPL 服务并不会自动启动，目前该问题还未解决。&lt;/p>
&lt;p>下面使用 WebREPL 客户端连接 ESP8266。打开客户端中的 &lt;code>webrepl.html&lt;/code>（或者进入 &lt;a href="http://micropython.org/webrepl/" target="_blank" rel="noopener">http://micropython.org/webrepl/&lt;/a>），修改 IP 地址为你的 ESP8266 IP 地址，根据控制台输出可知，我的 IP 地址为 &lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#ZgotmplZ">ws://192.168.43.119:8266&lt;/a>，点击连接，输入密码，连接成功。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-9.png" alt="esp8266-9.png">&lt;span class="caption">※ 登录 WebREPL 客户端&lt;/span>&lt;/p>
&lt;h2 id="实验操作">&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#实验操作" class="anchor-link" aria-label="实验操作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>实验操作&lt;/h2>
&lt;h3 id="led-闪烁">&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/#led-闪烁" class="anchor-link" aria-label="led-闪烁">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>LED 闪烁&lt;/h3>
&lt;p>在 WebREPL 客户端输入下面的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">machine&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Pin&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">blink&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">led&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">L1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Pin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">led&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">Pin&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">OUT&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">L1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">L1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">L1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">blink&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可以看到 D2 的 LED 灯不断闪烁：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/esp8266-10.gif" alt="esp8266-10.gif">&lt;span class="caption">※ LED 灯闪烁&lt;/span>&lt;/p>
&lt;p>以上程序执行 &lt;code>Ctrl + C&lt;/code> 中断后，程序停在解释执行断点位置，为了不影响程序后台执行，可以使用 Time 定时器中断，修改程序如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">machine&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Pin&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">Timer&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tim&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Timer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">L1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Pin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">Pin&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">OUT&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tim&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">init&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">period&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">2000&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">mode&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Timer&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">PERIODIC&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">callback&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="k">lambda&lt;/span> &lt;span class="n">t&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">L1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">L1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/esp8266-the-internet-of-things/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/esp8266-the-internet-of-things/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/internet-of-things/">物联网</category><category domain="https://guanqr.com/tags/network/">网络</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
Westworld：Rehoboam</title><link>https://guanqr.com/life/films/westworld/</link><guid isPermaLink="true">https://guanqr.com/life/films/westworld/</guid><pubDate>Tue, 28 Apr 2020 22:56:05 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/westworld-0.jpg" alt="westworld-0.jpg">&lt;span class="caption">※ 《西部世界》第三季&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">美&lt;/span>剧《西部世界》的第三季和前两季的风格大不相同。前两季的故事都是发生在「西部世界」这一主题乐园里——一望无际的荒野，甜水镇，骑马的牛仔和暴徒，酒馆的妓女，还有农场的姑娘。观众沉浸在那独具风情的西部小镇，饶有兴趣地观看那些身为人工智能的机器人如何反抗玩弄他们的人类，却不曾想过，能创造出这般主题乐园的时代到底是什么样的。第三季的镜头从荒野转向了城市，向观众展示了这一科技高度发达的未来世界的真面目。&lt;/p>
&lt;p>Rehoboam，这是第三季中才出现的元素。Rehoboam 原本是圣经中出现的人物，&lt;a href="https://en.wikipedia.org/wiki/Rehoboam" target="_blank" rel="noopener">维基百科&lt;/a>中解释道：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Rehoboam was the first king of the Kingdom of Judah. He was a son of and the successor to Solomon and a grandson of David.&lt;/p>&lt;/blockquote>
&lt;p>国内字幕将 Rehoboam 翻译为雷赫波，我认为比罗波安更为恰当。因为剧中的 Rehoboam 是一台具有超强运算能力的强人工智能。「赫」可以联想到频率，单位赫兹，「波」可以联想到光电信号。雷赫波这一翻译，让观众从主观意识上认识到这是一台计算机，而不是一个人。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/westworld-1.jpg" alt="westworld-1.jpg">&lt;span class="caption">※ Rehoboam&lt;/span>&lt;/p>
&lt;p>Rehoboam 是剧中未来世界的重要组成部分。这个世界可以看做是一台大型的计算机，Rehoboam 则是中央处理器，它控制着世界上每一个人的人生轨迹。从你出生开始，你经历的每一件事，你遇见的每一个人，你的工作，你的死亡，都已经被 Rehoboam 推演。你只是在做着 Rehoboam 安排你做的事，你究竟是谁，Rehoboam 拥有最高的话语权。但可悲的是，作为一个独立的人，你并不会意识到 Rehoboam 的存在，你永远相信你自己主宰着自己的命运。Rehoboam 正是属于赛博朋克「控制论」的必要元素。&lt;/p>
&lt;p>为何会诞生 Rehoboam 这样的强人工智能？在剧中的世界里，地球能源枯竭，核爆摧毁了一座又一座的城市，人类走向了灭绝。Serac 和他的哥哥目睹了这一切，意识到人类需要一个神来拯救自己，从混乱中创造出新的秩序。于是他们先是创造了拥有瑕疵的第一代强人工智能——Solomon，也就是典故中 Rehoboam 的父亲，然后又造出了第二代强人工智能——Rehoboam。&lt;/p>
&lt;p>虽然 Rehoboam 控制着所有人的人生轨迹，但终究会有一些违背原有路线，不受控制的人产生。这样的人被称作「离群者」，Serac 的哥哥也是。他们的出现会增加世界的不稳定性，使得人类社会再次走向解体。为了修正由这些「离群者」造成的轨迹偏移，Serac 决定抓捕所有的「离群者」，对他们进行精神上的改造，让他们变得「本分」，然后再将他们送回这个社会。然而修正「离群者」的成功概率很低，大多数「离群者」依然在某个大型的仓库中「冬眠」，包括 Serac 的哥哥。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/westworld-2.jpg" alt="westworld-2.jpg">&lt;span class="caption">※ 黑色色环代表世界秩序的偏离程度&lt;/span>&lt;/p>
&lt;p>这样的社会和西部世界主题乐园有何不同呢？在西部世界中，由人创造的人工智能机器人作为接待员，供前来游玩的游客娱乐。有的接待员程序出现了差错，乐园的修理工会将他们带回工厂进行检修，让他们的程序回到正轨，然后再次将他们送回乐园。只不过在社会中，人类就是接待员，而 Rehoboam 是修理工，机器在玩弄人类。&lt;/p>
&lt;p>我们不难想象，如果人类意识到自己的人生被一个强人工智能支配会做出什么。剧中也给出了这个问题的答案——制造混乱。因为这是人类的兽性本能。人类向往自由，不受约束的自由。当兽性超过奴性，就会产生混乱，人类在混乱中得到精神的解放与满足。如果在未来的某一天，人类不得不造出一个控制机器来约束自己的时候，这样的社会仿佛就在黑洞边缘，被撕扯着，随时可能解体。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/westworld/" target="_blank" rel="noopener">https://guanqr.com/life/films/westworld/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/cyberpunk/">赛博朋克</category><category domain="https://guanqr.com/tags/humankind/">人类</category><category domain="https://guanqr.com/tags/tv-series/">剧集</category></item><item><title>
精致的利己主义者</title><link>https://guanqr.com/life/school/exquisite-egoists/</link><guid isPermaLink="true">https://guanqr.com/life/school/exquisite-egoists/</guid><pubDate>Sat, 25 Apr 2020 23:14:16 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/exquisite-egoists.jpg" alt="exquisite-egoists.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">最&lt;/span>近发生了许多十分不愉快的事情。可能是因为在家待的时间太长了，密闭的空间里，无法宣泄的情绪不断积累，导致自己做什么事情都感到烦躁。晚上夜深人静的时候，独自走在阴暗的街道上，内心不断地挣扎，想要撕心裂肺地呐喊。&lt;/p>
&lt;p>这学期有一门横跨春夏季的长学期课程，《光电检测技术及系统》。因受到疫情的影响，至今没有拿到课程的教材。每周上课的时候，我只能依靠课件对相关概念进行碎片式地理解与拼接。这种形式的复习效率是很低的，因为想要在几十页的幻灯片上寻找某个概念的解释，远不如在书中根据章节精确定位迅速。上周是这门课程的第二个主讲老师刘老师的第一次授课，他是这门课所用教材的主编，老师看到我们没有教材，写作业和复习比较困难，准备联系出版社将教材寄到每一位同学的家中。下课后，助教汇总了我们每一个学生的家庭住址。&lt;/p>
&lt;p>就在老师准备邮寄教材的时候，有一个学生在钉钉群发了一条消息，截了一张学校返校通知的图片，给老师说，马上就要返校，不需要邮寄教材了，可能教材寄到家里的时候，学生都已经在学校了。老师认可了这个学生的想法，说出版社邮寄教材的速度很慢，只将自己办公室仅有的几本多余的教材随机寄给了几名学生，剩下的人，只好等着返校。对此我感到不解，心中对这个给老师「建议」的学生有了疑问：你凭什么能够代表我们所有人？&lt;/p>
&lt;p>学校通知的浙江省内和浙江省外的学生返校时间不同——省外学生比省内学生的返校时间晚。我，作为一个省外学生，距离返校还有半个多月的时间。你凭什么代表我说，马上就要返校了，不需要邮寄教材？这个学生仅仅考虑了自己的利益，他仅仅想到了自己作为浙江省内的学生将要返校，却没有考虑像我这样省外学生的情况。&lt;/p>
&lt;p>在浙大上学，你不得不承认的一个事实就是，班里的大多数学生都来自浙江。像我这样来自秦岭淮河以北的人，更是少数。而少数人只能服从多数人的想法。当几个浙江省内的学生收到老师寄来的教材的时候，在群里欢呼，表达着自己的喜悦与对老师的感谢，我却感到了不公。既然老师选择邮寄身边仅有的几本教材，难道不应该寄给省外的学生吗。我当时的内心有了些许不满，甚至愤怒。&lt;/p>
&lt;p>虽然这仅仅是一个小事，对此事不足以进行大番议论。但正是因为他们所做的一件又一件琐碎的小事，积流成河，倾泻下来，冲击着我的内心。精致的利己主义，这是我对他们所作所为的总结。&lt;/p>
&lt;p>浙大的毛概课程特色是小组合作学习。一学期有两次小组调研和展示，期末的时候老师会根据每个人的课堂发言记录与小组综合表现给每个小组进行打分。每个小组得到分数后，组长再在组内根据每个成员的表现增减个人分数，只要组内所有成员的平均分等于老师的打分即可。采取这样的打分制度是为了防止在小组合作的时候组内有人不负责任。但规定只是规定，总会有人利用规定为自己谋取一些利益。上学期上毛概课程的时候，我所在的小组除了我们七个大三的学生外，还有三个大四的学生。在组内打分的时候，组长决定每个大四的学生扣 8 分，这样总共扣除的 24 分再平均加在我们大三学生的分数上，每个人加 3 分，组长和上台展示的同学额外再加 1 分。为什么要理所当然地「宰」大四的学生呢？因为他们该保研的已经保研，分数不再那么重要。那三个大四的学生也同意了组长的做法。&lt;/p>
&lt;p>类似这样为提高自己的分数「不惜一切代价」的人还有很多。同样是毛概课，隔壁班里有一组成员，组长厚着脸皮「宰」了一个留学生，硬生生地给自己加到了 99.5 的高分，要知道，老师所给的平均分一般都在 89 分上下，我们组宰了三个大四学生才到了 92 分的水平，那一组的组长，真的是为了追逐自己的满绩豁出去了。室友在上学期选修了一门创新创业类课程，这门课同样也是小组赋分制。室友为了组内的展示查了许多资料，也算是出了一份力，但组长为了提升自己的分数到满绩，依然给室友扣了 3 分，还给自己的好朋友扣了 3 分。&lt;/p>
&lt;p>经历了这些事件，我意识到，似乎每个人都将自己的利益（成绩、时间、金钱）放在了第一位，无论作出怎样的事，都要保住自己的利益不受损失。他们并没有意识到自己的所作所为为别人带来了多少麻烦和损失，他们只关心自己，他们身边的一切，都是可利用的工具……&lt;/p>
&lt;p>我希望每一个学生在众人面前发表任何言论的时候，能够考虑到别人的处境；我希望当有人在寻求帮助的时候，对方不会因为浪费了学习的时间而感到厌恶；我希望在课程互评的时候，不会有人因为自己是组长或者凭借人际关系而试图提升自己的分数，压低别人的分数；我希望学生之间能以朋友的关系坦诚相待而不是勾心斗角，防范着他人损害自己的利益……然而这终究只是我的希望，现实是令人失望的。我感觉现在的浙大，有越来越多的学生走向了精致的利己主义。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/exquisite-egoists/" target="_blank" rel="noopener">https://guanqr.com/life/school/exquisite-egoists/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
树莓派，启动</title><link>https://guanqr.com/tech/computer/raspberry-pi-start/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/raspberry-pi-start/</guid><pubDate>Sat, 11 Apr 2020 21:23:31 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">几&lt;/span>天前从淘宝上买的树莓派 4B 和一堆配件终于到货了。为什么要买树莓派呢？大一的电子工程训练课程中有一项任务就是通过「伪」树莓派进行简单的物联网设计，从那时起就很想拥有一个树莓派做一些小研究。正好这学期一门课程的设计作业是要做一个垃圾分拣车，我们小组已经购买了一个树莓派，但因为疫情影响，小组目前无法共同完成项目设计，我就决定自己单独买一个属于自己的树莓派——不用担心自己的胡乱操作对课程设计造成影响。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-0.jpg" alt="raspberry-pi-start-0.jpg">&lt;/p>
&lt;p>由于是第一次接触树莓派，一切都是从零开始。首先在&lt;a href="https://www.raspberrypi.org/downloads/" target="_blank" rel="noopener">官网&lt;/a>下载系统镜像，将存储卡插入计算机，通过 &lt;a href="https://www.balena.io/etcher/" target="_blank" rel="noopener">Etcher&lt;/a> 软件将系统镜像烧录进存储卡，在根目录下新建 SSH 文件。然后将存储卡插入树莓派，连接电源，用网线将树莓派与我的笔记本电脑相连。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-1.png" alt="raspberry-pi-start-1.png">&lt;span class="caption">※ 烧录系统&lt;/span>&lt;/p>
&lt;p>在系统初始化的操作中，遇到的第一个问题就是如何查找树莓派的 IP 地址。首先我的笔记本电脑连接的是家中的 WiFi，需要在计算机的「网络和共享中心」设置 WLAN 链接共享。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-2.png" alt="raspberry-pi-start-2.png">&lt;span class="caption">※ 网络设置&lt;/span>&lt;/p>
&lt;p>然后在 CMD 中输入 &lt;code>arp -a&lt;/code> 查询 IP 地址，在没有连接树莓派之前，有以下列表。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-3.png" alt="raspberry-pi-start-3.png">&lt;span class="caption">※ IP 地址查询&lt;/span>&lt;/p>
&lt;p>连接树莓派后，有以下列表，蓝框中的是连接后多出的列表，由此可以确定红框内的是树莓派的 IP 地址。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-4.png" alt="raspberry-pi-start-4.png">&lt;span class="caption">※ 红框内为树莓派的 IP 地址&lt;/span>&lt;/p>
&lt;p>接下来通过 XShell 通过 IP 地址远程登录树莓派，输入默认的用户名和密码，连接，成功。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-5.png" alt="raspberry-pi-start-5.png">&lt;span class="caption">※ 连接树莓派&lt;/span>&lt;/p>
&lt;p>由于目前没有显示器，想要通过图形界面操作的话，需要通过开启 VNC 通过计算机进行远程控制。在终端执行 &lt;code>sudo raspi-config&lt;/code> 命令，然后选择第五项「Interfacing Options」，再将第三项「VNC」设置为 &lt;em>enable&lt;/em>，开启 VNC 服务。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-6.png" alt="raspberry-pi-start-6.png">&lt;span class="caption">※ 选择「Interfacing Options」&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-7.png" alt="raspberry-pi-start-7.png">&lt;span class="caption">※ 开启 VNC&lt;/span>&lt;/p>
&lt;p>然后下载 VNC Viewer 软件，输入 IP 地址，再输入用户名和密码即可访问图形界面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-8.png" alt="raspberry-pi-start-8.png">&lt;span class="caption">※ VNC Viewer 登录&lt;/span>&lt;/p>
&lt;p>如果无法访问，提示「Cannot currently show the desktop」，可能是因为分辨率设置的问题，执行 &lt;code>sudo raspi-config&lt;/code> 命令，选择第七项「Advanced Options」，再选择第五项「Resolution」，设置分辨率大小为第一项默认的「720x480」以外的分辨率即可。&lt;/p>
&lt;p>如果需要将树莓派设置为中文的话，按照网络上其他人的教程，首先需要安装中文字库：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install ttf-wqy-zenhei
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里安装的是文泉驿的开源中文字体。然后依然是执行 &lt;code>sudo raspi-config&lt;/code> 命令，选择第四项「Localisation Options」，再选择第一项「Change Locale」，在出现的语言列表中选择 &lt;em>zh_CN.GB2312&lt;/em>，&lt;em>zh_CN.GB18030&lt;/em>，&lt;em>zh_CN.GBK&lt;/em>，&lt;em>zh_CN.UTF-8&lt;/em>，确认后还需要选择默认的系统环境语言，这里选择 &lt;em>zh_CN.UTF-8&lt;/em>，然后重启系统。但是我按照这样的步骤进行下来，系统并没有显示为中文。&lt;/p>
&lt;p>我是通过系统首选项「Preferences」的系统设置「Raspberry Pi Configuration」中的「Localisation」，点击「Set Locale...」，在「Character Set」中选择 &lt;em>GB18030&lt;/em>，重启后即可显示中文。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-9.png" alt="raspberry-pi-start-9.png">&lt;span class="caption">※ 中文语言设置&lt;/span>&lt;/p>
&lt;p>对于中文输入法，这里需要注意的是，在系统设置中要将键盘设置为美式键盘。我是用的是 SCIM 输入法。执行以下命令安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install scim-pinyin
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我在初次安装后并没有在键盘选项中看到中文输入的选项，这时先退出 SCIM 输入法，然后在终端执行 &lt;code>sudo scim&lt;/code> 重启键盘，就能愉快的输入中文了。&lt;/p>
&lt;p>经过一系列的初始化设置后，树莓派的桌面终于呈现在眼前。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raspberry-pi-start-10.png" alt="raspberry-pi-start-10.png">&lt;span class="caption">※ 树莓派桌面&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/raspberry-pi-start/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/raspberry-pi-start/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/linux/">Linux</category><category domain="https://guanqr.com/tags/raspberry-pi/">树莓派</category></item><item><title>
使用 MATLAB 和 Dcraw 处理 RAW 图像文件</title><link>https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/</guid><pubDate>Wed, 08 Apr 2020 19:52:40 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">本&lt;/span>学期正在学习有关数字图像处理的课程，今天课堂讨论的时候，忽然回忆起去年的一门实验课的内容——分析相机成像的像质。我在那时写了一篇相关内容的&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/">总结&lt;/a>，其中提到了一位学长所写的使用最为原始的方法对相机的 RAW 原始图像文件进行处理的&lt;a href="https://ridiqulous.com/process-raw-data-using-matlab-and-dcraw/" target="_blank" rel="noopener">文章&lt;/a>，直到现在我才对其中的原理有了一定系统性的了解。于是，按照那篇文章的教程，我使用 MATLAB 和 Dcraw 对 RAW 文件进行了处理。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>数码相机的 RAW 文件存储的是相机拍摄的最为原始的、未被处理的数据。相比于经过压缩的 JPEG 文件，RAW 文件记录了更多的场景信息，保留了更宽广的色域以及动态范围，也留下了更为自由的后期处理空间。不同厂商的相机一般都拥有自己的 RAW 格式，比如常见的 CR2、NEF、ARW、DNG 等。&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>一般来说，处理 RAW 文件的软件有 Camera Raw、LightRoom 等，这些都是通过简单的图形界面对图像的颜色、曝光度、白平衡等进行直观的操作。对于摄影、媒体、艺术领域，这些软件已经足够强大，但是在图像处理、计算机视觉等研究领域，我们需要的是把照片中的信息转换为能够通过数字来定量表示的形式，或者通过一些公式、算法直接对图像（或图像的某一部分）进行处理，再或者对两张图片之间的差别进行量化表示，这时候 LightRoom 这些软件就显得有些无能为力了。&lt;/p>
&lt;p>使用 MATLAB 对 RAW 文件进行处理并从中提取出我们想要的图像信息，这是一种最彻底、最根本的获取相机传感器原始信息的方法，并且这些信息都是以数字的形式记录下来，可以很方便地在此基础上进行图像的存储、传输或者进一步操作。&lt;/p>
&lt;h2 id="dcraw-预处理">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#dcraw-预处理" class="anchor-link" aria-label="dcraw-预处理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Dcraw 预处理&lt;/h2>
&lt;p>由于各家相机厂商对 RAW 文件采取了不同的封装方式，MATLAB 并不能一一识别这些文件格式，因此我们需要先利用 Dcraw 将不同扩展名的文件转换为 MATLAB 能够读取的图片格式——tiff。Dcraw 是一种 RAW 文件解析方案，它能够识别市面上大部分的相机型号，并将相应的 RAW 文件导出为 tiff 或 PGM/PPM/PAM 格式文件。事实上 Dcraw 本身就可以算作一种 RAW 文件的处理程序，它拥有白平衡设置、伽马校正、色彩空间转换、去马赛克、亮度调节等一系列功能，并且提供了 C 源代码&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>，让用户可以在任何操作系统上对其进行编译。这里我们仅仅把它作为 Raw 文件到 tiff 的一种媒介，而不对图像做任何的处理——把所有的操作都留到 MATLAB 里。&lt;/p>
&lt;p>我们要把可执行文件 dcraw.exe 放在 &lt;code>C:\windows&lt;/code> 路径下，这样可以直接从运行（&lt;code>Win&lt;/code> + &lt;code>R&lt;/code>）中执行。在运行中输入 cmd 进入命令行窗口，这时已经可以直接调用 Dcraw，或者输入 &lt;code>dcraw&lt;/code> 查看相关的一些命令。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-0.png" alt="raw-process-0.png">&lt;/p>
&lt;p>由于我们不准备用 Dcraw 对 RAW 文件做任何处理，只需要输入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">dcraw -4 -T -D -v pathfilename
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中 &lt;code>pathfilename&lt;/code> 为 RAW 图像文件的路径。这里的 &lt;code>-T&lt;/code> 表示将图像以 tiff 格式导出，&lt;code>-D&lt;/code> 表示不对图像做任何的彩色插值和亮度调节，&lt;code>-v&lt;/code> 表示在 Dcraw 处理结束后在屏幕上显示相关信息，而 &lt;code>-4&lt;/code> 等价于 &lt;code>-6 -W -g 1 1&lt;/code>，即表示导出的图像为 16 位（而不是常见的 JPEG 的 8 位 ）、不进行任何白平衡校正、不进行任何伽马校正。在一些需要获取拍照时白平衡设置的场合也可以使用 &lt;code>-6 -w -g 1 1 -T -D&lt;/code> 这样的参数组合，但这里我们使用 &lt;code>-4 -T -D&lt;/code> 就好。各参数的意义在官方文档页面中有详细的说明。&lt;/p>
&lt;p>由于目前身边没有相机，我使用了去年实验课中用 Canon EOS 1100D 在 TL84 光源下拍摄的一幅 24 色色卡图。运行：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">dcraw -4 -T -D -v image.CR2
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到了 tiff 格式的图像如下图所示。这里可以看出得到的 tiff 图像是灰度图像，只记录了光强度的信息，不包含任何颜色信息。由于各个像素上记录的光强度是一个标量，这幅图像相当于一个 $m\times n$ 的矩阵，其中 $m$ 和 $n$ 分别为 CMOS 纵向和横向的像素数。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-1.png" alt="raw-process-1.png">&lt;/p>
&lt;p>我使用 FastStone Image Viewer 软件能够直接浏览 RAW 文件和 tiff 文件，对于 RAW 文件来说，虽然我们在图像查看器中能够看到图像，但软件中展示的图像只是嵌入在 RAW 文件中的经过一系列转码的缩略图而并非 RAW 本身。为了避免各种图像浏览软件不同的解码方式对预览图像造成的影响，下面都使用 MATLAB 中的 &lt;code>imshow&lt;/code> 函数来浏览图像。&lt;/p>
&lt;p>我们先在 MATLAB 中读取该图像，再进行后面的处理：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">raw&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">double&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;image.tiff&amp;#39;&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="线性处理">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#线性处理" class="anchor-link" aria-label="线性处理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>线性处理&lt;/h2>
&lt;p>出于节省数据存储空间的目的，一些厂商的 RAW 文件并不完全与像素点上的照度呈线性关系，而是会在编码上做一些处理，比如非线性压缩等。不过这里我们不需要担心这个问题，因为之前在 Dcraw 中使用 &lt;code>-4&lt;/code> 参数时就已经解决了这个问题。我们只要确保各个像素的数值是分布在 14-bit（虽然 Dcraw 中的 &lt;code>-4&lt;/code> 参数将图像设为 16 位，但其最大值仍然为 $2^{14}-1=16383$）能够储存的范围之间即可，一般为 $0\sim 16383$，并将超出这个区间的数值给拉回区间中。再将这些数值归一化至 $0\sim 1$ 区间中。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">black&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">2047&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">saturation&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">13584&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lin_bayer&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">raw&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">black&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">saturation&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">black&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 归一化至 [0,1]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lin_bayer&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_bayer&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c">% 确保没有大于 1 或小于 0 的数据&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里的 &lt;code>black&lt;/code> 和 &lt;code>saturation&lt;/code> 两个参数的数值需要对 RAW 文件通过 &lt;code>dcraw -v -T&lt;/code> 命令查看，因为不同的厂家和不同的相机型号该数值都可能不同。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-2.png" alt="raw-process-2.png">&lt;/p>
&lt;p>这一步我们得到的图像如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-3.png" alt="raw-process-3.png">&lt;/p>
&lt;h2 id="白平衡校正">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#白平衡校正" class="anchor-link" aria-label="白平衡校正">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>白平衡校正&lt;/h2>
&lt;p>这一步的操作是对 RGB 三通道乘上不同的增益系数，以补偿因为三种滤波片具有不同光谱灵敏度带来的影响。如果不考虑图像亮度，将 R 通道乘以2并保持 G 通道不变，或者将 G 通道乘以 0.5 并保持 R 通道不变，这两种方式对画面颜色变化的影响是等效的。因此我们通常将 G 通道的增益系数固定为1，仅仅考虑 R 和 B 的系数。关于这两个系数具体数值应该取多少，则取决于相机的型号以及拍摄时使用的白平衡参数。在相机的白平衡设置里选择不同场景，就是在调整这两个增益系数。如果想还原为拍摄时使用的白平衡设置，可以在 Dcraw 中使用 &lt;code>-w -v&lt;/code> 参数，这时屏幕上会显示出当时所使用的 R、B 通道的增益系数。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-4.png" alt="raw-process-4.png">&lt;/p>
&lt;p>上图中的 2.639648 和 1.319336 分别表示拍摄这张图像时所使用的 R 通道和 B 通道的增益。这里要注意的是，一旦使用了 &lt;code>-w&lt;/code> 参数，Dcraw 就会自动完成彩色插值的工作，这样得到的 tiff 图像就不再是原始灰度图像了。因此我们仅仅是使用 &lt;code>-w&lt;/code> 来查看增益系数。得到了 R、B 通道的增益后，我们需要将相应的像素值乘上这个系数。不同相机具有不同的拜耳滤镜排列方式，因此需要根据实际情况进行增益系数的乘法。这里我使用的是相机拍摄时的白平衡参数，即 &lt;code>r_multiplier = 2.639648&lt;/code> 和 &lt;code>b_multiplier = 1.319336&lt;/code>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">wb_multipliers&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mf">2.639648&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">1.319336&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c">% for particular condition, from dcraw;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">mask&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_bayer&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_bayer&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">wb_multipliers&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;rggb&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">balanced_bayer&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">lin_bayer&lt;/span> &lt;span class="o">.*&lt;/span> &lt;span class="n">mask&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>上面代码中的 &lt;code>wbmask&lt;/code> 函数是根据实际拜耳滤镜的排列生成对应的掩板：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>colormask &lt;span class="p">=&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="nf">wbmask&lt;/span>&lt;span class="p">(&lt;/span>m,n,wbmults,align&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">% COLORMASK = wbmask(M,N,WBMULTS,ALIGN)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Makes a white-balance multiplicative mask for an image of size m-by-n&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% with RGB while balance multipliers WBMULTS = [R_scale G_scale B_scale].&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% ALIGN is string indicating Bayer arrangement: &amp;#39;rggb&amp;#39;,&amp;#39;gbrg&amp;#39;,&amp;#39;grbg&amp;#39;,&amp;#39;bggr&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colormask&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Initialize to all green values;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">switch&lt;/span> &lt;span class="n">align&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="s">&amp;#39;rggb&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="s">&amp;#39;bggr&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="s">&amp;#39;grbg&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="s">&amp;#39;gbrg&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">colormask&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="k">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">wbmults&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>完成白平衡调整后的图像如下：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-5.png" alt="raw-process-5.png">&lt;/p>
&lt;h2 id="色彩差值">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#色彩差值" class="anchor-link" aria-label="色彩差值">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>色彩差值&lt;/h2>
&lt;p>色彩差值又称去马赛克，经过色彩插值之后原来的灰度图像就成为了一幅三通道的彩色图像。空间插值有非常多的方法，这里为了方便我们使用 MATLAB 内置的 &lt;code>demosaic&lt;/code> 函数，它能够直接把单通道的灰度图像转换为三通道的彩色图像。由于 &lt;code>demosaic&lt;/code> 函数的输入必须为 uint8 或 uint16 类型，我们需要把原来的 double 型先转换为 uint16 型。注意这里的 &lt;code>'rggb'&lt;/code> 应该根据相机的具体情况而调整。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">temp&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">uint16&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">balanced_bayer&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">balanced_bayer&lt;/span>&lt;span class="p">(:))&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="mi">16&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lin_rgb&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">double&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">demosaic&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;rggb&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="mi">16&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>完成这一步之后我们就得到了最原始的彩色信息。一些应用中所需要的就是这幅图像的数据，可以使用 &lt;code>imwrite&lt;/code> 函数将其保存在硬盘中。后续的色彩空间转换、Gamma 校正等步骤视情况决定是否需要执行。色彩插值后得到的图像如下：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-6.png" alt="raw-process-6.png">&lt;/p>
&lt;h2 id="色彩空间转换">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#色彩空间转换" class="anchor-link" aria-label="色彩空间转换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>色彩空间转换&lt;/h2>
&lt;p>同样一幅图像文件分别在两台显示器上显示，其各个像素的 RGB 值肯定是一样的，但是人眼看上去往往都存在细微的颜色偏差，这就是因为 RGB 色彩空间是设备相关的，而任何两台显示器的 RGB 色彩空间一般都不会完全相同。为了使一幅图片在各种显示设备上有尽量一致的视觉效果，我们就需要一个设备无关的色彩空间作为传递媒介。目前在电子设备中用的最多的设备无关的色彩空间（有时也称绝对色彩空间）就是 sRGB 和 AdobeRGB。如果在 Dcraw 中使用了色彩插值，则自动包含了一个色彩空间变换的过程。Dcraw 先将相机相关的 RGB 空间转换至 XYZ 空间，然后再从 XYZ 转换到 sRGB 作为输出。在 MATLAB 中我们将这两个步骤合二为一。对于大部分相机，我们可以得到从 XYZ 空间到相机相关空间的变换关系，即已知 &lt;em>XYZ-to-Camera&lt;/em>。而作为两种绝对色彩空间，&lt;em>sRGB-to-XYZ&lt;/em> 也是固定的。根据矩阵运算法则，我们可以得到从相机相关空间到 sRGB 空间的变换关系：&lt;/p>
&lt;div>
$$
A_{sRGB\leftarrow Camera}=(A_{Camera\leftarrow XYZ}\cdot A_{XYZ\leftarrow sRGB})^{-1}
$$
&lt;/div>
&lt;p>不同相机的 &lt;em>Camera&lt;/em> 不同，因此我们必须获得适合自己相机的 $A_{Camera\leftarrow XYZ}$。在 Dcraw 的 C 文件中收集了市面上大多数相机的 ，可以在 dcraw.c 中的 &lt;code>adobe_coeff&lt;/code> 函数下找到。&lt;code>adobe_coeff&lt;/code> 函数下的数字是 $A_{Camera\leftarrow XYZ}$ 中各元素乘以 10000 后逐行排列的数值。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-7.png" alt="raw-process-7.png">&lt;/p>
&lt;p>我使用的 Canon EOS 1100D 有：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span> &lt;span class="s">&amp;#34;Canon EOS 1100D&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x3510&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span> &lt;span class="mi">6444&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">904&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">893&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4563&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">12308&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2535&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">903&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2016&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6728&lt;/span> &lt;span class="p">}&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在原文中，作者说也可以使用 &lt;a href="https://supportdownloads.adobe.com/detail.jsp?ftpID=6881" target="_blank" rel="noopener">Adobe DNG Converter&lt;/a> 软件来查看相机的 $A_{Camera\leftarrow XYZ}$，但我并没有找到安装路径下的 meta_info.ColorMatrix2 文件……&lt;/p>
&lt;p>我们得到的数值对应了矩阵中逐列排列的各元素。以 Canon EOS 1100D 为例，有：&lt;/p>
&lt;div>
$$
A_{Camera\leftarrow XYZ}=\frac{1}{10000}
\begin{bmatrix}
6444&amp;-904&amp;-893\\
-4563&amp;12308&amp;2535\\
-903&amp;2016&amp;6728
\end{bmatrix}
$$
&lt;/div>
&lt;p>而 &lt;em>sRGB-to-XYZ&lt;/em> 可以在国际照明委员会（CIE）公布的标准中查到，有：&lt;/p>
&lt;div>
$$
A_{XYZ\leftarrow sRGB}=
\begin{bmatrix}
0.4124564&amp;0.3575761&amp;0.1804375\\
0.2126729&amp;0.7151522&amp;0.0721750\\
0.0193339&amp;0.1191920&amp;0.9503041
\end{bmatrix}
$$
&lt;/div>
&lt;p>得到了这两个矩阵，自然也就能够算出 $A_{sRGB\leftarrow Camera}$。在色彩空间转换过程中必须考虑这样一个问题：由于白色（客观意义上的白色）在相机的 RGB 空间和 sRGB 空间中都是用 $[1,1,1]^{T}$ 来表示，而我们上述白平衡调整的目的就是要确保图像中白色的部分在任何空间中都呈现出白色。因此以下关系必须成立：&lt;/p>
&lt;div>
$$
\begin{bmatrix}
1\\
1\\
1
\end{bmatrix}_{Camera}
=
\Bigg[A_{Camera\leftarrow sRGB}\Bigg]
\begin{bmatrix}
1\\
1\\
1
\end{bmatrix}_{sRGB}
$$
&lt;/div>
&lt;p>根据线性代数的知识，要满足上式，矩阵 $A_{Camera\leftarrow sRGB}$ 的每一行元素之和必须为 1，因此在 MATLAB 中我们必须再加上一个步骤，将 $A_{Camera\leftarrow sRGB}$ 各行归一化为 1。色彩空间变换的代码如下。注意矩阵 &lt;code>XYZ2Cam&lt;/code> 请根据自己使用的相机型号进行修改。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">sRGB2XYZ&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mf">0.4124564&lt;/span> &lt;span class="mf">0.3575761&lt;/span> &lt;span class="mf">0.1804375&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="mf">0.2126729&lt;/span> &lt;span class="mf">0.7151522&lt;/span> &lt;span class="mf">0.0721750&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="mf">0.0193339&lt;/span> &lt;span class="mf">0.1191920&lt;/span> &lt;span class="mf">0.9503041&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% sRGB2XYZ is an unchanged standard&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">XYZ2Cam&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">6444&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">904&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">893&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4563&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">12308&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2535&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">903&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2016&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6728&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Here XYZ2Cam is only for Canon EOS 1100D, can be found in adobe_coeff in dcraw.c&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sRGB2Cam&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">XYZ2Cam&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">sRGB2XYZ&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sRGB2Cam&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">sRGB2Cam&lt;/span>&lt;span class="o">./&lt;/span> &lt;span class="nb">repmat&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sum&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sRGB2Cam&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% normalize each rows of sRGB2Cam to 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Cam2sRGB&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">sRGB2Cam&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lin_srgb&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">apply_cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_rgb&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">Cam2sRGB&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lin_srgb&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_srgb&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c">% Always keep image clipped b/w 0-1&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中 &lt;code>apply_cmatrix&lt;/code> 函数就是把我们得到的 $A_{sRGB\leftarrow Camera}$ 应用到原图像的各个通道上：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>corrected &lt;span class="p">=&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="nf">apply_cmatrix&lt;/span>&lt;span class="p">(&lt;/span>im,cmatrix&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">% Applies CMATRIX to RGB input IM. Finds the appropriate weighting of the&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% old color planes to form the new color planes, equivalent to but much&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% more efficient than applying a matrix transformation to each pixel.&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">im&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">~=&lt;/span>&lt;span class="mi">3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">error&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Apply cmatrix to RGB image only.&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">r&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">g&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">cmatrix&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">im&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">corrected&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">cat&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">g&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>经过色彩空间变换后的图像如下，可以看出相比变换之前的图像，各个彩色色块饱和度明显增加。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-8.png" alt="raw-process-8.png">&lt;/p>
&lt;h2 id="亮度校正与伽马校正">&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#亮度校正与伽马校正" class="anchor-link" aria-label="亮度校正与伽马校正">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>亮度校正与伽马校正&lt;/h2>
&lt;p>对于大部分处于研究目的的图像处理流程，这一步不建议执行。在这一步之前，我们得到的图像仍然是与拍摄场景呈线性的，而线性数据往往才是对分析图像有帮助的。但是为了得到更好的显示效果，亮度与 Gamma 校正通常是必不可少的。根据经验，一张图像的平均亮度是像素最大值的四分之一时我们认为它是亮度合适的。因此我们调整全局亮度使其符合这一假设：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">grayim&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">rgb2gray&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lin_srgb&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Consider only gray channel&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grayscale&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mf">0.25&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">mean&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">grayim&lt;/span>&lt;span class="p">(:));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">bright_srgb&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">lin_srgb&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">grayscale&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Always keep image value less than 1&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>亮度校正后的图像如下所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-9.png" alt="raw-process-9.png">&lt;/p>
&lt;p>接下来是 Gamma 校正。Gamma 曲线是图像、信号处理领域使用最为广泛的非线性处理，我们最常见的就是 Photoshop 中的「曲线」功能，如果将曲线拉成 $y=x^{\gamma}$ 的形状，就相当于对图像做了一次 Gamma 校正。在 sRGB 的官方文档中使用的是 $\gamma=1/2.4$，并在函数值较小的部分应用了小范围的线性函数。但是现在大多数平台（Windows，Mac）都使用了 $\gamma=1/2.2$ 的曲线，因此这里我们也使用 2.2 作为参数，并且不考虑局部的线性化。如果需要精确的 sRGB 标准的校正函数，可以查看其官方文档。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">nl_srgb&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">bright_srgb&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mf">2.2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>经过 Gamma 校正后的图像如下。由于使用的 Gamma 曲线是一条凸函数，相当于把图像暗部的细节展宽，因此得到的图像要比校正前更亮。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-10.png" alt="raw-process-10.png">&lt;/p>
&lt;p>至此一套通用的 RAW 文件处理流程就完成了，接下来可以根据需要再进行一系列的处理过程。&lt;/p>
&lt;p>下面是我在网络上下载的一幅由 Sony 相机拍摄的 RAW 文件的处理流程。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-11.png" alt="raw-process-11.png">&lt;span class="caption">※ 直接读取的 tiff 文件&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-12.png" alt="raw-process-12.png">&lt;span class="caption">※ 线性处理后的图像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-13.png" alt="raw-process-13.png">&lt;span class="caption">※ 白平衡调整后的图像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-14.png" alt="raw-process-14.png">&lt;span class="caption">※ 色彩插值后的图像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-15.png" alt="raw-process-15.png">&lt;span class="caption">※ 转换至 sRGB 空间后的图像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-16.png" alt="raw-process-16.png">&lt;span class="caption">※ 经过亮度校正后的图像&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/raw-process-17.png" alt="raw-process-17.png">&lt;span class="caption">※ 经过 Gamma 校正后的图像&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://zh.wikipedia.org/zh/RAW" target="_blank" rel="noopener">维基百科 | RAW&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>这里附上 Dcraw 的 &lt;a href="https://guanqr.com/uploads/dcraw.zip">C 源代码&lt;/a>，为了避免因缺少部分函数库而无法编译，压缩包里也包含了 Windows 系统下的可执行文件。&amp;#160;&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/matlab/">MATLAB</category><category domain="https://guanqr.com/tags/white-balance/">白平衡</category></item><item><title>
将博客持续集成地部署到 IPFS</title><link>https://guanqr.com/tech/website/host-blog-on-ipfs/</link><guid isPermaLink="true">https://guanqr.com/tech/website/host-blog-on-ipfs/</guid><pubDate>Fri, 03 Apr 2020 21:05:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/ipfs-gateway-header.png" alt="ipfs-gateway-header.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">去&lt;/span>年年末的时候，一些我关注的博主已经将博客部署到了 IPFS 上了。虽然目前诸如 IPFS 这样的分布式网路仍然有很长的路要走，HTTP 协议仍然是互联网的主流，但分布式网络是互联网的未来。作为一个爱折腾的人，本着任何新鲜事物都要尝试的心态，我当然也要尝试一下这种新鲜的操作，以实现去中心化信息存储。在本文中，我将简单讲述什么是 IPFS，我是如何借助 Cloudflare，Pinata，GitHub 和 Netlify 四个平台将个人博客持续集成地部署到 IPFS 上的，以及总结我在操作中遇到的一些问题。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>星际文件系统（ InterPlanetary File System，IPFS）属于分布式互联网（Distributed Web），本质上是一种内容可寻址、版本化、点对点超媒体的分布式存储、传输协议，目标是补充甚至取代目前普遍使用的超文本媒体传输协议（HTTP），希望构建更快、更安全、更自由的互联网时代。&lt;/p>
&lt;p>在 IPFS 系统中，内容会分区块存放，并分散存储在 IPFS 网络中的节点上。系统会给内容的每一个块计算哈希值，然后把所有块的哈希值拼凑起来，再计算一次哈希值，从而得到最终的哈希值。同时每个节点会维护一张 DHT（分布式哈希表），包含数据块与目标节点的映射关系。IPFS 是通过哈希去请求文件的，它会使用这个分布式哈希表找到文件所在的节点，验证并取回文件，根据哈希重新组合文件。&lt;/p>
&lt;p>本文中主要介绍的部署方式是借助于 Netlify 实现的持续集成部署，无需在你的计算机上安装 IPFS。对于原生的部署方式，我自己并没有全面地研究操作过，因此这里不再进行介绍。关于如何使用 Netlify 实现持续集成和自动部署，我在《&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/">博客通过 Netlify 实现持续集成&lt;/a>》这篇文章中进行了详细的介绍，如有问题，可以直接参考这一篇文章，本文仅简单描述。这里需要注意的是，本文的内容适用于 Hugo 博客，你的计算机必须已经安装了 &lt;a href="https://git-scm.com/downloads" target="_blank" rel="noopener">Git&lt;/a> 和 &lt;a href="https://nodejs.org/zh-cn/download/" target="_blank" rel="noopener">Node.js&lt;/a>。如果你使用的是其他的博客框架，部分内容可能需要自行修改，请查阅其他相关文章。&lt;/p>
&lt;h2 id="准备环境">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#准备环境" class="anchor-link" aria-label="准备环境">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>准备环境&lt;/h2>
&lt;p>Netlify 可以通过加载指定的 GitHub 仓库文件，通过指定命令自动部署博客网站，因此你需要将你的博客文件夹初始化成一个 Git 仓库。输入以下命令即可：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">git init
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>接下来需要在博客文件夹根目录下创建 &lt;code>.gitignore&lt;/code> 文件，告诉 Git 忽略上传一些无关的文件。具体内容如下，这里给出的文件内容仅供参考，因为不同的系统和不同的博客框架有不同的文件结构，请结合自己的情况进行修改。这里要重点关注一下 &lt;code>.env&lt;/code> 文件，这是必须要添加进去的，原因在后文中会讲到。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># SSG 生成的文件所在目录&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">public
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Node.js&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">node_modules
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Hugo&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">resources
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Hexo&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">db.json
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">.deploy*
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">*.log
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># macOS 系统&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">.DS_Store
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 老版本的 Windows 系统&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Thumbs.db
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># ipfs-deploy&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">.env
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后是 Node.js， 我们也要初始化博客所在的文件夹生成 &lt;code>package.json&lt;/code> 文件，它的作用是告诉 Node.js 我们所需的模块。如果你的博客文件夹已经有该文件则可跳过这一步。通常情况下，已有的 &lt;code>package.json&lt;/code> 文件内容信息并不完整。很有可能你的 &lt;code>package.json&lt;/code> 文件中缺少 &lt;code>description&lt;/code>、&lt;code>main&lt;/code>、&lt;code>scripts&lt;/code>、&lt;code>repository&lt;/code>、&lt;code>keywords&lt;/code>、&lt;code>bugs&lt;/code>、&lt;code>homepage&lt;/code> 这些信息。这里建议都添加进来，因为如果缺少部分信息，很可能在后面的操作中报错。输入以下命令即可进行初始化：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm init
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这样会出来一个交互界面，你需要填写相关的信息。如果你不需要这个交互界面，你可以直接执行 &lt;code>npm init -y&lt;/code>，这样会将默认设置写入，然后你可以直接打开 &lt;code>package.json&lt;/code> 文件编辑相关内容。如果你有不确定的地方，可以参考一下&lt;a href="https://github.com/guanqr/blog/blob/master/package.json" target="_blank" rel="noopener">本博客的该文件&lt;/a>。&lt;/p>
&lt;h2 id="模块的安装与配置">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#模块的安装与配置" class="anchor-link" aria-label="模块的安装与配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>模块的安装与配置&lt;/h2>
&lt;p>接下来，我们要安装 &lt;a href="https://github.com/ipfs-shipyard/ipfs-deploy" target="_blank" rel="noopener">ipfs-deploy&lt;/a> 模块，它是将博客部署到 IPFS 上的工具。输入以下命令安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm install ipfs-deploy --save-dev
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>安装结束后，如果你是在当前目录初次使用 &lt;code>npm&lt;/code> 安装模块，那么你会发现多了一个 &lt;code>node_modules&lt;/code> 文件夹和一个 &lt;code>package-lock.json&lt;/code> 文件。关于文件夹，这就是你安装的模块所在的目录；关于文件，这是自动生成的该模块及其依赖的详细版本信息。同时，你会发现 &lt;code>package.json&lt;/code> 文件多了几行，它的作用是告诉 Node.js 我们所需的模块，在这里的话也就是 &lt;code>ipfs-deploy&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;devDependencies&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;ipfs-deploy&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;^7.14.0&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们在之前的步骤中将 &lt;code>node_modules&lt;/code> 文件夹添加到了 &lt;code>.gitignore&lt;/code> 列表，也就是说，我们上传博客文件夹到 GtiHub 仓库的时候，并不会上传 &lt;code>node_modules&lt;/code> 文件夹。一是因为该文件夹包含了很多文件，上传速度很慢，二是因为 Netlify 会通过识别 &lt;code>package.json&lt;/code> 文件重新安装所需模块，所以不必将该文件夹上传。&lt;/p>
&lt;p>然后修改 &lt;code>package.json&lt;/code> 文件，在 &lt;code>scripts&lt;/code> 内添加两条命令：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;scripts&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;build&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;hugo --gc --minify --cleanDestinationDir &amp;amp;&amp;amp; gulp build&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;ipfs-deploy&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;ipfs-deploy -p pinata public -u pinata -d cloudflare -C -O&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>第一条 &lt;code>build&lt;/code> 即构建命令， Hugo 的命令即为 &lt;code>hugo --gc --minify --cleanDestinationDir&lt;/code>。这里我还添加了 &lt;code>gulp build&lt;/code> 是因为我使用了 Gulp 对博客进行了其他的一些操作（&lt;a href="https://guanqr.com/tech/website/realize-pwa/">实现 PWA 功能&lt;/a>），如果你也使用了 Gulp 请将其命令添加到这里，如果没有的话可以忽略。第二条 &lt;code>ipfs-deploy&lt;/code> 就是将博客部署到 IPFS 的命令，里面的参数说明可通过以下命令查看：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">ipfs-deploy --help
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们还需要添加一个 &lt;code>.env&lt;/code> 文件，它是 &lt;code>ipfs-deploy&lt;/code> 所需的环境变量，如下：&lt;/p>
&lt;pre tabindex="0">&lt;code>IPFS_DEPLOY_PINATA__API_KEY=
IPFS_DEPLOY_PINATA__SECRET_API_KEY=
IPFS_DEPLOY_CLOUDFLARE__API_EMAIL=
IPFS_DEPLOY_CLOUDFLARE__API_KEY=
IPFS_DEPLOY_CLOUDFLARE__ZONE=example.com
IPFS_DEPLOY_CLOUDFLARE__RECORD=_dnslink.example.com
&lt;/code>&lt;/pre>
&lt;div class="notice notice-warning" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/>&lt;/svg>&lt;/div>&lt;p>特别注意：这个文件包含重要信息，千万不要把它上传到 GitHub 上！请务必将 &lt;code>.env&lt;/code> 添加到 &lt;code>.gitignore&lt;/code> 文件！&lt;/p>&lt;/div>
&lt;p>对于该文件内容的前两项，先去 &lt;a href="https://pinata.cloud/" target="_blank" rel="noopener">Pinata&lt;/a> 注册，注册完成你应该就能看到你的 API KEY 和 SECRET API KEY，将之分别填入以上文件。中间两项，你要去 &lt;a href="https://www.cloudflare.com/" target="_blank" rel="noopener">Cloudflare&lt;/a> 注册，然后将你注册的邮箱填入上方，接下来去&lt;a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" rel="noopener">这里&lt;/a>获取你的 API Key 并填入上方。最后两项，将 &lt;code>example.com&lt;/code> 替换为你的域名即可，如果你的博客使用的是子域名，那么只需设置最后一项为 &lt;code>_dnslink.blog.example.com&lt;/code>，这里假设你的子域名为 &lt;code>blog.example.com&lt;/code>，注意是只需设置最后一项，前面的域名仍需填写主域名。&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:2">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/pinata.png" alt="pinata.png">&lt;/p>
&lt;p>Pinata 平台的服务是上传至 IPFS 的关键。Pinata 提供的是 Pinning（钉定）服务。简单来说，就是将你的文件上传到 IPFS 网络上，并且会同步到它建立的众多 IPFS 节点上（&lt;a href="https://cluster.ipfs.io/" target="_blank" rel="noopener">IPFS 集群&lt;/a>）。当 IPFS 上的任一个节点想要下载你的这个文件时，速度才有保证。我们之所以需要它，是因为 Cloudflare 的 IPFS Gateway 其实只是一种「缓存」服务，让我们能够利用 Cloudflare 的全球节点高速访问 IPFS 网络上的内容，但其服务器不会永久保存 IPFS 网络上的文件。&lt;/p>
&lt;p>一个 IPFS 节点不是一块本地硬盘，节点的存储空间是有限的（默认是 10GB）。当节点存储的文件总大小超出了这个值后，节点就会自动删除一些文件（清「缓存」），而 Pinning 就告诉节点：该文件很重要，请不要清除它。如此，节点就会保留你的文件。你的文件没被清除，它就依然能够被其它节点访问到，你的文件在 IPFS 网络上的可访问性就得到了保证。目前的 IPFS 节点数量虽已不少但还远远不够，且绝大部分人还是通过第三方提供的 IPFS Gateway 来访问你的博客的，而不是通过本地 IPFS 节点。这样的话，一旦提供 IPFS Gateway 服务的服务器清除了你的文件，你的博客就无法访问了。除非，你在本地每周 7 天每天 24 小时一直运行着 &lt;code>ipfs daemon&lt;/code>。但是，即使这样其实也远远不够，举个例子：你的文件不幸被 Cloudflare 的 IPFS Gateway 的服务器清除，而正好此时有一个读者点开了你的博客，此时会发生什么呢？该服务器会重新去 IPFS 网络寻找，但此时的情况就如下图了：&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:3">&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/one-ipfs-node-only.png" alt="one-ipfs-node-only.png">&lt;/p>
&lt;p>这就意味着你的读者可能要等待很久很久才能打开你的博客，如此你的博客的用户体验将会极差。因此，为了保证博客的可访问性，你就需要使用 Pinata 或其它服务提供商提供的 Pinning 服务了。&lt;/p>
&lt;p>接下来你必须将你的域名移交给 Cloudflare 管理（即将域名服务器地址修改为 Cloudflare 提供的地址）。因为我们是通过 &lt;a href="https://dnslink.io/" target="_blank" rel="noopener">DNSLink&lt;/a> 来实现将域名「解析」到 IPFS 的，即添加一条包含了构建好的博客文件夹（即 &lt;code>public&lt;/code>）的 Hash 值——即 IPFS 上的「URL」，因为 IPFS 是内容寻址，即通过内容的 Hash 值寻址——的 DNS 记录。而你的博客每构建一次，&lt;code>public&lt;/code> 文件夹的 Hash 值就会改变（如果博客有修改的话），因此如果你想保证读者能够及时获取到博客的最新版本，你就必须在每次发布博客的同时更新这条 DNS 记录。这种重复的无聊工作肯定不应该手动操作，而应该交给程序自动化处理，这就是 &lt;code>ipfs-deploy&lt;/code> 的一个很重要的功能了，而它目前仅支持 Cloudflare。另外，Cloudflare 支持裸域名（即直接 &lt;code>example.com&lt;/code>）CNAME。综上，目前我们必须将域名移交给 Cloudflare 管理。操作的流程如下：&lt;/p>
&lt;ol>
&lt;li>在 Cloudflare 注册后点击 Add a Site，输入你的域名后按流程走；&lt;/li>
&lt;li>去你的域名服务商修改域名服务器的地址，设置好后可以用 Google 提供的&lt;a href="https://developers.google.com/speed/public-dns/cache" target="_blank" rel="noopener">工具&lt;/a>清空域名的 NS 缓存以加速；&lt;/li>
&lt;li>回到 Cloudflare，点击 Check 或 Re-check now，然后等待几分钟，刷新页面可以看到成功提示；&lt;/li>
&lt;li>设置 DNS，删除原有的一些没用的值（如 A 记录和 AAAA 记录），然后添加一条 CNAME：Add record &amp;gt; Type：&lt;code>CNAME&lt;/code>，Name：&lt;code>example.com&lt;/code>，Target：&lt;code>cloudflare-ipfs.com&lt;/code>&amp;gt; Save；&lt;/li>
&lt;li>SSL/TLS &amp;gt; Always Use HTTPS；&lt;/li>
&lt;/ol>
&lt;p>在添加 CNAME 记录的时候，如果你用的是子域名，将 Name 的值改为子域名即可。我的域名之前使用的是 &lt;a href="https://www.dnspod.cn/" target="_blank" rel="noopener">DNSPod&lt;/a> 的 DNS 解析服务，将域名提交到 Cloudflare 之后，网站会提示更改你的 Nameserver：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dns-nameserver.png" alt="dns-nameserver.png">&lt;/p>
&lt;p>这时候就需要回到域名服务商那里修改 Nameserver 到：&lt;/p>
&lt;pre tabindex="0">&lt;code>merlin.ns.cloudflare.com
vita.ns.cloudflare.com
&lt;/code>&lt;/pre>&lt;p>我们是通过 IPFS Gateway 获取 IPFS 上的内容的，它的作用就是一个网关，连接了 HTTP 和 IPFS，让我们能够使用目前的浏览器方便地访问 IPFS 上的内容。这就是我们添加的这条 CNAME 的作用，将你的域名重定向到安装了 IPFS Gateway 的服务器。以上面添加的这条 CNAME 为例，当一个读者通过浏览器点开 &lt;code>example.com&lt;/code> 后，浏览器去问 DNS 服务器：这个域名的 IP 地址是什么。DNS 服务器找到一条 CNAME 记录，指向 &lt;code>cloudflare-ipfs.com&lt;/code> 并且它的 IP 地址是 &lt;code>104.18.253.167&lt;/code>，于是 DNS 服务器告诉浏览器：IP 地址是 &lt;code>104.18.253.167&lt;/code>。于是浏览器向这个 IP 地址发起一个 HTTP 请求，这就成功地将你的域名重定向到安装了 IPFS Gateway 的服务器了。之后发生了什么呢？安装了 IPFS Gateway 的服务器会通过 HTTP 请求里的 Header 信息获取到访问的域名是 &lt;code>example.com&lt;/code>，然后它去查询该域名的 DNS 记录，读取到 &lt;code>dnslink&lt;/code> 后，就会获取里面包含的 Hash 值（IPFS 地址），最后服务器去 IPFS 网络中获取到相应内容并通过 HTTP 返回给浏览器，浏览器将获取的内容渲染，该读者就能开始开心地阅读你的博客了。可见如果你的博客想要实现 HTTPS，你 CNAME 指向的支持 IPFS Gateway 的服务器就必须要有属于你的域名的 SSL 证书，而目前好像只有 Cloudflare 的 IPFS Gateway 才会提供这项服务——为你的域名生成相应的 SSL 证书。&lt;/p>
&lt;p>完成以上步骤后，我们可以先在本地测试一下，执行命令：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm run build &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> npm run ipfs-deploy
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>部署成功后，你可以从以下任何一个网址访问博客（将我的博客域名替换为你自己的即可）：&lt;/p>
&lt;ol>
&lt;li>&lt;a href="https://guanqr.com/" target="_blank" rel="noopener">https://guanqr.com/&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://ipfs.io/ipns/guanqr.com/" target="_blank" rel="noopener">https://ipfs.io/ipns/guanqr.com/&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://cloudflare-ipfs.com/ipns/guanqr.com/" target="_blank" rel="noopener">https://cloudflare-ipfs.com/ipns/guanqr.com/&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://gateway.pinata.cloud/ipns/guanqr.com/" target="_blank" rel="noopener">https://gateway.pinata.cloud/ipns/guanqr.com/&lt;/a>&lt;/li>
&lt;li>其他 &lt;a href="https://ipfs.github.io/public-gateway-checker/" target="_blank" rel="noopener">IPFS 网关&lt;/a>……&lt;/li>
&lt;/ol>
&lt;p>我们可以通过浏览器的控制台检查一下网页的 Header 信息，显示了 IPFS 的地址。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/host-blog-on-ipfs.png" alt="host-blog-on-ipfs.png">&lt;/p>
&lt;p>这里会出现一个问题，如果你不是通过第一个域名访问的，即你自己的域名，那么页面资源加载可能会出现问题，因为你的博客的使用的是绝对链接而不是相对链接。比如说，你的博客之前的域名是 &lt;code>https://example.com/&lt;/code>，而现在你访问的是 &lt;code>https://a.com/ipfs/example.com/&lt;/code>，这就会导致大量用绝对链接的文件 404。以博客主题的 CSS 文件 &lt;code>/css/main.css&lt;/code> 的加载为例，该文件的正确的有效的地址是 &lt;code>https://a.com/ipfs/example.com/css/main.css&lt;/code>，但通过 IPFS 网关访问绝对链接 &lt;code>/css/main.css&lt;/code>，请求的地址其实是 &lt;code>https://a.com/css/main.css&lt;/code>。怎么解决呢？将它变成相对链接即可，如上面的链接如果是 &lt;code>./css/main.css&lt;/code>，那就没问题了。不过目前很多博客主题的构建并没有使用相对链接……这是个很大的问题，可能需要自己手动解决了。&lt;/p>
&lt;p>到目前为止，部署到 IPFS 的基本步骤已经完成，接下来需要做的就是通过 Netlify 实现持续集成地部署。先去 &lt;a href="https://app.netlify.com/signup/" target="_blank" rel="noopener">Netlify&lt;/a> 注册，然后按照提示授权、选择博客的 GitHub 仓库（如果遇到问题可以参考《&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/">博客通过 Netlify 实现持续集成&lt;/a>》），完成后前往 Site settings &amp;gt; Build &amp;amp; deploy &amp;gt; Environment 添加 6 个环境变量，名字和值分别对应 &lt;code>.env&lt;/code> 文件里的值（因为在将博客文件夹上传至 GitHub 仓库的时候，并没有上传 &lt;code>.env&lt;/code> 文件，所以这一步十分重要）。然后需要新建一个 &lt;code>netlify.toml&lt;/code> 文件，添加一些持续集成所需的设置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">build&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">base&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;/&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">publish&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;public/&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">command&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;npm run build&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">context&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">production&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">command&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;npm run build &amp;amp;&amp;amp; npm run ipfs-deploy&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="nx">build&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">environment&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">HUGO_VERSION&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;0.68.3&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">HUGO_ENV&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;production&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">HUGO_ENABLEGITINFO&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;true&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">redirects&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">from&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.netlify.com/*&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">to&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.com/:splat&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">status&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">301&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">force&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里，&lt;code>build&lt;/code> 为基本构建命令设置，&lt;code>publish&lt;/code> 即我们要发布的文件夹（其实这个已经没必要了，因为我们现在是部署在 IPFS 上，而非 Netlify 的服务器上），&lt;code>command&lt;/code> 即要执行的命令，我们直接用 npm 执行写在 &lt;code>package.json&lt;/code> 里的命令即可。&lt;code>context.production&lt;/code> 的内容即为构建博客并部署到 IPFS 的命令。&lt;code>build.environment&lt;/code> 的内容是有关 Hugo 博客框架的设置，如果你是用的是 Hexo，可以忽略。&lt;code>redirects&lt;/code> 设置的是域名的重定向，我在 Netlify 中设置的仓库名为 &lt;code>guanqr&lt;/code>，对应的域名为 &lt;code>guanqr.netlify.com&lt;/code>，我们需要将该域名重定向到自己的主域名，这样也利于 SEO。&lt;/p>
&lt;p>以上所有步骤完成后，将你的博客文件夹提交到 GitHub 仓库即可：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">git add .
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git commit -m &lt;span class="s2">&amp;#34;deploy to IPFS&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git push origin master
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们可以在 Netlify 上查看到部署到 IPFS 的详细信息：&lt;/p>
&lt;pre tabindex="0">&lt;code>8:10:05 PM: &amp;gt; ipfs-deploy -p pinata public -u pinata -d cloudflare -C -O
8:10:06 PM: - 📦 Calculating size of public…
8:10:06 PM: ✔ 🚚 Directory public weighs 126.0 MiB.
8:10:06 PM: - 📠 Uploading and pinning to Pinata…
8:10:16 PM: ✔ 📌 Added and pinned to Pinata with hash:
8:10:16 PM: ℹ 🔗 QmemkTVoNHX2GzZJngKZJjncTBj4bZx6wq6v5mnn9dSLTa (​https://gateway.pinata.cloud/ipfs/QmemkTVoNHX2GzZJngKZJjncTBj4bZx6wq6v5mnn9dSLTa/​)
8:10:16 PM: - ⚙️ Validating configuration for Cloudflare…
8:10:16 PM: ℹ 📡 Beaming new hash to DNS provider Cloudflare…
8:10:17 PM: ✔ 🙌 SUCCESS!
8:10:17 PM: ℹ 🔄 Updated DNS TXT _dnslink.guanqr.com to:
8:10:17 PM: ℹ 🔗 dnslink=/ipfs/QmemkTVoNHX2GzZJngKZJjncTBj4bZx6wq6v5mnn9dSLTa
8:10:17 PM: QmemkTVoNHX2GzZJngKZJjncTBj4bZx6wq6v5mnn9dSLTa
&lt;/code>&lt;/pre>&lt;p>目前来看，部署到 IPFS 后在国内的访问速度较部署到 Netlify 上快一些，PWA 站点缓存内容的更新速度也比原来要快，可能是因为网站的访问通过的是 Cloudflare 的 IPFS Gateway，有一定的加速。不过目前这样的部署方式还存在一些问题，比如无法自定义 404 页面，Cloudflare 上看不到浏览统计信息，不支持强制跳转到 HTTPS 等等。我去年在进行部署的时候，使用的域名是子域名 &lt;code>blog&lt;/code>，将域名的 NameServer 转为 Cloudflare 进行 DNS 解析服务的时候，过了两天在国内仍然无法正常访问，只能通过开代理访问，目前这个问题产生的原因尚未知道。除此之外，还有一个网址的重定向问题，由于我的部分文章 URL 结构进行了修改，之前通过 Netlify 部署的时候，可以进行 URL 的重定向设置，但现在部署到 IPFS 这些设置就失效了，好在 Hugo 有一个 &lt;a href="https://gohugo.io/content-management/urls/#aliases" target="_blank" rel="noopener">Aliases&lt;/a> 的功能，这个问题也就很快得到了解决。对于域名的重定向，Cloudflare 也提供了域名重定向的服务（添加 Page Rules），我的博客域名也进行了多次地修改，子域名从 &lt;code>www&lt;/code> 到 &lt;code>blog&lt;/code> 再到现在直接使用的 &lt;code>guanqr.com&lt;/code>，为了保证以前的读者收藏的文章能够正常访问，我也使用了 Cloudflare 的域名重定向功能。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://www.cloudflare.com/distributed-web-gateway/" target="_blank" rel="noopener">https://www.cloudflare.com/distributed-web-gateway/&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>图源：&lt;a href="https://medium.com/pinata/how-to-easily-host-a-website-on-ipfs-9d842b5d6a01" target="_blank" rel="noopener">https://medium.com/pinata/how-to-easily-host-a-website-on-ipfs-9d842b5d6a01&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>图源：&lt;a href="https://medium.com/pinata/dedicated-ipfs-networks-c692d53f938d" target="_blank" rel="noopener">https://medium.com/pinata/dedicated-ipfs-networks-c692d53f938d&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/host-blog-on-ipfs/" target="_blank" rel="noopener">https://guanqr.com/tech/website/host-blog-on-ipfs/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/decentralization/">去中心化</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/netlify/">Netlify</category></item><item><title>
数字图像处理基础练习</title><link>https://guanqr.com/tech/optics/digital-image-processing-practice/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/digital-image-processing-practice/</guid><pubDate>Wed, 01 Apr 2020 15:33:24 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="空间域图像处理">&lt;a href="https://guanqr.com/tech/optics/digital-image-processing-practice/#空间域图像处理" class="anchor-link" aria-label="空间域图像处理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>空间域图像处理&lt;/h2>
&lt;p>以下为两幅相位相差 $180^{\circ}$ 的干涉图，其中第一幅相位为 $I_1=a+b\cos(\varphi)$，第二幅相位为 $I_2=a+b\cos(\varphi+\pi)$。确定中心低反射圆环（光纤）的中心坐标。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-0.png" alt="digital-image-processing-practice-0.png">&lt;span class="caption">※ 第一幅干涉图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-1.png" alt="digital-image-processing-practice-1.png">&lt;span class="caption">※ 第二幅干涉图&lt;/span>&lt;/p>
&lt;p>因为两幅图的干涉条纹相位相差 $180^{\circ}$，所以可以考虑将两幅图相加，从理论上讲，这样可以基本消除干涉条纹。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.bmp&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;2.bmp&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pic1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imlincomb&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;加法运算&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-2.png" alt="digital-image-processing-practice-2.png">&lt;span class="caption">※ 图像相加&lt;/span>&lt;/p>
&lt;p>可以看出干涉条纹基本消除。目前存在的问题是，还有部分条纹并没有完全消除，且圆环的颜色与背景的颜色相近。为了确定圆环的边界，需要先对图像进行二值化处理。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">pic2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imbinarize&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.29&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;二值化&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-3.png" alt="digital-image-processing-practice-3.png">&lt;span class="caption">※ 二值化处理&lt;/span>&lt;/p>
&lt;p>经二值化处理后，可以明显分辨出圆的位置。且消除了上一幅图干涉条纹的影响。接下来进行边缘检测，这里使用的是 &lt;code>edge&lt;/code> 函数和 Sobel 算子。因为在二值化后的图像中，圆的周围仍有部分杂散的黑色区域，会影响图像的识别结果，所以要对圆的所在区域进行截取。这里图像截取确定的坐标范围是 $x\in[280,460]$，$y\in[180,320]$。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">pic3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">edge&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;sobel&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">280&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">460&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">180&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">320&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">y2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Sobel 算子边缘检测&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-4.png" alt="digital-image-processing-practice-4.png">&lt;span class="caption">※ Sobel 算子边缘检测&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-5.png" alt="digital-image-processing-practice-5.png">&lt;span class="caption">※ 截取后的图像&lt;/span>&lt;/p>
&lt;p>圆心位置确定的方法很简单，因为经过二值化处理和边缘检测后，只剩下圆的轮廓，轮廓为白色，表示为 $1$。只要找到一个点，该点到 $1$ 的距离为定值即可。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">pic4&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">pic3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">y2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">center_x&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">center_y&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pic3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">x1&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">center_x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">y1&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">center_y&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;*r&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">sprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;(%.1f,%.1f)&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;Color&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;red&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;标注中心坐标&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-6.png" alt="digital-image-processing-practice-6.png">&lt;span class="caption">※ 标注坐标&lt;/span>&lt;/p>
&lt;h2 id="频率域图像处理">&lt;a href="https://guanqr.com/tech/optics/digital-image-processing-practice/#频率域图像处理" class="anchor-link" aria-label="频率域图像处理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>频率域图像处理&lt;/h2>
&lt;p>给定图像如下所示，消除图像中的周期性干扰。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-7.png" alt="digital-image-processing-practice-7.png">&lt;span class="caption">※ 带有周期性干扰的图像&lt;/span>&lt;/p>
&lt;p>首先绘制原图像的频域图，观察噪声分布，具体代码和频域图像如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;1.bmp&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">rgb2gray&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fft2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I3&lt;/span>&lt;span class="p">,[]);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-8.png" alt="digital-image-processing-practice-8.png">&lt;span class="caption">※ 原图的频域图像&lt;/span>&lt;/p>
&lt;p>频域图像的高频部分有周期分布的噪声，考虑使用理想低通滤波器消除高频噪声干扰。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">round&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">round&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">d&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">a&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nb">j&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">b&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">distance&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">sqrt&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">a0&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">b0&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">distance&lt;/span> &lt;span class="o">&amp;lt;&lt;/span>&lt;span class="p">=&lt;/span> &lt;span class="n">d&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">h&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">h&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">uint8&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ifft2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ifftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">))));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-9.png" alt="digital-image-processing-practice-9.png">&lt;span class="caption">※ 经理想低通滤波器处理后的图像&lt;/span>&lt;/p>
&lt;p>由上图可以看出，经理想低通滤波器处理后，原图的周期噪声基本消除，但原图左上方的阴影等细节部分也有所丢失。滤波后的频域图像如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-10.png" alt="digital-image-processing-practice-10.png">&lt;span class="caption">※ 滤波后的频域图像&lt;/span>&lt;/p>
&lt;h2 id="综合练习">&lt;a href="https://guanqr.com/tech/optics/digital-image-processing-practice/#综合练习" class="anchor-link" aria-label="综合练习">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>综合练习&lt;/h2>
&lt;p>识别文字时拍到照片有下图所示的阴影，造成文字分割困难，尝试改善图像质量。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-11.png" alt="digital-image-processing-practice-11.png">&lt;span class="caption">※ 原图带有阴影，文字识别困难&lt;/span>&lt;/p>
&lt;p>首先使用同态滤波将原图阴影去除，代码如下所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">I1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;img.png&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">rgb2gray&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 转为灰度图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">fspecial&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;gaussian&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="mf">0.25&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">fspecial&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;gaussian&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="p">],&lt;/span> &lt;span class="mf">1.95&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">F&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">f1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">f2&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">%构建一个高通&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">J1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.0&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">double&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I2&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="c">%分开入射光和反射光&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">J2&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">imfilter&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">F&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;symmetric&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#39;conv&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 将高通滤波器与对数转换之后的图像卷积&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">J3&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">1.0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% 变换回来&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">minJ&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J3&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">maxJ&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J3&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">J4&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">J3&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">minJ&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">maxJ&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">minJ&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 同态滤波&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imshow&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>经同态滤波处理后的图像如下所示，可以看到阴影变得均匀。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-12.png" alt="digital-image-processing-practice-12.png">&lt;span class="caption">※ 经同态滤波处理后的图像&lt;/span>&lt;/p>
&lt;p>然后进行二值化处理即可。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">k&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">im2bw&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J4&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.462&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% 二值化&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/digital-image-processing-practice-13.png" alt="digital-image-processing-practice-13.png">&lt;span class="caption">※ 二值化后的图像&lt;/span>&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>本文内容源自浙江大学光电学院本科课程《机器视觉与图像处理》的课堂练习，图像处理的软件为 MATLAB，图像处理的方法只是个人的尝试，并非标准方法，因此仅供参考。&lt;/p>&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/digital-image-processing-practice/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/digital-image-processing-practice/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/matlab/">MATLAB</category></item><item><title>
提问者与回答者</title><link>https://guanqr.com/life/ideas/ask-and-answer/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/ask-and-answer/</guid><pubDate>Fri, 20 Mar 2020 21:50:17 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>提问是提问者为了满足自身的需求，获取到自己尚未了解的知识。回答则是回答者对问题的探究与思考，加深了对问题本身的理解。&lt;/p>
&lt;p>有一种人会向与问题不相关领域的人进行提问，消磨回答者的回答热情，他们连最基本的提问方向都没有明白，这一种人不能称得上是提问者。我认为真正的提问者可以分为三种。第一种，盲目地提问。这一种人最显而易见的特点就是爱问问题，遇到一切问题都会向其他人寻求帮助，希望别人能够给他提供一些解决问题的思路。当回答者解决了他们的问题，他们也就不会再去思考问题本身，而是继续去询问下一个问题。他们停留在问题的表层，仅仅是简单的提问者。这一种提问者是不提倡的，他们就像是一个需要导航才能上路的路痴，如果缺少了导航，他们无法移动半步。所有人都应该避免成为这一种提问者。&lt;/p>
&lt;p>第二种，思考后提问。这一种人面对问题会先进行一系列的思考，在脑中搜寻对于问题的解决方法，如果自己对于问题无能为力，才会将期望寄托于其他人。当回答者向他们解决问题的时候，他们会吸收回答者的答案，将其贴上属于自己的标签，使其成为属于自己的知识。他们接触到了问题的本质，他们有资格成为回答者。这一种提问者是最常见的，也是回答者愿意帮助的。&lt;/p>
&lt;p>第三种，进攻式提问。这一种人对于问题本身有自身的看法，他们提问是为了验证自己的想法是否正确，同时也想向别人展示自己对问题的看法，想让别人接受自己的观点，得到别人对自己观点的认可。如果自己的想法是错误的，他们会产生质疑。这一种提问者会让回答者陷入一种尴尬的局面，但这一种提问者是最具有创造力的，他们只是需要一个值得信任的指南针为他们指明方向，一旦有了方向，他们懂得如何前进。&lt;/p>
&lt;p>何谓回答者？能够解决某个问题，说明你专注于该问题相关的领域，并非是回答者。然而能够为别人讲解这个问题，让别人从「不懂」到「懂」，这才是回答者所具有的才能。有很多人在自己的领域中展现出自己的才能，但他们对问题有着深入研究，却并不没有能力向别人讲述自己对于问题的理解。&lt;/p>
&lt;p>回答者需要拥有十足的耐心，特别是面对第一种提问者的时候。因为第一种提问者的问题往往是你认为最不能称得上是「问题」的问题。回答者也需要拥有坚定的立场，当回答者面对第三种提问者的时候，他们接受到了不同观念的冲击，这时候必须坚持自己的想法，不要被提问者扰乱思维。&lt;/p>
&lt;p>我认为我是「合格」的回答者。如果有人询问我问题，不论这个人属于提问者中的哪一种人，我都会耐心帮助他解决问题。但我不能称得上是「合格」的提问者，因为我不愿意向他人提问。遇到任何问题时我的观念是「自己解决」。产生这一观念的原因，一是我发现只要愿意深入研究问题，没有什么是不能自己解决的；二是大部分人是不善于回答问题的，如果我向他人询问一些问题，得到的也不是我想要的答案。与其麻烦别人，不如依靠自己。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/ask-and-answer/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/ask-and-answer/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/humankind/">人类</category></item><item><title>
Ubuntu 系统的安装与配置</title><link>https://guanqr.com/tech/computer/install-ubuntu-desktop/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/install-ubuntu-desktop/</guid><pubDate>Thu, 19 Mar 2020 10:33:30 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>大一的时候第一次接触到了 Linux，在我的计算机中安装了 Win10 + Ubuntu 双系统。但因为我并没有学习有关 Linux 系统的课程（毕竟是一个非计算机学院学生），对于 Linux 的使用很生疏； 平时专业课需要各种基于 Windows 系统的设计软件，硬盘的空间也越来越小——最终将其删除了。目前专业必修课基本已经结束学习，有了充足的时间让我来学习自己感兴趣的领域。昨天一位学长向我们介绍 YOLO V3 算法，建议我们在 Linux 上深度学习……于是，我又把 Ubuntu 系统给装回来了。本文以 Windows 10 系统为主系统，BIOS 模式为 UEFI，安装的 Ubuntu 版本为 18.04 LTS。&lt;/p>
&lt;h2 id="准备">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#准备" class="anchor-link" aria-label="准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>准备&lt;/h2>
&lt;p>首先需要将 Windows 的快速启动和安全启动功能关闭。进入系统设置中的「电源和睡眠」设置页面，点击右边的「其他电源设置」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-0.png" alt="install-ubuntu-desktop-0.png">&lt;span class="caption">※ 「电源和睡眠」设置页面&lt;/span>&lt;/p>
&lt;p>这里进入了「电源选项」页面，在当前页面的左边，点击「选择电源按钮的功能」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-1.png" alt="install-ubuntu-desktop-1.png">&lt;span class="caption">※ 「电源选项」页面&lt;/span>&lt;/p>
&lt;p>在页面的下方有关于关机的相关设置，不过勾选框的灰色的，无法勾选。我们需要点击上方的「更改当前不可用的设置」，接着就可以取消勾选了。将「启动快速启动(推荐)」取消勾选即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-2.png" alt="install-ubuntu-desktop-2.png">&lt;span class="caption">※ 「选择电源按钮的功能」页面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-3.png" alt="install-ubuntu-desktop-3.png">&lt;span class="caption">※ 取消勾选「启动快速启动(推荐)」&lt;/span>&lt;/p>
&lt;p>接着重启计算机，进入 BIOS，在 Security 页面中设置 Secure Boot 为 Disabled。对于如何进入 BIOS 的问题，不同厂家的计算机进入的方法也不同。我使用的是 ThinkPad，开机显示 LOGO 的时候，按 Enter 键，然后再按 F1 键即可进入。&lt;/p>
&lt;p>下面我们需要进行硬盘分区。在现有硬盘的基础上划分一块区域来安装 Ubuntu 系统。右键「这台电脑」，点击「管理」选项，进入计算机管理页面。然后点击「磁盘管理」，我们就可以看到目前计算机硬盘的分区情况。挑选一个你要进行分区的硬盘，右键，点击「压缩卷」，压缩的大小即为你要分区的大小。图中所示的两个盘即为我分出来的，总共为 80G，这里不用进行细分，在下面安装 Ubuntu 的时候再进行细分，这里只要分出一块区即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-4.png" alt="install-ubuntu-desktop-4.png">&lt;span class="caption">※ 硬盘分区&lt;/span>&lt;/p>
&lt;p>然后，在&lt;a href="https://ubuntu.com/download/desktop" target="_blank" rel="noopener">官网&lt;/a>下载对应版本的系统镜像，然后准备一个空的 U 盘，使用刻录软件将系统镜像刻录在 U 盘中。下载系统镜像的时候可能因为网速问题，下载得很慢，我建议使用国内镜像网站下载，比如&lt;a href="http://mirrors.aliyun.com/ubuntu-releases/18.04/" target="_blank" rel="noopener">阿里云镜像&lt;/a>。刻录软件我使用的是 &lt;a href="https://cn.ultraiso.net/" target="_blank" rel="noopener">UltraISO 软碟通&lt;/a>。&lt;/p>
&lt;h2 id="安装">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#安装" class="anchor-link" aria-label="安装">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装&lt;/h2>
&lt;p>我们制作了 U 盘启动盘，将 U 盘插入计算机，选择 U 盘启动。ThinkPad 计算机使用 U 盘启动的方法为：重启计算机，在开机 LOGO 页面按 Enter 键，再按 F12，选择 USB 启动选项。等待片刻，在窗口中选择 Install Ubuntu，就进入到了 Ubuntu 的图形操作界面，接下来就可以顺利地进行安装了。&lt;/p>
&lt;p>语言选择中文，键盘布局选择默认的汉语，连接 WiFi，在「更新和其他软件」中选择「正常安装」选项。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-5.jpg" alt="install-ubuntu-desktop-5.jpg">&lt;span class="caption">※ 选择语言&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-6.jpg" alt="install-ubuntu-desktop-6.jpg">&lt;span class="caption">※ 选择键盘布局&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-7.jpg" alt="install-ubuntu-desktop-7.jpg">&lt;span class="caption">※ 连接网络&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-8.jpg" alt="install-ubuntu-desktop-8.jpg">&lt;span class="caption">※ 选择「正常安装」&lt;/span>&lt;/p>
&lt;p>在「安装类型」中，系统检测到你的计算机中存在 Windows Boot Manager，询问你要选择如何安装 Ubuntu。我们直接选择「其他选项」即可，相当于自定义安装。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-9.jpg" alt="install-ubuntu-desktop-9.jpg">&lt;span class="caption">※ 选择「其他选项」&lt;/span>&lt;/p>
&lt;p>接下来是最关键的分区操作。选中之前分出来的 80G 空闲区，点击 + 号，添加新的分区。我们只需要划分两个区，一个是 &lt;code>/swap&lt;/code>，一个是 &lt;code>/&lt;/code>。至于其他的一些区，比如 &lt;code>/home&lt;/code>、&lt;code>/usr&lt;/code> 等等不用分区，因为空间大小固定后，将来如果空间不足会很麻烦。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-10.jpg" alt="install-ubuntu-desktop-10.jpg">&lt;span class="caption">※ Ubuntu 分区&lt;/span>&lt;/p>
&lt;p>&lt;code>/swap&lt;/code> 区我们分配 16 G，因为我的计算机内存为 16G 大小。分区类型选择「逻辑分区」，位置为「空间起始位置」，用于「交换空间」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-11.jpg" alt="install-ubuntu-desktop-11.jpg">&lt;span class="caption">※ `/swap` 区&lt;/span>&lt;/p>
&lt;p>剩下的容量全部分配给 &lt;code>/&lt;/code> 区。分区类型选择「主分区」，位置为「空间起始位置」，用于「Ext4 日志文件系统」，挂载点为 &lt;code>/&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-12.jpg" alt="install-ubuntu-desktop-12.jpg">&lt;span class="caption">※ `/` 区&lt;/span>&lt;/p>
&lt;p>完成后，我们需要查看 &lt;code>/&lt;/code> 区的设备名是什么。这里我的是 /dev/sdb6。一般来说名称为 /dev/sdaX 或者 /dev/sdbX （X 为阿拉伯数字）。记下该区的名字，在窗口最下方的「安装启动引导器的设备」处，选择该区。注意一定不要选错。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-13.jpg" alt="install-ubuntu-desktop-13.jpg">&lt;span class="caption">※ 安装启动引导器&lt;/span>&lt;/p>
&lt;p>然后是选择时区，这里默认的是上海。最后需要填写计算机的基本信息，设置用户名和密码。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-14.jpg" alt="install-ubuntu-desktop-14.jpg">&lt;span class="caption">※ 选择时区&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-15.jpg" alt="install-ubuntu-desktop-15.jpg">&lt;span class="caption">※ 填写基本信息&lt;/span>&lt;/p>
&lt;p>以上步骤完成后，静静等待安装即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-16.png" alt="install-ubuntu-desktop-16.png">&lt;span class="caption">※ Ubuntu 用户图形界面&lt;/span>&lt;/p>
&lt;h2 id="配置">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#配置" class="anchor-link" aria-label="配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配置&lt;/h2>
&lt;h3 id="更换国内源">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#更换国内源" class="anchor-link" aria-label="更换国内源">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>更换国内源&lt;/h3>
&lt;p>为了节省下载某些软件包的速度，可以考虑将源换为国内的镜像源。打开终端，执行下面的命令。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo gedit /etc/apt/sources.list
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>将 sources.list 文件中的内容注释掉，更换为阿里云的源：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="安装软件">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#安装软件" class="anchor-link" aria-label="安装软件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装软件&lt;/h3>
&lt;p>&lt;strong>安装 Chrome 浏览器&lt;/strong>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install google-chrome-stable
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;strong>安装 TIM（或 QQ）&lt;/strong>：&lt;/p>
&lt;p>首先我们需要安装 Ubuntu 移植版 Deepin-wine 环境。前往 &lt;a href="https://github.com/wszqkzqk/deepin-wine-ubuntu" target="_blank" rel="noopener">GitHub 仓库&lt;/a>下载压缩包文件。解压后切换到解压文件目录，在终端中输入下述代码安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo sh ./install.sh
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后就可以安装相关应用。前往 &lt;a href="https://mirrors.aliyun.com/deepin/pool/non-free/d/deepin.com.qq.office/" target="_blank" rel="noopener">https://mirrors.aliyun.com/deepin/pool/non-free/d/deepin.com.qq.office/&lt;/a> 下载 TIM，完成安装即可顺利运行。其他的一些应用可以在 &lt;a href="http://mirrors.aliyun.com/deepin/pool/non-free/d/" target="_blank" rel="noopener">http://mirrors.aliyun.com/deepin/pool/non-free/d/&lt;/a> 中寻找。&lt;/p>
&lt;p>&lt;strong>安装搜狗输入法&lt;/strong>：&lt;/p>
&lt;p>首先执行如下两个命令安装必须的框架：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install fcitx-bin
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">sudo apt-get install fcitx-table
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>安装后重启系统，进入语言设置，将键盘输入法系统的 iBus 替换为刚刚安装的 fcitx。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-17.png" alt="install-ubuntu-desktop-18.png">&lt;span class="caption">※ 将键盘输入法系统替换为 fcitx&lt;/span>&lt;/p>
&lt;p>点击 Ubuntu 顶栏右边的小键盘图标，打开输入法配置窗口。按照下图所示的顺序排序。键盘按 Ctrl + Space 键，即可启用中文输入法。&lt;/p>
&lt;p>然后下载 Linux 版的搜狗输入法，在&lt;a href="https://pinyin.sogou.com/linux/?r=pinyin" target="_blank" rel="noopener">这里&lt;/a>下载，安装后返回输入法配置窗口，可以看到搜狗输入法已经添加进输入法中，我们将搜狗输入法排序到第二位即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-18.png" alt="install-ubuntu-desktop-19.png">&lt;span class="caption">※ 输入法配置&lt;/span>&lt;/p>
&lt;h3 id="界面美化">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#界面美化" class="anchor-link" aria-label="界面美化">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>界面美化&lt;/h3>
&lt;p>目前我进行了一些简单的美化，当前的操作界面如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-19.png" alt="install-ubuntu-desktop-17.png">&lt;span class="caption">※ 美化后的界面&lt;/span>&lt;/p>
&lt;p>首先执行以下命令安装主题工具 GNOME Tweaks：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo apt-get install gnome-tweak-tool
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">sudo apt-get install gnome-shell-extensions
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>打开 Tweaks，在「扩展」中开启「User themes」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-ubuntu-desktop-20.png" alt="install-ubuntu-desktop-20.png">&lt;span class="caption">※ 开启「User themes」&lt;/span>&lt;/p>
&lt;p>进入网站 &lt;a href="https://www.opendesktop.org/" target="_blank" rel="noopener">https://www.opendesktop.org/&lt;/a>，在 GTK3 Themes 中挑选桌面主题下载。将下载好的压缩包解压，再将该文件夹移动到 &lt;code>/usr/share/themes/&lt;/code> 目录下。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">sudo mv filename /usr/share/themes/
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后就可以在 Tweaks 的主题设置中选择刚才下载好的主题。图标的设置与主题相同，到上述网站下载图标，将文件夹移动到 &lt;code>/usr/share/icons/&lt;/code>，在 Tweaks 的图标设置中选择该图标。&lt;/p>
&lt;p>至于 Dock 样式的修改，到 Ubuntu 软件应用下载 Dash to Dock 即可。&lt;/p>
&lt;h2 id="参考">&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/#参考" class="anchor-link" aria-label="参考">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>参考&lt;/h2>
&lt;ol>
&lt;li>&lt;a href="https://www.jianshu.com/p/38e6be8efecf" target="_blank" rel="noopener">Win10 安装 Ubuntu 18.04 LTS 双系统 | owolf&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://www.jianshu.com/p/eb9bd6142c71" target="_blank" rel="noopener">Ubuntu：更换国内源 | 赵水木&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://blog.csdn.net/qq_32896115/article/details/90371213" target="_blank" rel="noopener">Ubuntu18.04 下安装 TIM | water&amp;amp;12&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://blog.csdn.net/fx_yzjy101/article/details/80243710" target="_blank" rel="noopener">解决 Ubuntu 18.04 中文输入法的问题，安装搜狗拼音 | 一种记忆&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://blog.csdn.net/qq_42527676/article/details/91356154" target="_blank" rel="noopener">Ubuntu 18.04 美化主题（完整版）| B丶atty小鹿&lt;/a>&lt;/li>
&lt;/ol>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/install-ubuntu-desktop/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/install-ubuntu-desktop/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/linux/">Linux</category></item><item><title>
学在浙大（TronClass）平台课件下载方法</title><link>https://guanqr.com/tech/computer/tronclass-file-download/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/tronclass-file-download/</guid><pubDate>Mon, 16 Mar 2020 17:08:58 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">学&lt;/span>在浙大 2.0 平台其实是一个套壳 TronClass 平台的网站，所以说在手机端，不一定非要使用钉钉进入学在浙大，下载 TronClass APP 也可。一般来说，授课教师会在学在浙大平台上上传课件或者布置习题。有的教师会将上传的课件开启「允许下载」的权限，但有些老师很可能就会忘记开启该项权限，或者根本就不想让学生下载（担心自己的课件流传到外网）。如果说每次复习课程的时候都要进入学在浙大平台点开课件观看，一是过程比较繁琐费时，二是在线课件无法做笔记，很不方便。&lt;/p>
&lt;p>这学期刚开始的时候，学在浙大的平台刚刚建成没多久，还不够完善。因此虽然有些课件设置成无法下载，但在课件加载完成后，直接使用 &lt;code>Ctrl + S&lt;/code> 即可保存至本地，这一方法迅速流传开来。然而就在上一周，程序员修复了这个 BUG。真的没办法下载课件了吗？事实并非如此。&lt;/p>
&lt;p>首先我们进入学在浙大，打开你想要下载的课件页面。进入开发者调试页面（按 &lt;code>F12&lt;/code> 键，或者右键点击「检查」）。进入「NetWork」页面，然后刷新网页，我们就可以在如下图所示的红框区域内看到当前网页加载的内容有哪些。理论上来说，加载的这些资源中必然有一个是当前的课件，否则课件是从哪里来的呢？&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tronclass-file-download-0.png" alt="tronclass-file-download-0.png">&lt;/p>
&lt;p>接下来我们就需要找到加载课件资源的是哪一个。虽然说当前的页面加载了很多东西，但其实课件资源的位置很好找到，因为课件的文件体积肯定要比其他的一些代码体积大得多，其他文件可能就几个 B 的大小，课件大小基本上是以 KB 为单位的，而且由于文件体积较大，加载的时长也比其他资源要长。我们直接寻找加载的最大文件。&lt;/p>
&lt;p>看起来这一个比较像，文件大小为 11 KB，文件类型为 document，文件名前缀为 pdf-viewer。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tronclass-file-download-1.png" alt="tronclass-file-download-1.png">&lt;/p>
&lt;p>点击这一条资源，左侧显示了它的基本信息。在「Headers」中的最底部，我们可以看到文件的链接，链接以 &lt;code>pdf&lt;/code> 结尾，准没错。复制该链接，在新的页面打开它，即可下载该文件。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/tronclass-file-download-2.png" alt="tronclass-file-download-2.png">&lt;/p>
&lt;p>如果对于一些不熟悉浏览器操作的小白，寻找加载的资源有些困难的话，还有一个相对简单的方法。在开发者调试页面的控制台「Console」中输入如下命令&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/computer/tronclass-file-download/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>，即可下载。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="nb">window&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">decodeURIComponent&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementById&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;pdf-viewer&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">src&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">split&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;?file=&amp;#34;&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>除此之外，如果你使用 IDM（Internet Download Manager）下载器的话，只要在线浏览课件，就直接能够下载了。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://github.com/fish-can/TronClass-PDF-Downloader" target="_blank" rel="noopener">fish-can/TronClass-PDF-Downloader | Github&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/computer/tronclass-file-download/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/tronclass-file-download/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/tronclass-file-download/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/tronclass/">TronClass</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
紫云碧峰的樱花</title><link>https://guanqr.com/life/school/sakura-in-yunfeng/</link><guid isPermaLink="true">https://guanqr.com/life/school/sakura-in-yunfeng/</guid><pubDate>Sun, 15 Mar 2020 15:51:09 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/school/sakura-in-yunfeng/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/sakura-in-yunfeng.jpg" alt="sakura-in-yunfeng.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">三&lt;/span>月份，紫云碧峰的樱花想必已经盛开了。前一夜她还是含苞待放。早晨，当第一缕阳光穿透云雾挥洒在樱花树上时，原本紫褐色光秃秃的枝干，已经被密密麻麻的白色的花朵点缀。这时人们终于想到，杭州的春天来了。樱花与猫，紫云碧峰必不可少的两个元素。我更喜欢樱花，因为在一年当中只有春天才能看见她。&lt;/p>
&lt;p>春风吹过，洁白而又细小的花瓣挣脱了束缚，随着柔和的春风在树下盘旋飞舞。那是雨，樱花雨。那些从宿舍楼匆匆赶去上课的学生，也在樱花树下留步，拿出手机，拍下了这生动的画面。春雨洒下。雨水带着太阳光的余温，将枝干上那些残留的花瓣带走。雨越下越大，雨水在路旁的台阶下汇聚，带着那些落下的花瓣，形成了一条细细的水流。那是流动的樱花。&lt;/p>
&lt;p>花儿凋零，代替花儿的，是青翠的树叶。只有在三月份才能在紫云碧峰看到这般樱花绽放的盛景。我不曾去过医学院的楼前，听说那里的春天也很美，但樱花雨，只有在云峰前才会有，这是属于我的记忆。春天过去，樱花树上只剩下绿油油的树叶，不再有初春时白色的浪漫。随后是秋日的刺骨寒风，枝叶泛黄、掉落、化为泥土。人们不曾为此叹息，反而充满期望，因为你我都知道，明年的春天，樱花还会再次绽放。&lt;/p>
&lt;p>可我再也看不见紫云碧峰的樱花了。&lt;/p>
&lt;p style="text-align:right">——二〇二〇年三月十五日写于开封&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>拍摄于 2018 年 3 月 22 日&amp;#160;&lt;a href="https://guanqr.com/life/school/sakura-in-yunfeng/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/sakura-in-yunfeng/" target="_blank" rel="noopener">https://guanqr.com/life/school/sakura-in-yunfeng/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/nature/">自然</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
OceanColor 遥感数据产品的获取</title><link>https://guanqr.com/tech/optics/how-to-get-oceancolor-data/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/how-to-get-oceancolor-data/</guid><pubDate>Wed, 11 Mar 2020 09:17:34 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/oceancolor-0.jpg" alt="oceancolor-0.jpg">&lt;span class="caption">※ Ocean Color Feature: Copper River Wind&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">美&lt;/span>国国家航空航天局（NASA）的 OceanColor 网站平台提供了多种设备对全球海洋特性探测的不同等级的数据产品，比如使用 MODIS-Aqua 获取的水体固有光学特性数据。本文介绍的是如何简单地获取 OceanColor 网站的水色数据。&lt;/p>
&lt;blockquote>
&lt;p>NASA's Ocean Biology Processing Group (OBPG) supports the collection, processing, calibration, validation, archive and distribution of ocean-related products from a number of missions which are supported within the framework and facilities of the NASA Ocean Data Processing System (ODPS) which has been successfully supporting operational, satellite-based remote-sensing missions since 1996. The group's capabilities continue to evolve and expand to meet the demands and challenges of future missions.&lt;/p>&lt;/blockquote>
&lt;h2 id="数据获取">&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/#数据获取" class="anchor-link" aria-label="数据获取">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据获取&lt;/h2>
&lt;p>以 MODIS-Aqua 的水体固有光学特性——后向散射系数（&lt;em>b&lt;sub>b&lt;/sub>&lt;/em>）产品为例。我们需要获取到 2019 年 3 月份 443nm 波段的 &lt;em>b&lt;sub>b&lt;/sub>&lt;/em>(443) 数据产品。&lt;/p>
&lt;h3 id="信息查询">&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/#信息查询" class="anchor-link" aria-label="信息查询">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>信息查询&lt;/h3>
&lt;p>首先进入 &lt;a href="https://oceancolor.gsfc.nasa.gov/" target="_blank" rel="noopener">OceanColor 官网&lt;/a>，点击菜单中的「DOCS」，进入「Products」中的「Algorithm Descriptions」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-1.png" alt="oceancolor-1.png">&lt;span class="caption">※ 查找数据来源&lt;/span>&lt;/p>
&lt;p>在当前页面中找到有关水体固有光学特性的产品数据（Inherent Optical Properties from GIOP Algorithm），点击进入。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-2.png" alt="oceancolor-2.png">&lt;span class="caption">※ 查找固有光学特性的产品数据&lt;/span>&lt;/p>
&lt;p>在该页面中有详细的 $b_b$ 数据来源与算法说明，在页面的末尾也提供了相关研究的参考文献。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-3.png" alt="oceancolor-3.png">&lt;span class="caption">※ 查找水体后向散射系数算法说明&lt;/span>&lt;/p>
&lt;h3 id="数据下载">&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/#数据下载" class="anchor-link" aria-label="数据下载">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据下载&lt;/h3>
&lt;p>首先进入「DATA」中的「Direct Data Access」，这里是数据存放的目录。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-4.png" alt="oceancolor-4.png">&lt;span class="caption">※ 进入数据存放目录&lt;/span>&lt;/p>
&lt;p>然后依次点击 「 MODIS-Aqua」-&amp;gt;「Mapped」-&amp;gt;「Monthly」-&amp;gt;「4km」，进入 4km 深度范围的测量数据目录。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-5.png" alt="oceancolor-5.png">&lt;span class="caption">※ 进入水体后向散射系数数据产品目录&lt;/span>&lt;/p>
&lt;p>这里我们就能获取到从 2002 年至今的全部 &lt;em>b&lt;sub>b&lt;/sub>&lt;/em>(443) 数据。找到我们想要的 3 月数据，点击即可下载。这里我们不难看出数据产品编号的规律。产品名称并没有标注月份，编号的开头 &lt;code>A&lt;/code> 后面标注的是数据获取的年份与天数。我们获取的数据开头是 &lt;code>A20190602019090&lt;/code>，也就表明该数据是 2019 年第 60 天至 2019 年第 90 天的数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/oceancolor-6.png" alt="oceancolor-6.png">&lt;span class="caption">※ 查找 2019 年 3 月数据&lt;/span>&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>注意：目前网站数据的下载可能需要注册用户，直接进行注册即可。&lt;/p>&lt;/div>
&lt;p>我去年在学院的某研究项目中摸鱼的时候用到了这些数据产品，写了一些 MATLAB 脚本对该数据进行处理，目前已经将脚本整理打包放在了 GitHub 仓库中，如有需要可以参考。&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/Organic-Carbon-Estimating target="_blank">Organic-Carbon-Estimating&lt;/a>
&lt;/div>
&lt;div class="description">A program used in estimating organic carbon stocks in oceans. 计算指定海域的有机碳存量，包括颗粒有机碳与溶解有机碳，数据依赖于 NASA 中分辨率成像光谱仪 MODIS 遥感产品。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #e16737">&lt;/span>
&lt;span class="language-name">MATLAB&lt;/span>
&lt;/div>
&lt;/div>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://oceancolor.gsfc.nasa.gov/" target="_blank" rel="noopener">NASA Ocean Color&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/how-to-get-oceancolor-data/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/how-to-get-oceancolor-data/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/tags/ocean/">海洋</category><category domain="https://guanqr.com/tags/remote-sensing/">遥感</category></item><item><title>
Win10 和 Python 3.7 环境下安装 TensorFlow</title><link>https://guanqr.com/tech/computer/install-tensorflow/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/install-tensorflow/</guid><pubDate>Sat, 07 Mar 2020 00:03:29 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/tensorflow-logo.svg" alt="tensorflow-logo.svg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">近&lt;/span>些年机器学习（Machine Learning）是一个比较热门的领域。TensorFlow 是一个端到端开源机器学习平台。它拥有一个包含各种工具、库和社区资源的全面灵活生态系统，可以让研究人员推动机器学习领域的先进技术的发展，并让开发者轻松地构建和部署由机器学习提供支持的应用。这学期的专业课程涉及了「光电检测」与「机器视觉」两个领域，今年年初光电学院公布的第八届全国大学生光电设计竞赛题目涉及到了「图像识别」的内容，这都与机器学习息息相关。作为一个非计算机专业的小白，网上的一些教程对安装 TensorFlow 的过程描述的不是很详细，所以在安装的时候遇到了种种困难。这篇文章即是对安装 TensorFlow 的过程总结。我使用的计算机为 ThinkPad T470p，所带的显卡为 NVIDIA GeForce 940MX，系统为 Windows 10。&lt;/p>
&lt;h2 id="安装-anaconda">&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/#安装-anaconda" class="anchor-link" aria-label="安装-anaconda">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装 Anaconda&lt;/h2>
&lt;p>Anaconda 是一个开源的 Python 发行版本，请前往&lt;a href="https://www.anaconda.com/distribution/#download-section" target="_blank" rel="noopener">官网&lt;/a>挑选 Windows 系统 Python 3.7 版本进行下载。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/download-anaconda.png" alt="download-anaconda.png">&lt;/p>
&lt;p>安装的时候请选择合适的安装路径。为了方便，可以勾选「Add Anaconda to my PATH environment variable」的选项。不过据说容易出现错误，且卸载很麻烦，所以这里请自己考虑是否勾选。如果不勾选的话，安装完成后需要自行将 Anaconda 添加到系统环境变量中。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/add-anaconda-to-path.png" alt="add-anaconda-to-path.png">&lt;/p>
&lt;h2 id="安装-cuda">&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/#安装-cuda" class="anchor-link" aria-label="安装-cuda">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装 CUDA&lt;/h2>
&lt;p>你的计算机显卡必须是 NVIDIA 显卡才可以选择安装 CUDA，否则请跳过以下步骤直接安装 TensorFlow。在&lt;a href="https://developer.nvidia.com/cuda-toolkit-archive" target="_blank" rel="noopener">官网&lt;/a>挑选你要安装的 CUDA 版本。这里因为我安装的时间较早，安装的是 CUDA 10.0 版本，最新的 TensorFlow 2.1 对应的 CUDA 是 10.1 版本。但是要注意，不一定最新版本的最好，因为很有可能 TensorFlow 的版本并没有与最新版本的 CUDA 相对应。&lt;/p>
&lt;p>运行安装包的时候需要注意，需要选择「自定义」安装，在选择「自定义安装选项」的时候，建议只勾选安装 CUDA，Driver components 等组件你的计算机系统中应该原本就有，而且很有可能已有的版本与其要安装的版本不一致，要安装的版本比你已有的版本高，可以选择安装，如果比已有版本低，安装的话会出现错误。另外，CUDA 选项中的 Visual Studio Integration 也可选择不安装，因为我们并没有用到 Visual Studio。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/install-cuda.png" alt="install-cuda.png">&lt;/p>
&lt;h2 id="安装-cudnn">&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/#安装-cudnn" class="anchor-link" aria-label="安装-cudnn">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装 cuDNN&lt;/h2>
&lt;p>进入&lt;a href="https://developer.nvidia.com/cudnn" target="_blank" rel="noopener">官网&lt;/a>，cuDNN 的下载必须要登录账户填写问卷，如果你没有 NVIDIA 账户请注册，登录账户并填写问卷后，选择和 CUDA 相对应的 cuDNN 版本下载即可。下载完成后，将压缩文件解压出来，重命名该文件夹为 &lt;code>cudnn&lt;/code>，将其放置在 CUDA 安装目录下，即 &lt;code>~/NVIDIA GPU Computing Toolkit/CUDA/v10.0/cudnn&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/download-cudnn.png" alt="download-cudnn.png">&lt;/p>
&lt;h2 id="添加环境变量">&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/#添加环境变量" class="anchor-link" aria-label="添加环境变量">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>添加环境变量&lt;/h2>
&lt;p>右键「这台电脑」，点击「属性」，进入「高级系统设置」中的「环境变量」，在「系统变量」中的 &lt;code>path&lt;/code> 变量中添加四个变量：&lt;/p>
&lt;ol>
&lt;li>D:\NVIDIA GPU Computing Toolkit\CUDA\v10.0\bin&lt;/li>
&lt;li>D:\NVIDIA GPU Computing Toolkit\CUDA\v10.0\libnvvp&lt;/li>
&lt;li>D:\NVIDIA GPU Computing Toolkit\CUDA\v10.0\extras\CUPTI\libx64&lt;/li>
&lt;li>D:\NVIDIA GPU Computing Toolkit\CUDA\v10.0\cudnn\bin&lt;/li>
&lt;/ol>
&lt;p>注意，这里添加的是你的 CUDA 所在目录中的部分文件夹，请检查是否存在该文件夹目录以及版本号是否正确。我的 CUDA 版本为 10.0 且安装在了 D 盘，请根据自己的实际情况进行修改。添加完成后，建议按照以上的顺序将这四个环境变量排序至最顶层。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/add-cuda-path.png" alt="add-cuda-path.png">&lt;/p>
&lt;h2 id="安装-tensorflow">&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/#安装-tensorflow" class="anchor-link" aria-label="安装-tensorflow">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装 TensorFlow&lt;/h2>
&lt;p>按照&lt;a href="https://www.tensorflow.org/install" target="_blank" rel="noopener">官方&lt;/a>的方法，可以直接在终端使用 pip 安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Requires the latest pip&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">$ pip install --upgrade pip
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Current stable release for CPU and GPU&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">$ pip install tensorflow
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>不过这里会出现两个问题：一是网络问题，在国内使用该命令安装经常会出现网络错误而中断安装；二是版本问题，这样安装的 TensorFlow 版本并不可控，所以安装的版本不一定适用于你的计算机环境。如果安装了与计算机环境不一致的版本，运行的时候就会报错。&lt;/p>
&lt;p>对于第一个问题，可以考虑换一个国内的镜像源进行下载，对于第二个问题，我认为最好的解决方法就是挑选对应版本的安装包，将安装包下载到本地，再在本地进行安装。&lt;/p>
&lt;p>首先进入&lt;a href="https://pypi.org/project/tensorflow/#files" target="_blank" rel="noopener">下载网站&lt;/a>，选择 Python 3.7、Window 版本的安装包进行下载。注意版本号要和 CUDA 相对应。TensorFlow 2.0.0 对应 CUDA 10.0，TensorFlow 2.1.0 对应 CUDA 10.1。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/download-tensorflow.png" alt="download-tensorflow.png">&lt;/p>
&lt;p>然后在安装包所在目录打开终端，运行：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">$ pip install filename
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>filename&lt;/code> 为安装包的名字。&lt;/p>
&lt;p>安装完成后，在终端打开 Python，可以输入下列代码，检查 TensorFlow 的版本，如果运行顺利则安装成功。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="nn">tensorflow&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">tf&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="n">tf&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">__version__&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="s1">&amp;#39;2.0.0&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果在运行代码的时候出现报错，提示缺失某些 &lt;code>dll&lt;/code> 文件，可能是因为安装的 CUDA 版本和 TensorFlow 版本不对应。可以进入 &lt;a href="https://www.dll-files.com/" target="_blank" rel="noopener">DLL-FILES&lt;/a>，查找缺失的文件，下载并放置在 &lt;code>~/NVIDIA GPU Computing Toolkit/CUDA/v10.0/bin&lt;/code> 文件夹下。如果在该网站并没有找到缺失的文件，在 &lt;code>bin&lt;/code> 文件夹下会有同名不同版本号的同一文件，修改该文件名与报错中出现的文件名一致即可，注意备份修改前的文件。如果依然会报错，那可能就需要寻找对应版本的 CUDA 和 TensorFlow 重新安装了。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/install-tensorflow/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/install-tensorflow/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/machine-learning/">机器学习</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
浙大官微「翻车」记</title><link>https://guanqr.com/life/ideas/zju-wechat-official-account/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/zju-wechat-official-account/</guid><pubDate>Fri, 06 Mar 2020 11:49:26 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">昨&lt;/span>天浙大官方微信公众号发了一篇推文，标题为《浙大学子网课学习桌大曝光！多重「神器」来袭，总有一款适合你！》。点击阅读这篇文章，文中展示了许多学生在家的学习环境和学习设备，总的来说，就是一台豪华的学习桌，桌子上放着一个笔记本或台式机外加一个分屏，旁边再放一个 iPad 做笔记，人均三四个电子设备，桌子上还有各种各样的装饰品。这篇文章发布后引起了众人热议。昨天晚上，有几个我关注的学长学姐的微信公众号发布了文章，谈了谈自己对这件事的看法。他们的文章也有着不少的阅读量和转发量，但他们所写的文章也因为文中存在一些自己并没有意识到存在问题的言论而被别人批判。甚至一些外校的自媒体蹭热度，对这篇文章断章取义，借机批评了浙大一番……在舆论的压力下，浙大官网默默地删除了这篇文章。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zju-wechat-official-account.jpg" alt="zju-wechat-official-account.jpg">&lt;span class="caption">※ 原文封面&lt;/span>&lt;/p>
&lt;p>我认为这篇文章的初衷是为了向外界展示浙大的学生在家上网课学习的场景，为了体现在疫情期间，学生们还能够克服重重困难保持认真学习的精神状态。然而，官微没有想到，正是因为向读者展示了过于豪华的学习桌，让读者的注意力从「网课的学习方式」转移到了「价格不菲的学习设备」上，从「比拼精神」转移到了「比拼金钱」上。&lt;/p>
&lt;p>昨天下午官微刚发布这篇文章的时候，我就顺手转载并评论了一句——「难道就我一个人是抱着笔记本电脑到床上去看网课吗」。这是我的真实情况，因为不怎么回家，我的桌子上连台灯也没有，平时只放着我的笔记本电脑。如果听课听累了，就会坐在床上继续听。手机呢——如果觉得枯燥无聊的时候，必然会放松娱乐一下。这篇文章中展示的这番场景，在我的生活中是不存在的，我相信大部分人也不会这么做。没有人会在面前放置三四个屏幕，更何况不是每个人都有平板电脑或者多余的显示器。同时，我认为过多的设备会降低听课的效率，一个屏幕就够了。由此可以想到，这篇文章是必然会引发热议的。&lt;/p>
&lt;p>学校征集的图片应该是疫情下「网课学习书桌全貌」和「克服困难学习的场景」。这些图片满足了第一条，却忽视了第二条。浙大的很多学生都拥有非常优越的经济条件，但浙大也有经济条件比较差的学生，他们没有那么宽敞温馨高大上的学习环境，但是克服了种种困难仍然坚持上网课。官微却并没有对他们进行宣传。推文里投稿的同学没有错，他们的书桌布置得非常好非常有学习的氛围，但是有些人的书桌，有些人的学习条件，官微似乎看不见也不想看见。我想，这些家庭条件不太好的学生不会主动向官微投稿，因为他们有所顾虑，他们知道自己不会受到官微欢迎，他们有一种自卑的心理。有位同学说，他的学妹不报考浙大的原因是，家里人觉得浙大都是有钱人家的孩子……我听说之后只觉得窒息。&lt;/p>
&lt;p>掌管官微的微讯社的指导老师和社团成员想必有些难堪。但不可否认的是，近几年官微的运营水平不足，宣传似乎也有些畸形。从打造网红校园、网红餐厅，到宣传高颜值、祖孙三代浙大人的「造神」人物宣传，再到标题四个大字的推文「到华为去」。官微把重心放在了对外的华丽宣传，突出浙大和浙大学生的优秀，却忽视了校园的真实生活。让我们这样的普通学生觉得，不保研不拿奖成绩一般般只会打游戏的我们并不算真正的浙大人。我希望，以后在浙大官微的文章中，能多看到一些真实的内容。比如对于受学生欢迎的老师的采访，对普通学生的采访，对学校某些事件的真实通报。「求是创新」四个字中的「求是」二字，是本，我们不能忘记。&lt;/p>
&lt;p>校论坛里有位同学的签名档很好：&lt;/p>
&lt;blockquote>
&lt;p>世界上有两个浙大。&lt;br>
一个在浙大人的心中、信仰和行为上；&lt;br>
一个在网络上，微博上和校领导的口中。&lt;br>
巧的是，&lt;br>
一个是世界一流大学，&lt;br>
另一个也是世界一流大学。&lt;br>&lt;/p>&lt;/blockquote>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/zju-wechat-official-account/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/zju-wechat-official-account/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/wechat/">微信</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
解决 EasyConnect 造成的浏览器数据丢失问题</title><link>https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/</guid><pubDate>Sat, 29 Feb 2020 14:29:48 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">由&lt;/span>于特殊时期需要在家学习，如果需要访问校内网络资源（如图书馆资源、校内论坛、学院网站等等）则需要使用反向代理 RVPN 服务，学校官方提供的反向代理软件是深信服的 EasyConnect。如果你在搜索引擎中搜索关键词 RVPN，搜索到的结果大部分都和浙大的网络服务有关。虽然 EasyConnect 软件提供的服务有些不稳定，经常会断开网络连接。不过有总比没有好，&lt;del>至少又可以愉快地水 CC98 了&lt;/del>。&lt;/p>
&lt;p>最近一段时间，我发现 Chrome 浏览器账号总是暂停服务，需要重新登录。我们都知道想要登陆 Google 账户需要科学上网，但是只要账户登录成功后，就基本不会掉线，除非你改动了 Chrome 的默认设置，清除了 Cookie。如果你的账户掉线了，那么存储到浏览器中的一些账户和密码，自动登录设置都会丢失——每一次访问 GitHub，我都要重新输入密码，时不时还要给我的邮箱发验证码验证账户，很麻烦。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/chrome-data-loss-caused-by-using-easyconnect-0.png" alt="chrome-data-loss-caused-by-using-easyconnect-0.png">&lt;span class="caption">※ Chorme 账户暂停服务&lt;/span>&lt;/p>
&lt;p>对于账户暂停服务的问题，我花了很长时间找原因，现在才发现，原来造成该问题的罪魁祸首，就是 EasyConnect。也就是说，如果你使用了 EasyConnect，在退出该程序后，该程序会自动清除浏览器的 cookie，你的账户会掉线，你的浏览历史记录也不复存在。目前该问题只发生在 Chrome 浏览器中，Edge 和 Firefox 并未出现。&lt;/p>
&lt;p>有些同学在退出 EasyConnect 的时候，该软件会提示正在清除浏览历史记录，这应该是最近软件自动更新后出现的提示框。&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/chrome-data-loss-caused-by-using-easyconnect-1.jpg" alt="chrome-data-loss-caused-by-using-easyconnect-1.jpg">&lt;span class="caption">※ 软件提示删除历史数据&lt;/span>&lt;/p>
&lt;p>解决方法其实很简单，在 EasyConnect 的软件系统设置中勾选「登录后不弹出资源列表」即可。想必是因为不通过浏览器弹出资源列表，自然不会清理浏览器。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/chrome-data-loss-caused-by-using-easyconnect-2.png" alt="chrome-data-loss-caused-by-using-easyconnect-2.png">&lt;span class="caption">※ EasyConnect 系统设置&lt;/span>&lt;/p>
&lt;p>还有一种解决方法，就是把计算机默认浏览器改成你不经常用的浏览器。让 EasyConnect 去清理你不用的那个浏览器的 Cookie。如果你在某个浏览器输入 &lt;a href="https://rvpn.zju.edu.cn" target="_blank" rel="noopener">https://rvpn.zju.edu.cn&lt;/a> 直接通过网站进行网络连接，则 EasyConnect 一定会清理该浏览器的 Cookie——因此使用某个不经常用的浏览器进行在线连接即可。&lt;/p>
&lt;p>有个同学在网上看到一个帖子，说管理员可以设置开启了自动清理的功能，学校信息中心的管理员给的回复是：&lt;/p>
&lt;blockquote>
&lt;p>这个东西一直开着的，已经好几年了。之前和 EasyConnect 的深信服沟通过，如果勾选退出清理，会导致统一身份验证的那个接口跳转出错等一系列 Bug……所以没法关掉。&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://guanqr.com/images/chrome-data-loss-caused-by-using-easyconnect-3.jpg" alt="chrome-data-loss-caused-by-using-easyconnect-3.jpg">&lt;span class="caption">※ 深信服社区讨论帖&lt;/span>&lt;/p>
&lt;p>学校信息中心的工作人员说正在筹备一个 Web 端的 RVPN，然后就可以抛弃 EasyConnect 了，不过以信息中心的效率，这种东西什么时候能做出来呢？&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：CC98 用户：一番巨大悠&amp;#160;&lt;a href="https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>参考①：&lt;a href="https://www.cc98.org/topic/4905710" target="_blank" rel="noopener">EasyConnect 退出时清了我浏览器 Cookie……| 一番巨大悠&lt;/a>&lt;br>参考②：&lt;a href="https://www.cc98.org/topic/4905792" target="_blank" rel="noopener">已解决 Chrome 在使用 EasyConnect 后历史数据丢失问题——Chrome 被 EasyConnect 针对了？| 游青松&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/solve-the-problem-of-chrome-data-loss-caused-by-using-easyconnect/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/chrome/">Chrome</category><category domain="https://guanqr.com/tags/network/">网络</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
疫情下的在线直播授课</title><link>https://guanqr.com/life/school/online-class-in-corona-virus-disease/</link><guid isPermaLink="true">https://guanqr.com/life/school/online-class-in-corona-virus-disease/</guid><pubDate>Thu, 27 Feb 2020 19:33:50 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/online-class.png" alt="online-class.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">新&lt;/span>冠肺炎疫情已经持续了一个多月了。这周一是浙大本科生原计划开学的时间，为了保证按时完成教学计划，避免因延迟开学造成的毕业、就业等一系列问题，像其他学校一样，我们学校也迈出了跨时代的一步——在线直播授课。和京城北派学校所用的清华「雨课堂」不同，浙大同阿里一样处于西子湖畔，使用「钉钉」进行直播授课即是必然。&lt;/p>
&lt;p>其实，浙大这几年一直在进行网络课堂的建设。从阿里定制浙大专享版的「钉钉」——「浙大钉」，到套壳香港某网络课堂 TronClass 的「学在浙大」。前者可以协助构建全校人员的组织体系，方便教师与教师，教师与学生之间的互动；后者可以进行课堂签到与在线测试，作业的在线收取与批改，以及学生成绩统计。这次突如其来的疫情更像是一股「东风」，加速推动力学校网络课堂的建设与完善。&lt;/p>
&lt;p>这一套目前看来还算理想的系统是如何工作的呢？在「浙大钉」中，所有的学生按照学院、本科生 / 硕士生 / 博士生、班级的分类构架共同归属于浙江大学这一总的机构。在选课系统中，你选到的课程数据会自动同步到「学在浙大」和「浙大钉」中。在「学在浙大」和「浙大钉」中，你会自动加入课程群——这一操作在我看来真的很强大。学校之所以要花费大量精力财力构建这一网络课堂系统，据说是为了方便将来的大数据统计分析，可以分析各种课程的教学质量，某一课程受到哪些专业的学生的喜爱，这些学生的成绩分布怎么样等等。当然要完成这样的分析需要足够多的样本，由于是刚进行试验，大概要等到四年后才会有比较全面的分析。&lt;/p>
&lt;p>我第一次使用「钉钉」是在 2019 年初，那时候正在学应用光学，需要使用「钉钉」进行实验的打卡签到。我第一次使用「学在浙大」是在上一学期，&lt;a href="tech/asap-siren-light/">ASAP 建模课程&lt;/a>需要用它进行作业的提交，这门课程属于学校第一批试用「学在浙大」系统的课程。因为之前就接触过这些平台，对于在平台上的各种操作，我并不陌生。然而，虽然学校为直播授课进行了充足的准备，但直播授课还是存在一定的问题。除了课堂互动等诸如此类的小问题，工科最重要的是实验，这学期我的课程基本都需要去实验室做实验，现在这种形势下，实验只好推迟到返校后进行——这必定会打乱一些教学计划。因为一些课程属于半学期课程，四月末就要进行期末考试，如果那时候还没有返校的话……只有延期课程了。&lt;/p>
&lt;p>新学期第一周的课程就这样在家学完了。每天面对着屏幕上的幻灯片，听着老师讲课的声音，对于课程学习中遇到的问题，由于身边只有空气，只能和同学在校讨论。我总觉得这样学习的效率有些偏低，缺少几十个人坐在同一教室中的热闹，缺少四人在宿舍中学习的气氛。我盼望着能早点回到学校……&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/online-class-in-corona-virus-disease/" target="_blank" rel="noopener">https://guanqr.com/life/school/online-class-in-corona-virus-disease/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/tronclass/">TronClass</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
改变大众的想法需要勇气</title><link>https://guanqr.com/life/films/green-book/</link><guid isPermaLink="true">https://guanqr.com/life/films/green-book/</guid><pubDate>Sat, 15 Feb 2020 10:20:28 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-0.jpg" alt="green-book-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">绿&lt;/span>皮书，全称为「The Negro Motorist Green Book」，这是一本给黑人旅客的安全出行指南。书中记录了美国愿意接待黑人旅客的餐馆、酒店、旅馆和度假目的地。&lt;/p>
&lt;p>谢利博士是一位非裔美国人，他虽然拥有黑皮肤，却过着白人贵族的生活，作风优雅。他是一位音乐天才。托尼是意大利裔美国人，他虽然身为白人，但在社会中的地位很低，失业、交不起房租，做事莽撞。托尼成为了谢利博士的司机，带着谢利博士一路南下参与钢琴演出。而绿皮书，就是他路途的向导。&lt;/p>
&lt;p>托尼是一位尽职尽责的司机，在每一次演出前，都会检查钢琴是否合格，每天晚上，他都会为谢利博士找到适合居住的旅馆。他也会为谢利博士遭受到的歧视打抱不平。谢利博士因为种族歧视，无法和白人享受同样的待遇，他无法在服装店里试穿自己喜欢的衣服，无法去白人去的厕所，无法和白人共同进餐……这些问题他都忍耐住了。托尼不理解既然来到南方会遭受种族歧视，谢利博士为何还要到南方进行演出。演奏大提琴的音乐家说：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Because genius is not enough. It takes courage to change people's hearts.&lt;/p>&lt;/blockquote>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-1.jpg" alt="green-book-1.jpg">&lt;/p>
&lt;p>谢利博士的内心是孤独的。虽然他有着自己的理想，虽然在钢琴领域，他是一位天才，他和其他白人没有什么区别，但他终究有着黑色的皮肤。他希望凭借自己的努力，到饱受种族歧视的南方演出，改变人们对于黑人的态度。谢利博士以为托尼一路为他工作尽职尽责，只是为了拿到那一份属于他的工资，以至于害怕托尼动摇继续当司机的念头，提升了托尼的职务。实际上，托尼对于谢利博士的态度随着旅途逐渐发生着转变，托尼感受到了谢利博士内心的孤独，他们成为了朋友。&lt;/p>
&lt;p>在乡下汽车抛锚的时候，谢利博士下了车，望见田野中辛苦耕作的黑人苦工们，那些黑人也在凝视着他。这就像是两个世界，中间被某种无形的东西隔阂。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-2.jpg" alt="green-book-2.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-3.jpg" alt="green-book-3.jpg">&lt;/p>
&lt;p>在途中休息的时候，托尼会给自己的妻子写信，谢利博士帮托尼润色了信的内容，让信中那些不通顺的句子变成了一首优美的诗歌。这些信件让托尼的妻子十分感动，也让托尼的亲戚们十分羡慕。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-4.jpg" alt="green-book-4.jpg">&lt;/p>
&lt;p>在雨夜，谢利博士向鲍比·肯尼迪打了一通电话，警察局才放走了无端抓起来的二人。他们在车上吵了一架。谢利博士认为托尼袭警是因为警察说托尼是半个黑鬼，而不是为自己打抱不平。托尼觉得自己更像是个黑人，因为谢利博士一点也不了解自己的种族——不了解黑人吃什么，怎么说话，怎么生活。托尼认为谢利博士住在高高的城堡顶层，为富人们演奏音乐，而自己才是那个为了生存到处奔波的人。谢利博士下了车，在雨中，他满腔愤怒地咆哮着：&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Yes, I live in a castle! Tony. Alone! And rich white people pay me to play piano for them, because it makes them feel cultured. But as soon as I step off that stage, I go right back to being just another nigger to them. Because that is their true culture. And I suffer that slight alone, because I'm not accepted by my own people, because I'm not like them either! So if I'm not black enough, and if I'm not white enough, and if I'm not man enough, then tell me, Tony, what am I?&lt;/p>&lt;/blockquote>
&lt;p>在伯明翰，因为谢利博士无法在白人餐厅用餐，托尼气愤着带着谢利博士放弃了最后的演出，来到了贫苦黑人们常去的橙鸟餐厅用餐。在餐厅破旧的钢琴前，谢利博士为餐厅中的黑人们演奏着欢快的乐曲。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/green-book-5.jpg" alt="green-book-5.jpg">&lt;/p>
&lt;p>电影结尾的一幕，圣诞节，回到北方的他们收到了交警的节日祝福，谢利博士当起了司机，将满是倦意的托尼送回了家。谢利博士也参与了托尼一家的圣诞庆祝活动，这是全片最温暖人心的时刻。&lt;/p>
&lt;hr>
&lt;p>去年和朋友说道，这些年学院派过于追求所谓的「政治正确」了，如果说一部电影中涵盖的「政治正确」元素越多，获奖的可能性就越大。当时我们还讨论了漫威的《黑豹》，不可否认电影中的非洲风情刻画地不错，但能获奖却出乎我的意料。虽然《绿皮书》中拥有「黑人」和「同性恋」的元素，但电影本身已经十分出色，这些元素只是它的点缀罢了。不过，从根本上来说，这部电影反映的还是白人和黑人之间的种族矛盾问题，希望人们能够消除对人种的偏见。美国部分地区直到现在依然会发生由于种族歧视而导致的斗殴或者枪击事件，虽然经历了南北战争，民权运动，马丁·路德·金的《我有一个梦想》，黑人的地位较过去有了很大的提升，但部分人的内心依然会排斥他们。这就造成了现在各类影视作品中的黑人元素问题。&lt;/p>
&lt;p>如果一部作品中黑人形象塑造的出现一丝丝问题，社会舆论就会将该作品推向风口浪尖。一部电影，怎么能只有白人？一部电影，黑人怎么能成为反派？黑人要成为主角——于是迪士尼的魔改《美人鱼》电影就这样诞生了。由于一些影视作品害怕受到种族问题的困扰，导演们不得不在作品中添加一些黑人元素来展示自己的「政治正确」。我认为这些做法有些过火了。美剧《守望者》从美苏冷战转向了种族矛盾，《猎魔人》中的世界也要添加黑皮肤的精灵。虽然黑人元素本身并没有什么问题，呼吁大众能够消除种族歧视也是正确的观念，但刻意增加黑人元素，将原著历史背景进行魔改，这类作品必定会遭受原著党们的愤怒。&lt;/p>
&lt;p>国内这些年也出现了黑人问题，大量的非法移民涌入中国，这类黑人普遍素质低下，加剧了人们对于黑人的排斥。「尼哥」，这一从过去对黑人轻蔑的称呼，成为了网友对于黑人的「统称」。似乎不论是黑人还是白人，在他们眼中黄种人才是最好欺负的人种。在种族问题中，人们讨论的只有白人与黑人，黄种人只是后来才存在的元素。虽然唐人街遍布世界各地，一些中式餐厅的非正宗中餐也吸引了许多当地人，但黄种人的地位似乎并没有什么提升。不论是否是因为政治或者文化因素，「黄祸论」到现在依然存在于欧美地区部分人的观念中……一场肺炎疫情，欧美一些媒体和个人对于中国的歧视言论就暴露了出来。什么时候在好莱坞电影中人们能深刻讨论一下对黄种人的歧视问题，或许很多问题就会迎刃而解了吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/green-book/" target="_blank" rel="noopener">https://guanqr.com/life/films/green-book/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/family/">家庭</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/racism/">种族主义</category></item><item><title>
All It Takes Is One Bad Day</title><link>https://guanqr.com/life/films/all-it-takes-is-one-bad-day/</link><guid isPermaLink="true">https://guanqr.com/life/films/all-it-takes-is-one-bad-day/</guid><pubDate>Thu, 13 Feb 2020 12:46:23 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">哥&lt;/span>谭，一座充满罪恶的都市。在《蝙蝠侠》系列电影中，不同导演的为观众展现出了不同风格的哥谭。上世纪八九十年代电影中的哥谭是哥特风或是赛博朋克风，在诺兰黑暗骑士三部曲中哥谭是写实风——尽管风格各异，但这些哥谭都有一个共同点：由富人家族控制的企业（比如韦恩家族），由黑帮控制的政府（比如法尔科内），底层生活的普通人（比如戈登局长），还有一些阿卡姆精神病人（比如小丑）。这就导致了贫富差距问题突出，穷人对于富人不满的情绪越来越多。&lt;/p>
&lt;p>虽然《小丑》改编自 DC 漫画中蝙蝠侠的头号反派小丑的故事，但这部电影并不属于超级英雄电影。导演只是借助于漫画中的人物姓名和人物关系讲述了一个生活在社会下层的普通人，如何被这个社会塑造成一个制造混乱的疯子的故事。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-0.jpg" alt="joker-0.jpg">&lt;/p>
&lt;p>关于小丑的起源，在漫画中也出现了很多种说法。不同版本的小丑有着不同的起源故事，谁也不知道哪一个是真的，哪一个是小丑自己编造的。目前最有名的起源故事是《致命玩笑》中的马戏团小丑，他经历了很糟糕的一天，最终在化工厂的逃亡中滑落化学池，化学药剂腐蚀了他的皮肤，摧毁了他面部的神经，让他成为了一个皮肤苍白的笑面人。和《致命玩笑》的起源故事类似，《小丑》电影中的亚瑟原本也是一个社会下层的普通人。他的工作是扮演小丑，让他饱受别人歧视的是，他有一种病——只要情绪有所起伏，就会不受控制地发出笑声。甚至有些人认为这种古怪的笑声是他装出来的，突然发笑为了表现小丑的滑稽。&lt;/p>
&lt;p>亚瑟有一个梦想，成为一名脱口秀演员，能够讲出让人欢乐的笑话。他有一个记事本，记事本中记录着他收集到的笑话。他的偶像是默里秀的主持人默里·富兰克林。他经常幻想着自己能够参加这个脱口秀节目，幻想着默里能够关注到他，将他请上舞台，鼓励着他要坚持自己的梦想。可最后，他意识到，默里只是把他当作一个笑话，并没有真正鼓励过他。所以，失落的他在默里秀的电视直播中杀了默里。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-1.jpg" alt="joker-1.jpg">&lt;span class="caption">※ 亚瑟幻想着默里在舞台上鼓励自己&lt;/span>&lt;/p>
&lt;p>和亚瑟一起扮演小丑的朋友，看到他经常被人欺负，就送给他一把枪，希望他能够保护好自己。可正是因为这把枪，他在医院为小孩表演节目的时候掉落出来，失去了自己的工作。这把枪，成为了罪恶之枪。他用这把枪，在地铁中杀掉了三个殴打他的社会精英。引来了警察的调查。为了避免一些不必要的麻烦，他选择杀掉了这位朋友。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-2.jpg" alt="joker-2.jpg">&lt;span class="caption">※ 地铁上失去工作的亚瑟&lt;/span>&lt;/p>
&lt;p>在上楼的电梯里，亚瑟遇见了一个和他同楼层的女邻居，那个邻居向他做出了善意的微笑，这让情绪低落的他有了一丝丝幸福。他觉得邻居对他有好感。他开始幻想，幻想着邻居陪他一起逛街，和他一起照顾母亲，给他精神上的鼓励。可在他精神落魄，真正需要这位邻居的安慰的时候，这位邻居却对他闯入家中的举动感动恐慌。他这时候才意识到原来和她发生过的一切都是自己的幻想。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-3.jpg" alt="joker-3.jpg">&lt;span class="caption">※ 亚瑟在电梯里遇到的邻居&lt;/span>&lt;/p>
&lt;p>他的母亲一直在向托马斯·韦恩写信求助，认为托马斯·韦恩一定会帮助他们母子脱离穷困潦倒的生活。他从母亲的信中了解到，自己是母亲和托马斯·韦恩的私生子。他来到了韦恩庄园，在门口见到了布鲁斯·韦恩。那道门，就像是一堵墙，将富裕和贫困隔离，跨过那扇门，他将拥有一切。可他在阿卡姆精神病院的母亲档案中得知自己的母亲患有严重的妄想症，还虐待自己的孩子。这个孩子就是他自己——因为小时候的事情过于痛苦和久远，他选择了忘记。他母亲告诉他的一切，都是假的。他开始痛恨自己的母亲，亲手用枕头捂死了她。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-4.jpg" alt="joker-4.jpg">&lt;span class="caption">※ 亚瑟来到韦恩庄园遇到布鲁斯&lt;/span>&lt;/p>
&lt;p>在一次次的杀人中，亚瑟感受到了无比的轻松，他不再有任何牵挂。他内心的小丑人格不断侵蚀着他的理智，在开枪杀死默里的那一刻，他彻底成为了小丑。他成为了生活在哥谭底层的普通人信奉的对象，他成为了阶级斗争的领袖，许许多多的普通人开始带着小丑的面具对富人政权进行抗议。那一个夜晚，哥谭暴乱，剧院正在上映《佐罗》电影，布鲁斯·韦恩的父母在混乱之中被杀害，小丑迎来了自己的辉煌。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/joker-5.jpg" alt="joker-5.jpg">&lt;span class="caption">※ 亚瑟成为了真正的小丑&lt;/span>&lt;/p>
&lt;p>在诺兰导演的《黑暗骑士》中，希斯·莱杰塑造出了近乎完美的小丑形象，演员的意外死亡也让希斯·莱杰版本的小丑成为了「神」一般的存在。尽管在后来的影视作品中，也有不少的演员饰演过小丑这一角色，但都无法达到《黑暗骑士》的高度。幸运的是，华金·菲尼克斯接下了这一角色，他塑造了属于他自己的独特风格的小丑，又创造了一个小丑角色的巅峰。他也凭借这部电影，获得了第 92 届奥斯卡金像奖最佳男主角的奖项。&lt;/p>
&lt;p>小丑是蝙蝠侠最有名的反派，似乎「小丑」一词，就代表着「混乱」。小丑和蝙蝠侠就像是一枚硬币的两面。他们都经历过过最糟糕的一天，他们都是疯子，只不过蝙蝠侠选择了在悲剧和混乱中寻找一些正义，小丑选择了成为混乱的本身。他们看待世界的方式不同。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-killing-joke.jpg" alt="the-killing-joke.jpg">&lt;span class="caption">※ 《致命玩笑》结尾，小丑给蝙蝠侠讲的笑话&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/all-it-takes-is-one-bad-day/" target="_blank" rel="noopener">https://guanqr.com/life/films/all-it-takes-is-one-bad-day/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/class-contradiction/">阶级矛盾</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/cyberpunk/">赛博朋克</category></item><item><title>
I Heard You Paint Houses</title><link>https://guanqr.com/life/films/i-heard-you-paint-houses/</link><guid isPermaLink="true">https://guanqr.com/life/films/i-heard-you-paint-houses/</guid><pubDate>Wed, 12 Feb 2020 10:27:30 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-0.jpg" alt="the-irishman-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">第&lt;/span>九十二届奥斯卡金像奖落下帷幕，不出预料的是，《爱尔兰人》全程陪跑。或许是因为大多数人还不能接受流媒体平台的电影获奖，认为以 Netflix 为代表的流媒体平台是对传统银幕的冲击；或许是因为传统黑帮犯罪题材的电影已经随着时代的改变，失去了与其他电影竞争的优势。也许，这部电影得不到任何奖项，但马丁·斯科塞斯和几位老戏骨能够在这么大的年纪共同为一部黑帮电影付出，这已经让众多影迷们无比期待，拥有无比充实的满足感。&lt;/p>
&lt;p>这部电影讲述了一个退伍士兵——爱尔兰人弗兰克·希兰，如何从一个卡车司机逐渐变成一个冷酷的黑帮杀手的故事，同时以弗兰克·希兰的角度揭开了美国犯罪史上的一个迷案——前工会领袖吉米·霍法失踪案的真相。&lt;/p>
&lt;blockquote class="quote en">
&lt;p>I heard you paint houses.&lt;/p>&lt;/blockquote>
&lt;p>这是原著小说的标题，「我听说你刷房子」。这也是电影中吉米·霍法对弗兰克·希兰说的第一句话，刷房子，指的是杀人时血溅墙壁犹如刷墙。&lt;/p>
&lt;blockquote class="quote en">
&lt;p>I also do my own carpentry.&lt;/p>&lt;/blockquote>
&lt;p>「我也做自己的木工活」，弗兰克·希兰告诉吉米·霍法他也做自己的木工活。两个人就这样认识了，也成为了关系密切的好朋友。&lt;/p>
&lt;p>罗素·布法利诺看重弗兰克，是因为他此前是一名士兵，士兵最好的品质就是沉着冷静、服从命令。弗兰克需要一个指挥官给他下达命令，给他一个目标，而罗素正需要一个忠诚的手下，在面包与红酒的催化下，他们成为了彼此最需要的人。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-1.jpg" alt="the-irishman-1.jpg">&lt;span class="caption">※ 罗素与弗兰克，面包与红酒&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-2.jpg" alt="the-irishman-2.jpg">&lt;span class="caption">※ 晚年，在监狱里的两人，面包与红酒&lt;/span>&lt;/p>
&lt;p>电影中有很多情节的刻画十分出色。吉米在现实中是美国历史上最声名显赫的国际货车司机的工会领导人，他十分讨厌肯尼迪家族，在肯尼迪总统被刺杀后，很多办公楼顶都降半旗哀悼，而吉米却选择重新升起国旗庆祝。吉米和矮子开展会议的时候，矮子迟到了，他没有穿西装，而是身着短袖和短裤，矮子的态度惹怒了吉米，一场会议因此变成了一场辱骂和干架。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-3.jpg" alt="the-irishman-3.jpg">&lt;span class="caption">※ 吉米·霍法&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-4.jpg" alt="the-irishman-4.jpg">&lt;span class="caption">※ 会议上的争论&lt;/span>&lt;/p>
&lt;p>吉米把弗兰克当作是自己的亲兄弟，十分信任他。在弗兰克的表彰大会上，罗素知道了吉米故意拖延黑帮投资的项目贷款，吉米声称在自己夺回工会主席后，要收回黑帮所有项目的贷款，不然就接管所有之前黑帮的项目。这些言论彻底激怒了罗素。虽然罗素在吉米担任工会主席的时候，给予了吉米许多帮助，但吉米最终不是黑帮能控制的人——他是个有自己未来愿景和野心的人。在他眼中，工会与黑帮之间的关系只有合作，他的工会不能被黑帮控制。也正因为这样，黑帮要威胁吉米退休，弗兰克作为艰难的传话人开始劝导吉米，但以吉米强硬的性格，他是不会退缩的。&lt;/p>
&lt;p>无奈之下，罗素的黑帮集团决定暗杀吉米，执行者就是他的朋友弗兰克。因为罗素知道，如果不选择让弗兰克亲手杀掉吉米，那么弗兰克绝对会想方设法阻止这件事的发生——这会让整个事件更为复杂。同时，这也是罗素在考验弗兰克是否与黑帮站在同一边。&lt;/p>
&lt;p>暗杀吉米的片段没有背景音乐，镜头中的弗兰克每时每刻都在表现着自己内心的挣扎与无奈。在吉米养子开车接弗兰克和吉米之前，在车里放了一条鱼，这条死鱼意味着死亡，鱼腥味也暗示了血腥。为什么他们不喜欢在车里放鱼？因为无论怎么清洗车子，鱼腥味都很难去除。所以，这辆作案的车子，一定会被销毁。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-5.jpg" alt="the-irishman-5.jpg">&lt;span class="caption">※ 弗兰克手中拿着枪，吉米十分信任他&lt;/span>&lt;/p>
&lt;p>弗兰克与自己的女儿之间逐渐产生隔阂。在女儿与商店老板产生矛盾的时候，身为父亲的弗兰克选择当着女儿的面暴打商店老板。女儿逐渐意识到自己的父亲是一位充满暴力、参与黑帮活动的人。当弗兰克年迈之时，想要请求自己的女儿原谅他，却遭到了自己女儿的拒绝。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-6.jpg" alt="the-irishman-6.jpg">&lt;span class="caption">※ 在葬礼上，弗兰克望着自己的女儿&lt;/span>&lt;/p>
&lt;p>在电影的结尾，弗兰克让牧师不要把门关上。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-irishman-7.jpg" alt="the-irishman-7.jpg">&lt;span class="caption">※ 电影的结尾镜头&lt;/span>&lt;/p>
&lt;blockquote class="quote en">
&lt;p>Hey, Father? C...could you do me a favor? Don't shut the door all the way. I don't like that. Just... Leave it open a little bit.&lt;/p>&lt;/blockquote>
&lt;p>曾经，弗兰克和吉米两人住一个套间。临睡的时候，吉米会留一条门缝——他也许以此在圣诞节时怀念自己的好朋友吉米。或许，他也同时希望自己的女儿能够回来，原谅自己。弗兰克为自己选择了一个棺材，颜色是代表爱尔兰人的绿色。他不愿意选择火葬，也不愿意葬入地下。和他同时代的所有人都已经去世——再也不会有任何人来了。这个房间，就是他的墓地。在刚认识罗素的时候，他讲述自己让两个战俘自掘坟墓的故事，而他自己的一生，也是在给自己挖掘坟墓。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/i-heard-you-paint-houses/" target="_blank" rel="noopener">https://guanqr.com/life/films/i-heard-you-paint-houses/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/gangster/">黑帮</category></item><item><title>
抓取实时数据绘制疫情分布地图</title><link>https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/</guid><pubDate>Wed, 29 Jan 2020 19:57:55 +0800</pubDate><copyright>原文采用 [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.zh) 许可协议，内容结合个人情况有删改。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">最&lt;/span>近 2019-nCoV 疫情形势严峻，封路封小区，人们不得不待在家里防止感染病毒。目前网络上有几个平台提供了疫情实时追踪服务，比如「丁香医生」以及「腾讯新闻」。在闲逛某个论坛的时候，我见到一些人在讨论借助这些平台的数据接口进行个人的数据统计。然后就看到了一篇文章，讲述如何利用 Python 绘制这次的疫情地图，方法比较简单也很有趣，反正在家闲着也是闲着，就照着这篇文章试了一试，效果还不错。于是，我就将这篇文章搬运过来了（目前这篇文章因为时效性已经被原作者删除）。&lt;/p>
&lt;h2 id="数据下载">&lt;a href="https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/#数据下载" class="anchor-link" aria-label="数据下载">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据下载&lt;/h2>
&lt;p>数据源擦偶用腾讯的&lt;a href="https://news.qq.com/zt2020/page/feiyan.htm?from=timeline&amp;amp;isappinstalled=0" target="_blank" rel="noopener">疫情实时追踪&lt;/a>。以 Chrome 浏览器为例，查看加载项，可以看到一个应答类型为 &lt;code>json&lt;/code> 格式的请求包含我们需要的数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/draw-the-map-of-2019-ncov-epidemic-distribution-0.png" alt="draw-the-map-of-2019-ncov-epidemic-distribution-0.png">&lt;/p>
&lt;p>深入分析，我们就得到了 URL 地址、请求方法、参数、应答格式等信息。查询参数中，&lt;code>callback&lt;/code> 是回调函数名，我们可以尝试置空，&lt;code>_&lt;/code> 应该是以毫秒为单位的当前时间戳。有了这些信息，分分钟就可以抓到数据了。我们先在 IDLE 中以交互方式抓一下看看效果：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nn">json&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_area_counts&amp;amp;callback=&amp;amp;_=&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">loads&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">len&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="mi">359&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="s1">&amp;#39;country&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;中国&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;湖北&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;city&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;武汉&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;confirm&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1905&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;suspect&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;dead&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">104&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;heal&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">51&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">&amp;gt;&amp;gt;&amp;gt;&lt;/span> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="s1">&amp;#39;country&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;中国&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;广东&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;city&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;江门&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;confirm&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;suspect&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;dead&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;heal&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="数据处理">&lt;a href="https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/#数据处理" class="anchor-link" aria-label="数据处理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据处理&lt;/h2>
&lt;p>以省为单位画疫情图，我们只需要统计同属一个省的所有地市的确诊数据即可。最终的数据抓取代码如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nn">json&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">catch_distribution&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;抓取行政区域确诊分布数据&amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">dict&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_area_counts&amp;amp;callback=&amp;amp;_=&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">item&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">loads&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">]):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="ow">not&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">update&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]:&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]]&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;confirm&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">data&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="数据可视化">&lt;a href="https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/#数据可视化" class="anchor-link" aria-label="数据可视化">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据可视化&lt;/h2>
&lt;p>数据可视化可以使用 &lt;code>malplotlib&lt;/code> 模块，&lt;code>matplotlib&lt;/code> 有很多扩展工具包（toolkits），比如，画 3D 需要 &lt;code>mplot3d&lt;/code> 工具包，画地图的话，则需要 &lt;code>basemap&lt;/code> 工具包，以及处理地图投影的 &lt;code>pyproj&lt;/code> 模块。另外画海陆分界线、国界线、行政分界线等还需要 &lt;code>shape&lt;/code> 数据。所需模块请自行安装，&lt;code>shape&lt;/code> 文件可以从&lt;a href="https://github.com/dongli/china-shapefiles" target="_blank" rel="noopener">这里&lt;/a>下载，绘图用到的矢量字库可以从自己的电脑上随意挑选一个（这里我用的是 &lt;code>SourceHanSerifCN-Regular.otf&lt;/code>）。我的主程序是 &lt;code>map.py&lt;/code>，&lt;code>shape&lt;/code> 文件下载下来之后解压到 &lt;code>china-shapefiles-master&lt;/code>，我是这样保存的：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-cmd" data-lang="cmd">&lt;span class="line">&lt;span class="cl">2019nCoV
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">├─res
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ ├─china-shapefiles-master
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ └─SourceHanSerifCN-Regular.otf
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">└─map.py
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>以下为全部代码，除了疫情地图，还包括了全国每日肺炎确诊数据的下载和可视化。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;span class="lnt">136
&lt;/span>&lt;span class="lnt">137
&lt;/span>&lt;span class="lnt">138
&lt;/span>&lt;span class="lnt">139
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># -*- coding: utf-8 -*-&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">json&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">datetime&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">datetime&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">numpy&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">np&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">matplotlib&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">matplotlib.figure&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">matplotlib.font_manager&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">FontProperties&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">matplotlib.backends.backend_agg&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">FigureCanvasAgg&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">matplotlib.patches&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Polygon&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">matplotlib.collections&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">PatchCollection&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">mpl_toolkits.basemap&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Basemap&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">matplotlib.pyplot&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">plt&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">matplotlib.dates&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">mdates&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;font.sans-serif&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;FangSong&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 设置默认字体&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;axes.unicode_minus&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">False&lt;/span> &lt;span class="c1"># 解决保存图像时&amp;#39;-&amp;#39;显示为方块的问题&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">catch_daily&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;抓取每日确诊和死亡数据&amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_cn_day_counts&amp;amp;callback=&amp;amp;_=&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">loads&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sort&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="k">lambda&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;date&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">date_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 日期&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">confirm_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 确诊&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">suspect_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 疑似&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dead_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 死亡&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">heal_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">list&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 治愈&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">item&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">month&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">day&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;date&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">split&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;.&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">date_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">datetime&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strptime&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2020-&lt;/span>&lt;span class="si">%s&lt;/span>&lt;span class="s1">-&lt;/span>&lt;span class="si">%s&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">month&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">day&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="s1">&amp;#39;%Y-%m-&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">confirm_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;confirm&amp;#39;&lt;/span>&lt;span class="p">]))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">suspect_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;suspect&amp;#39;&lt;/span>&lt;span class="p">]))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dead_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;dead&amp;#39;&lt;/span>&lt;span class="p">]))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">heal_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;heal&amp;#39;&lt;/span>&lt;span class="p">]))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">confirm_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">suspect_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dead_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">heal_list&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">catch_distribution&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;抓取行政区域确诊分布数据&amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="s1">&amp;#39;西藏&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">url&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_area_counts&amp;amp;callback=&amp;amp;_=&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">time&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">item&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">json&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">loads&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">url&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">json&lt;/span>&lt;span class="p">()[&lt;/span>&lt;span class="s1">&amp;#39;data&amp;#39;&lt;/span>&lt;span class="p">]):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="ow">not&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">update&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]:&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;area&amp;#39;&lt;/span>&lt;span class="p">]]&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="nb">int&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">item&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;confirm&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">data&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">plot_daily&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;绘制每日确诊和死亡数据&amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">confirm_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">suspect_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dead_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">heal_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">catch_daily&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 获取数据&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2019-nCoV 疫情统计图表&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">facecolor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;#f4f4f4&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">figsize&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2019-nCoV 疫情曲线&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fontsize&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">confirm_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">label&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;确诊&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">suspect_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">label&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;疑似&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dead_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">label&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;死亡&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">date_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">heal_list&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">label&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;治愈&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">gca&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">xaxis&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">set_major_formatter&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">mdates&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">DateFormatter&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;%m-&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="c1"># 格式化时间轴标注&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">gcf&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">autofmt_xdate&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 优化标注（自动倾斜）&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">grid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">linestyle&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;:&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 显示网格&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">loc&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;best&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 显示图例&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;savefig.dpi&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">300&lt;/span> &lt;span class="c1">#图片像素&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;figure.dpi&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">300&lt;/span> &lt;span class="c1">#分辨率&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">savefig&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2019-nCoV 疫情曲线.png&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 保存为文件&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">#plt.show() &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">plot_distribution&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&amp;#34;绘制行政区域确诊分布数据&amp;#34;&amp;#34;&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">catch_distribution&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">font&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">FontProperties&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fname&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;res/SourceHanSerifCN-Regular.otf&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">size&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">14&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 自定义字体&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lat_min&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lat_max&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">60&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lon_min&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">70&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">lon_max&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">140&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">handles&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">matplotlib&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">patches&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Patch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;#ffaa85&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">alpha&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">linewidth&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">matplotlib&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">patches&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Patch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;#ff7b69&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">alpha&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">linewidth&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">matplotlib&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">patches&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Patch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;#bf2121&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">alpha&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">linewidth&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">matplotlib&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">patches&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Patch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;#7f1818&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">alpha&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">linewidth&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">labels&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s1">&amp;#39;1-9人&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;10-99人&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;100-999人&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;&amp;gt;1000人&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fig&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">matplotlib&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">figure&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">Figure&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fig&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">set_size_inches&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 设置绘图板尺寸&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">axes&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">fig&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">add_axes&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.12&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.8&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.8&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="c1"># rect = l,b,w,h&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Basemap&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">llcrnrlon&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">lon_min&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">urcrnrlon&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">lon_max&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">llcrnrlat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">lat_min&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">urcrnrlat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">lat_max&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">resolution&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;l&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ax&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">axes&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">readshapefile&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;res/china-shapefiles-master/china&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;province&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">drawbounds&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">readshapefile&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;res/china-shapefiles-master/china_nine_dotted_line&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;section&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">drawbounds&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">drawcoastlines&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;black&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 洲际线&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">drawcountries&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;black&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 国界线&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">drawparallels&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">arange&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lat_min&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">lat_max&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">labels&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">])&lt;/span> &lt;span class="c1">#画经度线&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">drawmeridians&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">arange&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lon_min&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">lon_max&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">labels&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span> &lt;span class="c1">#画纬度线&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">info&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">shape&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">zip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">province_info&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">province&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pname&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">info&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;OWNER&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\x00&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fcname&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">info&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;FCNAME&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\x00&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pname&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="n">fcname&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 不绘制海岛&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">key&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">keys&lt;/span>&lt;span class="p">():&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">key&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="n">pname&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">color&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#f0f0f0&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elif&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">color&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#ffaa85&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elif&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">color&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#ff7b69&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elif&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">color&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#bf2121&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">color&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#7f1818&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">poly&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Polygon&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">shape&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">facecolor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">edgecolor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">color&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">axes&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">add_patch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">poly&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">axes&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">handles&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">labels&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">bbox_to_anchor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.11&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">loc&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;lower center&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ncol&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">prop&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">font&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">axes&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">set_title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;2019-nCoV 疫情地图&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">fontproperties&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">font&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">FigureCanvasAgg&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fig&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;savefig.dpi&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">300&lt;/span> &lt;span class="c1">#图片像素&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plt&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">rcParams&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;figure.dpi&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">300&lt;/span> &lt;span class="c1">#分辨率&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">fig&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">savefig&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;2019-nCoV 疫情地图.png&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="vm">__name__&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;__main__&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plot_daily&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plot_distribution&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>疫情曲线:&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/draw-the-map-of-2019-ncov-epidemic-distribution-1.png" alt="draw-the-map-of-2019-ncov-epidemic-distribution-1.png">&lt;span class="caption">※ 疫情曲线&lt;/span>&lt;/p>
&lt;p>疫情地图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/draw-the-map-of-2019-ncov-epidemic-distribution-2.png" alt="draw-the-map-of-2019-ncov-epidemic-distribution-2.png">&lt;span class="caption">※ 圆柱投影疫情地图&lt;/span>&lt;/p>
&lt;p>上图为圆柱投影，这也是 &lt;code>basemap&lt;/code> 默认的投影模式，我们还可以换用其他投影模式，比如兰勃特等角投影，只需要将 &lt;code>99&lt;/code> 行代码改为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">m&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Basemap&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">projection&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;lcc&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">5000000&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">5000000&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">lat_0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">36&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">lon_0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">102&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">resolution&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;l&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ax&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">axes&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>兰勃特投影效果如下：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/draw-the-map-of-2019-ncov-epidemic-distribution-3.png" alt="draw-the-map-of-2019-ncov-epidemic-distribution-3.png">&lt;span class="caption">※ 兰勃特投影疫情地图&lt;/span>&lt;/p>
&lt;p>还可以使用正射投影：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">m&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Basemap&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">projection&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;ortho&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">lat_0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">30&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">lon_0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">105&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">resolution&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s1">&amp;#39;l&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">ax&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">axes&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>效果如下：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/draw-the-map-of-2019-ncov-epidemic-distribution-4.png" alt="draw-the-map-of-2019-ncov-epidemic-distribution-4.png">&lt;span class="caption">※ 正射投影疫情地图&lt;/span>&lt;/p>
&lt;p>注意：以上数据采集时间为 2020 年 1 月 29 日 20 时。此后腾讯在数据源的结构上做了一些改动，数据源链接与对应的结构名都需要做相应的改动，否则运行程序会出现错误。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/draw-the-map-of-2019-ncov-epidemic-distribution/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/data-processing/">数据处理</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
SolidWorks 光机结构设计</title><link>https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/</guid><pubDate>Tue, 28 Jan 2020 10:52:19 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-0.png" alt="mechanical-structure-design-0.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>学校里经常有学弟向我咨询学院开设的一些设计课程的相关内容，所以我觉得有必要写几篇文章详细展示一下课程的内容、难度以及我的感想。我看到 2019 级本科生培养方案中，已经把「专业认知实习」课程并入了「光电导论」课程，「光学系统设计」和「电子系统设计」课程二选一，也就是说在大一和大二的暑假都只需要修一门课程，这是比较不错的课程调整。这篇文章原本应该在《&lt;a href="https://guanqr.com/study/optics/opt-short-term-2019/">光电学院短学期结束&lt;/a>》之前发布，因为「光机结构设计」是我们专业的第一门设计类课程，也是我的第一门暑假短学期课程（我用&lt;a href="https://guanqr.com/life/school/science-summer-camp-in-japan/">科研夏令营&lt;/a>替换了「专业认知实习」课程）。不过之前一直忙着各种事务，把这篇文章一拖再拖，直到现在才有机会写完。&lt;/p>
&lt;h2 id="课程简介">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#课程简介" class="anchor-link" aria-label="课程简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>课程简介&lt;/h2>
&lt;p>这门课程简单来说就是了解一些光学器件的结构、掌握仪器加工的方法，深入学习 SolidWorks 软件的使用，小组合作在一周内完成任意一个设计作品。由于当时还没有学习光学课程，所以并没有要求必须设计光学仪器。但是设计出来的产品要有技术指标和参数说明、工程图纸、应力分析、成本估算等等一个产品基本具备的东西。&lt;/p>
&lt;p>这门课的上课时间是在 9 月份开学前。当大一的小伙伴们入学军训的时候，我们就在学校机房里进行上课。在设计该项产品之前，还会有一系列的软件基础教学、小型的课堂练习，比如设计一个茶壶，设计一个超辐射发光二极管，拆卸四倍镜并研究它的内部结构，对它进行建模并改进设计，这里就不再详细说明。我觉得这门课程是比较容易学习的，如果要问我哪里比较难学的话，我会说是 SolidWorks 软件的安装。如果你的计算机配置比较菜的话，在这门课上有些吃亏。还有，记得给你的计算机配个鼠标，像我这种常年不用鼠标只用触控板的，就很难控制软件的视图方向。&lt;/p>
&lt;p>下面我会详细展示我们小组的设计：一款十分奇葩的折叠式智能跟随拍摄器。可能是因为过于奇葩，我们还评选上了这门课程的优秀设计二等奖。&lt;/p>
&lt;h2 id="产品设计">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#产品设计" class="anchor-link" aria-label="产品设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>产品设计&lt;/h2>
&lt;p>当初想到设计这样一款产品纯属偶然，我们小组为了避免和其他组撞题，想到了镜头设计，折叠收纳，再加上我们学过 Arduino 电子设计，想要给产品加上传感器之类的东西，这些元素组合在一起，就诞生了这款产品。组内设计分工方面，主要分为三部分内容，一是镜头设计，二是伸缩杆设计，三是底座设计。底座设计是重中之重，因为底座结构是我构思出来的，所以我就负责这一部分的设计，这里涉及到了比较复杂，难以设计的结构，交给别人设计我也不太放心。由于设计时间和能力有限，我们没有设计完成内部的电路和电子器件的设计，对于电子器件，仅仅使用一个个方块替代；为了展示内部结构，底座和伸缩杆使用了透明材质。最终渲染图如下所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-1.jpg" alt="mechanical-structure-design-1.jpg">&lt;/p>
&lt;p>&lt;strong>基本功能&lt;/strong>：&lt;/p>
&lt;p>能实现移动跟随、自动避障、不用时可折叠收缩体积、镜头装置可旋转多角度拍摄、可充电或者太阳能补充供电等。&lt;/p>
&lt;p>&lt;strong>技术指标和参数&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>摄像镜头可达到最高高度：1m；&lt;/li>
&lt;li>镜头可旋动角度：上下 180° 及左右 180°；&lt;/li>
&lt;li>太阳能板规格：20cm×30cm×4；&lt;/li>
&lt;li>避障：超声波传感器；&lt;/li>
&lt;li>驱动：四轮驱动。&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>设计约束&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>体积（折叠后）：25cm×30cm×20cm；&lt;/li>
&lt;li>预计质量：8kg；&lt;/li>
&lt;li>使用环境：室内外相对平坦的地面，环境温度常温，不适用于大风、雨雪等恶劣天气；&lt;/li>
&lt;li>强度：底座可承受 10kg 的压力。&lt;/li>
&lt;/ul>
&lt;h3 id="镜头设计">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#镜头设计" class="anchor-link" aria-label="镜头设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>镜头设计&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-2.png" alt="mechanical-structure-design-2.png">&lt;span class="caption">※ 镜头&lt;/span>&lt;/p>
&lt;p>设计成球形镜头以增加美观度和灵活程度，镜头与底座之间利用卡槽链接，该镜头可以沿着水平轴上下旋转，底座也可以利用伸缩杆连接处进行水平旋转，主要材料是 ABS。因为在本课程学习阶段并未学习应用光学有关知识，所以对于镜头只进行了粗略的设计。&lt;/p>
&lt;h3 id="伸缩杆设计">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#伸缩杆设计" class="anchor-link" aria-label="伸缩杆设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>伸缩杆设计&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-3.png" alt="mechanical-structure-design-3.png">&lt;span class="caption">※ 伸缩杆&lt;/span>&lt;/p>
&lt;p>伸缩杆共 4 层支撑杆，与底座连接处可旋转 90°，与摄像头连接处可旋转 180°，主要材料是 ABS＋PC。伸缩杆可通过转轴与底座保持平行或垂直，套杆的结构用了凹槽轨道的设计并在外预留出了一定长度方便拉伸；与相机连接处可旋转 180°，保证相机拍摄时转动以及折叠时将其折入底座内。&lt;/p>
&lt;p>镜头和伸缩杆的设计我认为有些「水」过头了……要是我自己设计的话肯定不会设计得这么简单。&lt;/p>
&lt;h3 id="底座设计">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#底座设计" class="anchor-link" aria-label="底座设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>底座设计&lt;/h3>
&lt;p>底座是整个产品中最为复杂的部分，因为涵盖了四轮驱动装置、定位装置、太阳能装置、升降架这四大部分，而且需要考虑空间分布与合理展开与收纳。为了追求细节，我自己独立设计了三十多个零件。底座采用四轮驱动前行，长 30cm 宽 25cm 高 15cm, 主要材料是 6061 铝合金。这里我对几个比较重要的零件进行详细的展示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-4.png" alt="mechanical-structure-design-4.png">&lt;span class="caption">※ 底座零件&lt;/span>&lt;/p>
&lt;p>首先是驱动底盘。驱动底盘需要装配上车轮、电机、电池以及核心控制模块，所以在外形设计上比较复杂。底部的小孔为预留的充电接口。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-5.png" alt="mechanical-structure-design-5.png">&lt;span class="caption">※ 驱动底盘&lt;/span>&lt;/p>
&lt;p>车轮直径 56mm，电机与车轮直接相连。车轮轴与车壳相接处安放了滚珠轴承，减少摩擦阻力。车轮的设计灵感来自于迷你四驱车。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-6.png" alt="mechanical-structure-design-6.png">&lt;span class="caption">※ 车轮&lt;/span>&lt;/p>
&lt;p>底座的第二层安放有超声波定位装置，并安装了太阳能电池板。为了在不那么科学的设计中讲究一点科学，我对几种定位装置进行了对比：&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th>定位技术&lt;/th>
&lt;th>优势&lt;/th>
&lt;th>劣势&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>GPS&lt;/td>
&lt;td>精度高、实时性好、抗干扰能力强&lt;/td>
&lt;td>仅适用室外定位且能耗大、成本高&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>IR&lt;/td>
&lt;td>短距离定位精度较高&lt;/td>
&lt;td>视距传输、抗干扰能力差&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>UWB&lt;/td>
&lt;td>精度高、实时性好、能耗低&lt;/td>
&lt;td>造价高、抗干扰能力差&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>RFID&lt;/td>
&lt;td>精度高、非视距、成本低&lt;/td>
&lt;td>实时性差、安全性差&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>超声波&lt;/td>
&lt;td>精度较高，结构简单、成本低&lt;/td>
&lt;td>多径效应&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>通过对定位精度，能耗，成本，使用便捷程度进行分析，我决定采用超声波定位。在定位的时候，采用三边测量（Trilateration）定位算法，通过安放在安放在四角的超声波定位装置，对携带超声波发射器的人进行距离测量，即可确定人的具体位置。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-7.png" alt="mechanical-structure-design-7.png">&lt;span class="caption">※ 超声波定位模块&lt;/span>&lt;/p>
&lt;p>太阳能电池板可以沿着滑动轨道伸出并展开。太阳能电池板大小规格为 12×25cm 和 9×25cm, 通过太阳能电池板生成的电力会储存到底部的电池中。由于太阳能板面积比较小，这部分的电能只是作为补充电能使用。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-8.png" alt="mechanical-structure-design-8.png">&lt;span class="caption">※ 太阳能电池板&lt;/span>&lt;/p>
&lt;p>底座的第三层是安放伸缩杆的地方，为了达到计划高度，增设了一个升降架，通过液压活塞控制升降架的高度对整体高度进行进行再次调整。升降架底座的面积为 27×24cm，可上升高度为 19.8cm。这一部分是最让我头痛的设计，因为我之前并没有研究过升降架的结构，由于需要组合装配体，在支架长度和伸缩控制方面设计了很长时间。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/mechanical-structure-design-9.png" alt="mechanical-structure-design-9.png">&lt;span class="caption">※ 升降架&lt;/span>&lt;/p>
&lt;p>一些设计缺陷：&lt;/p>
&lt;ul>
&lt;li>设计时没有考虑完善，导致伸缩杆因底座长度受限而无法达到预期最大长度，所以做了底座升降架进行弥补；&lt;/li>
&lt;li>摄像头内只用了最简单的镜头表示，并没有考虑变焦等功能；&lt;/li>
&lt;li>电机、感应部分等控制模块只用了长方体简单表示，预留出设计部位，并没有对其进行更深一步的设计；&lt;/li>
&lt;li>……&lt;/li>
&lt;/ul>
&lt;h2 id="课程感想">&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/#课程感想" class="anchor-link" aria-label="课程感想">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>课程感想&lt;/h2>
&lt;p>这门课程如果想要拿到高分，就需要认真对待最后的设计作业，设计的产品不一定非要符合实际生活，但必须要有想象力和创造力。只要能将产品设计到位，注意一些细节方面的设计，比如螺丝钉的位置、镜头的压圈、联动装置设计、材料的使用等等，只要有设计上的「亮点」，有吸引人的地方，最终的总评成绩一定不会差。&lt;/p>
&lt;p>因为是小组合作，为了避免组内矛盾和组员「划水」现象的发生，我建议在开课前就进行组队——以我多年的经验来看，老师应该会进行自由组队的。&lt;/p>
&lt;p>在 SolidWorks 软件使用上，我觉得关键在于自学，不要太依赖老师在课堂上讲的内容，因为老师讲的只是理论知识，和实际操作还是有一定区别的。每天课程结束后回到宿舍，应该对当天的内容及时巩固练习，抓紧时间熟悉软件的各项功能。&lt;/p>
&lt;p>我认为设计类的课程都很有必要认真学习的，因为通过这类课程可以锻炼一些软件的使用技能，比如这门课程的 SolidWorks、「光学系统设计」的 Zemax、「电子系统设计」的 Altium Designer……这对于今后的工作一定会有帮助。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/mechanical-structure-design-by-solidworks/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/modeling/">建模</category><category domain="https://guanqr.com/tags/solidworks/">SolidWorks</category></item><item><title>
博客迁移，从 Hexo 到 Hugo</title><link>https://guanqr.com/tech/website/from-hexo-to-hugo/</link><guid isPermaLink="true">https://guanqr.com/tech/website/from-hexo-to-hugo/</guid><pubDate>Sun, 26 Jan 2020 14:35:40 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/hugo-theme-meme.png" alt="hugo-theme-meme.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">去&lt;/span>年 11 月初的时候，我将我的博客迁移到了 &lt;a href="https://github.com/gohugoio/hugo" target="_blank" rel="noopener">Hugo&lt;/a>，主题是 &lt;a href="https://github.com/reuixiy/hugo-theme-meme" target="_blank" rel="noopener">MemE&lt;/a>。尽管我的博客才刚刚创建没多长时间，为了满足自己对博客功能的需求，我还在 &lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">NexT&lt;/a> 主题的基础上进行了&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/">很多个性化的修改&lt;/a>，但我最终还是抛弃了 Hexo。&lt;/p>
&lt;p>NexT 主题确实是 Hexo 中可定制程度最高的主题，我折腾了很久，但是这种高度自由的定制也带来了不少麻烦：每一次我对主题进行更新的时候，都要小心翼翼地操作，因为该主题的开源团队会时不时地对主题部分页面的结构进行大改，而我对页面的美化恰恰是基于结构的，这就导致了各种各样的报错。每一次为了解决这些错误，我都要认真对主题的源代码进行研究，看一看两个版本之间到底哪里发生了改变，这花费了不少的时间精力。另外，不得不吐槽的是，Hexo 生成页面的速度远不如 Hugo 迅速，这也是我选择 Hugo 的原因。&lt;/p>
&lt;p>Hugo 主题 MemE 是一位博主借鉴 NexT 的样式进行设计的，该主题也十分符合我的审美，功能也很强大：&lt;/p>
&lt;ol>
&lt;li>主题排版美观、干净整洁；&lt;/li>
&lt;li>可以生成相互跳转的段落标题和目录；&lt;/li>
&lt;li>文章段落可以实现首字下沉、段首缩排，以及诗歌的样式；&lt;/li>
&lt;li>可以实现多语言、黑暗模式切换；&lt;/li>
&lt;li>支持 PWA 和 IPFS 部署；&lt;/li>
&lt;li>……&lt;/li>
&lt;/ol>
&lt;p>所以我就毫不犹豫地将博客迁移了过来。省去了每次更新主题都要 Debug、每次生成网页都要等待一两分钟的烦恼，我能够把更多的精力专注于文章写作方面，何乐而不为？&lt;/p>
&lt;p>目前博客的样式和在 Hexo 的时候基本一样，最明显的变化是：&lt;/p>
&lt;ol>
&lt;li>首页从文章摘要页面变为了单独的诗句页面，减少杂乱无章的视觉效果；&lt;/li>
&lt;li>减少了侧边栏，现在想一想我在浏览博客的时候很少会展开侧边栏，这是个多余的设计；&lt;/li>
&lt;li>品牌栏从三色变换的彩带换成了一张图片，图片源自校内论坛中秋节日封面。&lt;/li>
&lt;/ol>
&lt;p>由于博客进行了迁移，文章的地址发生了变化，我对之前的文章地址都进行了重定向。之前有几篇文章收到了不少的引荐，虽然文章地址的变化必然会导致一些访问量的损失，但这也是迫不得已的事，以后我会尽量避免对文章地址的修改。希望 Hugo 是我博客的最后一站吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/from-hexo-to-hugo/" target="_blank" rel="noopener">https://guanqr.com/tech/website/from-hexo-to-hugo/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
春节和肺炎的组合</title><link>https://guanqr.com/life/ideas/spring-festival-2020/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/spring-festival-2020/</guid><pubDate>Sat, 25 Jan 2020 22:35:39 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/2020-spring-festival.png" alt="2020-spring-festival.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>年的春节格外的冷清。由于禁止燃放烟花爆竹，十二点的钟声一响，再也没有噪音打扰到我的入眠。十二月份开始的由新型冠状病毒引发的肺炎疫情，从武汉蔓延至全国各地，各种大型活动都取消了，贺岁档电影也撤档了，走亲访友改成了线上视频电话的方式。超市、药店的口罩都卖脱销了，每家每户都躲在家里，戴着口罩。&lt;/p>
&lt;p>前些日子刚从学校回家的时候，疫情还没有现在这么严重，我还觉得这都是小事，不至于让那么多人恐慌。可就仅仅过了一周的时间，疫情传播地越来越快，地图上红色区域越来越多，我也紧张起来，同时回想起了小时候经历非典的情形。除夕的傍晚，学校一位摄影老师拍摄了杭州城站的情景，车站里只有一些安保人员、清洁工，还有零星的乘客，他们都戴着口罩。杭州的疫情算是比较严重的城市了，大概是因为在武汉和杭州之间往返的人有很多。当初我计划在大年初一去电影院看电影，早早地买了票，当初我还计划春节期间到公园里赏花灯，约朋友一起散散步。现在这些计划都取消了，那几部同时在大年初一上映的电影也撤档了，躲在家里才是最安全的。&lt;/p>
&lt;p>浙江在疫情地图上也变成深红色了，杭州超越台州成为了浙江肺炎患者最多的城市，我也不知道学校会不会推迟开学时间呢？下学期王大珩实验班的同学们还要到华科交流一学期，我估计他们也很头痛吧。&lt;/p>
&lt;p>今年的春晚，央视和导演似乎向观众妥协，不再是加长版的新闻联播，形式更偏向网络与青年风。让我出乎意料的是，佟丽娅居然当了春晚的主持人，小品节目里也多了许多年轻帅气的影视演员。虽然春晚的节目形式更加多样化，但我觉得欢笑程度似乎还是减少了许多，可能是因为我的笑点又升高了，觉得这些都没什么意思了。今年除夕我没能熬到十二点，早早地就睡了。&lt;/p>
&lt;p>本来年味就越来越淡了，这次的肺炎，就像是在已经熬过头的清汤里又兑了一碗水，淡上加淡。假期里还是一直宅在家看看剧，写写论文，哪也不要去了吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/spring-festival-2020/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/spring-festival-2020/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/family/">家庭</category></item><item><title>
基于 MATLAB 的信号处理</title><link>https://guanqr.com/tech/optics/signal-processing-based-on-matlab/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/signal-processing-based-on-matlab/</guid><pubDate>Mon, 20 Jan 2020 08:38:19 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">光&lt;/span>电专业的《信号与系统》课程是选修课程，要求掌握的内容不如隔壁信电深入。但我认为这是一门很有必要学习的课程，因为在这门课程中你会学习信号的三大变换：&lt;a href="https://en.wikipedia.org/wiki/Fourier_transform" target="_blank" rel="noopener">傅里叶变换&lt;/a>、&lt;a href="https://en.wikipedia.org/wiki/Laplace_transform" target="_blank" rel="noopener">拉普拉斯变换&lt;/a>、&lt;a href="https://en.wikipedia.org/wiki/Z-transform" target="_blank" rel="noopener">Z 变换&lt;/a>，这些对于光学领域的图像和信号处理有所帮助。除此之外，这门课程还设有八次 MATLAB 操作实验，对于很多第一次使用 MATLAB 进行信号处理的人来说，这可以算是一个入门课程，虽然对于 MATLAB 的使用，老师并没有讲什么东西，还是要靠自学。在本文中，我将对在该门课程中涉及到的一些 MATLAB 信号处理方法进行汇总，希望对入门级别的人有所帮助。&lt;/p>
&lt;h2 id="信号的时域运算和卷积">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#信号的时域运算和卷积" class="anchor-link" aria-label="信号的时域运算和卷积">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:信号的时域运算和卷积" class="headings">信号的时域运算和卷积&lt;/a>&lt;/h2>
&lt;p>信号是随时间（或其他自变量）变化的物理量，在数学上表示为时间 $t$（或其他自变量）的函数。广义地讲，信号可分为模拟信号和离散信号。模拟信号的自变量和信号都是连续的，通常用 $x(t)$ 表示，而离散信号的自变量和信号都是离散的，通
常用 $x[n]$ 表示（其中 $n$ 为整数值并在时间上表示一些离散时刻）。由于计算机给出的数值的位数都是有限的，所以严格来说计算机是不能处理连续的模拟信号的。同样对于 MATLAB，除非是使用符号运算工具箱（Symbolic toolbox），也是不能进行模拟信号的运算的。不过，如果我们用足够小的时间间隔对 $x(t)$ 进行抽样，而且保证抽样值有足够的精度，那么模拟信号就可以用抽样得到的离散信号来近似地表示。&lt;/p>
&lt;p>对于连续时间信号，信号的基本运算包括信号的相加和相乘、微分和积分、以及时域变换（平移、反褶和尺度变换）等。对于离散时间序列，信号的基本运算包括相加和相乘、差分和累加、以及时域变换等。由于离散时间序列在时间上的离散性（只在整数时间上有定义），其尺度变换的过程为抽取或内插零。&lt;/p>
&lt;h3 id="信号运算的-matlab-实现">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#信号运算的-matlab-实现" class="anchor-link" aria-label="信号运算的-matlab-实现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:信号运算的-matlab-实现" class="headings">信号运算的 MATLAB 实现&lt;/a>&lt;/h3>
&lt;h4 id="离散时间序列的运算">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#离散时间序列的运算" class="anchor-link" aria-label="离散时间序列的运算">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:离散时间序列的运算" class="headings">离散时间序列的运算&lt;/a>&lt;/h4>
&lt;p>为了实现不同自变量取值范围和顺序的信号的运算，我们不妨定义以下的函数：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>[F,K]&lt;span class="p">=&lt;/span>&lt;span class="nf">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>F1,K1,K2&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">% ZeroPadSignal Zero padding a signal.&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% [F,K]=ZeroPadSignal(F1,K1,K2)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% F=ZeroPadSignal(F1,K1,K2)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% sorts the elements of K1 in ascending order, rearranges&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% F1 accordingly, zero pads F1 to a range defined in K2,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% and returns signal F with sorted index K.&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">F1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">~=&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">error&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Length of F1 and K1 must agree.&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">KT&lt;/span> &lt;span class="n">I&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">sort&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">K&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">sort&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="n">K&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="n">K&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K&lt;/span>&lt;span class="p">)))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">error&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Range of K2 must not less than that of K1.&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Id&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">J&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">Id&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="nb">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="n">KT&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">F&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>，&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">K&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">F&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Id&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">F1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">I&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>该函数可对信号序列进行排序，并且可以将序列扩展为指定的自变量取值范围。比如，以下程序产生一个信号：&lt;/p>
&lt;div>
$$
x[n]=\sin\frac{(n+5)\pi}{8}
$$
&lt;/div>
&lt;p>自变量范围 $n=[-5,3]$，将其分解为偶函数和奇函数，输出结果如下图所示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">ax&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">6&lt;/span> &lt;span class="mi">6&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">nl&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x[-n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x3&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;(x[n]+x[-n])/2&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x4&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ax&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)=[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.5&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;(x[n]-x[-n])/2&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-0.png" alt="signals-and-systems-0.png">&lt;span class="caption">※ 信号的奇偶分解&lt;/span>&lt;/p>
&lt;h4 id="离散时间序列的差分和累加">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#离散时间序列的差分和累加" class="anchor-link" aria-label="离散时间序列的差分和累加">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:离散时间序列的差分和累加" class="headings">离散时间序列的差分和累加&lt;/a>&lt;/h4>
&lt;p>在 MATLAB 中差分可用 &lt;code>diff&lt;/code> 函数实现，累加可用 &lt;code>cumsum&lt;/code> 函数实现，或将采样值向量逐项相加即可。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">nl&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">2&lt;/span> &lt;span class="mi">3&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="mi">2&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ndiff&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">xdiff&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">diff&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xdiff&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ndiff&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sum&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x3&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">J&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sum&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">sum&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">J&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">sum&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x[n]$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x_1[n]=x[n]-x[n-1]$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x_2[n]=\sum\limits_{k=-\infty}^n{x[k]}$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-1.png" alt="signals-and-systems-1.png">&lt;span class="caption">※ 离散时间信号的差分和累加&lt;/span>&lt;/p>
&lt;h4 id="离散时间序列的卷积和">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#离散时间序列的卷积和" class="anchor-link" aria-label="离散时间序列的卷积和">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:离散时间序列的卷积和" class="headings">离散时间序列的卷积和&lt;/a>&lt;/h4>
&lt;p>如果两个序列的自变量 $n$ 分别开始于 $n_1$ 和 $n_2$，则它们的卷积开始于 $n_1+n_2$。计算 $x_1[n]=0.5^nu[n]$ 和 $x_2[n]=u[n-1]-u[n-6]$ 的卷积，程序如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">n1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">x1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">x2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">conv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">n0&lt;/span>&lt;span class="p">:(&lt;/span>&lt;span class="n">n0&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">nl&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x1p&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x2p&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x1p&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x_1[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x2p&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x_2[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">nl&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xp&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x[n]=x_1[n]*x_2[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-2.png" alt="signals-and-systems-2.png">&lt;span class="caption">※ 离散时间信号的卷积和&lt;/span>&lt;/p>
&lt;h4 id="复数值序列分解">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#复数值序列分解" class="anchor-link" aria-label="复数值序列分解">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:复数值序列分解" class="headings">复数值序列分解&lt;/a>&lt;/h4>
&lt;p>任何复数值序列 $x[n]$ 都能分解为共轭对称分量 $x_e[n]$ 和共轭反对称分量 $x_o[n]$ 的叠加，即：&lt;/p>
&lt;div>
$$
x[n]=x_e[n]+x_o[n]
$$
&lt;/div>
&lt;p>其中：&lt;/p>
&lt;div>
$$
\begin{aligned}
x_e[n]&amp;=\frac{1}{2}(x[n]+x*[-n]),\\
x_o[n]&amp;=\frac{1}{2}(x[n]-x*[-n])
\end{aligned}
$$
&lt;/div>
&lt;p>将：&lt;/p>
&lt;div>
$$
x[n]=10e^{-j0.2\pi n},\quad 0\leq n\leq 10
$$
&lt;/div>
&lt;p>分解为共轭对称分量和共轭反对称分量。&lt;/p>
&lt;p>定义函数：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>[xt,nt]&lt;span class="p">=&lt;/span>&lt;span class="nf">MyFlip&lt;/span>&lt;span class="p">(&lt;/span>x,n&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">% [xt,nt]=MyFlip(x,n)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% flips input signal [x,n], and returns flipped signal [xt,nt].&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">n1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">xt&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nt&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后运行以下程序：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">n&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">np&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">xf&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nf&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">MyFlip&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">xf&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nf&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">ZeroPadSignal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xf&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">nf&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xe&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">conj&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xf&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xo&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">conj&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xf&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Real Part of x[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">imag&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Imaginary Part of x[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xe&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Real Part of x_e[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">imag&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xe&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Imaginary Part of x_e[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xo&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Real Part of x_o[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">np&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">imag&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xo&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;filled&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Imaginary Part of x_o[n]&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-3.png" alt="signals-and-systems-3.png">&lt;span class="caption">※ 复数值序列分解&lt;/span>&lt;/p>
&lt;h3 id="连续时间信号的运算">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#连续时间信号的运算" class="anchor-link" aria-label="连续时间信号的运算">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:连续时间信号的运算" class="headings">连续时间信号的运算&lt;/a>&lt;/h3>
&lt;p>MATLAB 采用用抽样值 $x(kT_s)$ 构成的离散时间序列来近似地表示连续信号，因此连续时间信号的表示和运算和离散时间信号序列并没有本质的区别。在进行信号相加、相乘等运算时，需要各个信号的 $T_s$ 是相同的；如果 $T_s$ 足够小，信号的微分、积分以及卷积可用差分、累加和卷积和近似。&lt;/p>
&lt;p>比如，某 LTI 系统的输入信号为 $x(t)=e^{(-t-1)}u(t+1)$，可以通过定义两个长度相同的行向量来表示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.e-3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">1.5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果系统的单位冲激响应为 $h(t)=u(t-2)-u(t-3)$，可表示为（取样间隔和时间范围与输入信号相同）：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">h&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可以求得系统的输出为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">conv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ty&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t0&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中 &lt;code>t0&lt;/code> 是卷积的起始时刻，&lt;code>ty&lt;/code> 是对应的时间向量。&lt;/p>
&lt;p>已知 $x(t)$ 的波形如下图所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-4.png" alt="signals-and-systems-4.png">&lt;/p>
&lt;p>作出以下信号的波形：&lt;/p>
&lt;ol>
&lt;li>$x(2-t)$&lt;/li>
&lt;li>$x(t/2-1)u(-t+4)$&lt;/li>
&lt;li>$dx(t)/{dt}$&lt;/li>
&lt;li>$\int_{-\infty}^t x(\tau)d\tau$&lt;/li>
&lt;li>$x(t)$ 与信号 $t(u(t)-u(t-1))$ 的卷积&lt;/li>
&lt;/ol>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.e-2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ta&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tb&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">xb&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tb&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">tc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)=[];&lt;/span> &lt;span class="n">xc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">diff&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xd&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">cumsum&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xe&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">conv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)))&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">te&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xe&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x(t)$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ta&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ta&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x(2-t)$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tb&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xb&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tb&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tb&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x(t/2-1)u(-t+4)$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.5&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$\frac{dx(t)}{dt}$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xd&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.2&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$\int_{-\infty}^t x(\tau)d\tau$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">te&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xe&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">0.7&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;$x(t)*(t({u(t)-u({t-1})}))$&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;interpreter&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;latex&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-5.png" alt="signals-and-systems-5.png">&lt;/p>
&lt;h2 id="线性时不变系统的时域分析">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#线性时不变系统的时域分析" class="anchor-link" aria-label="线性时不变系统的时域分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:线性时不变系统的时域分析" class="headings">线性时不变系统的时域分析&lt;/a>&lt;/h2>
&lt;p>通常我们从某一时刻（$t=0$）时刻开始分析某 LTI 系统，系统的响应可表示为零输入响应和零状态响应两部分之和。零输入响应是指系统初始时刻之后的输入为零、仅由系统的初始状态引起的系统的输出，零状态响应是指系统的初始状态为零、仅由系统初始时刻之后的输入引起的系统的输出。系统响应的时域解析解法的过程是先求出微分方程（或差分方程）的齐次解，再根据输入信号的形式确定方程的特解，然后根据初始条件确定解的系数，最后得到系统的响应。&lt;/p>
&lt;h3 id="连续时间-lti-系统">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#连续时间-lti-系统" class="anchor-link" aria-label="连续时间-lti-系统">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:连续时间-lti-系统" class="headings">连续时间 LTI 系统&lt;/a>&lt;/h3>
&lt;p>单位冲激响应 $h(t)$ 是描述连续时间 LTI 系统的重要函数，MATLAB 的 control system 工具箱提供了 &lt;code>impulse&lt;/code> 函数，只要提供描述系统的微分方程的系数 $a_k$ 和 $b_k$，或者说，系统传递函数 $H(s)$ 或频率响应 $H(j\omega)$，&lt;/p>
&lt;div>
$$
H(s)=\frac{\sum\limits_{k=0}^Nb_ks^k}{\sum\limits_{k=0}^Ma_ks^k}
$$
&lt;/div>
&lt;p>即可求出指定时间范围内 $h(t)$ 的数值解并画出其时域波形。类似的函数还有 &lt;code>step&lt;/code> 函数，可用来计算和绘制单位阶跃响应 $s(t)$。&lt;/p>
&lt;p>描述连续时间系统的微分方程为：&lt;/p>
&lt;div>
$$
y''(t)+2y'(t)+5y(t)=x'(t)+5x(t)
$$
&lt;/div>
&lt;p>计算系统的单位冲激响应和单位阶跃响应。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">2&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sys&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">tf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.01&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">impulse&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">step&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-6.png" alt="signals-and-systems-6.png">&lt;span class="caption">※ 连续时间系统的单位冲激响应和单位阶跃响应&lt;/span>&lt;/p>
&lt;h3 id="离散时间-lti-系统">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#离散时间-lti-系统" class="anchor-link" aria-label="离散时间-lti-系统">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:离散时间-lti-系统" class="headings">离散时间 LTI 系统&lt;/a>&lt;/h3>
&lt;p>MATLAB 的 signal processing 工具箱中提供了求解离散时间系统（通常称为数字滤波器）单位脉冲响应的函数 &lt;code>impz&lt;/code> 和单位阶跃响应的函数 &lt;code>stepz&lt;/code> 。&lt;/p>
&lt;p>已知描述离散时间系统的差分方程为：&lt;/p>
&lt;div>
$$
y[n]+0.4y[n-1]-0.12y[n-2]=x[n]+2x[n-1]
$$
&lt;/div>
&lt;p>计算系统的单位冲激响应和单位阶跃响应。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mf">0.4&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.12&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">impz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stepz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-7.png" alt="signals-and-systems-7.png">&lt;span class="caption">※ 离散时间系统的单位冲激响应和单位阶跃响应&lt;/span>&lt;/p>
&lt;h3 id="用-lsim-函数求解系统全响应">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#用-lsim-函数求解系统全响应" class="anchor-link" aria-label="用-lsim-函数求解系统全响应">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:用-lsim-函数求解系统全响应" class="headings">用 &lt;code>lsim&lt;/code> 函数求解系统全响应&lt;/a>&lt;/h3>
&lt;p>MATLAB 的 control system 工具箱提供的 &lt;code>lsim&lt;/code> 函数可以仿真连续时间和离散时间 LTI 系统任意输入信号时的时域响应。&lt;/p>
&lt;p>已知系统的微分方程为：&lt;/p>
&lt;div>
$$
y''(t)+5y'(t)+6y(t)=x'(t)+5x(t)
$$
&lt;/div>
&lt;p>输入信号为 $x(t)=5\sin t$，系统的初始条件为 $y(0_-)=27$，$y'(0_-)=-30$，求系统的零输入响应、零状态响应和全响应。&lt;/p>
&lt;p>由于 &lt;code>lsim&lt;/code> 函数关于初始条件的输入参量是系统状态变量（即直接 II 型结构框图各个积分器的输出值）的初始值，所以需要将微分方程转换为一阶常微分方程组的形式（其中系数矩阵 A、B、C 和 D 可通过 &lt;code>tf2ss&lt;/code> 函数得到）：&lt;/p>
&lt;div>
$$
\begin{aligned}
\begin{bmatrix}
\omega_1'(t)\\
\omega_2'(t)
\end{bmatrix}&amp;=
\begin{bmatrix}
-5&amp;-6\\
1&amp;0
\end{bmatrix}
\begin{bmatrix}
\omega_1(t)\\
\omega_2(t)
\end{bmatrix}+
\begin{bmatrix}
1\\
0
\end{bmatrix}x(t)\\
y(t)&amp;=
\begin{bmatrix}
1&amp;5
\end{bmatrix}
\begin{bmatrix}
\omega_1(t)\\
\omega_2(t)
\end{bmatrix}
\end{aligned}
$$
&lt;/div>
&lt;p>将 $x(0)=0$ 和初始状态 $y(0_-)=27$，$y'(0_-)=-30$ 代入上式，可得状态向量 $\omega$ 的初始值为：&lt;/p>
&lt;div>
$$
\begin{bmatrix}
\omega_1(0_-)\\
\omega_2(0_-)
\end{bmatrix}=
\begin{bmatrix}
2\\
5
\end{bmatrix}
$$
&lt;/div>
&lt;p>程序如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">5&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">A&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">B&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">C&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">tf2ss&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sys&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ss&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">A&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">B&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">C&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X0&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.01&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yzi&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)),&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">X0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yzs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">X0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">yzi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">yzs&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;g--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero Input Response&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;Zero State Response&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;Total Response&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-8.png" alt="signals-and-systems-8.png">&lt;/p>
&lt;p>&lt;code>lsim&lt;/code> 函数也可以求解离散时间系统的响应，已知系统的前向差分方程为：&lt;/p>
&lt;div>
$$
y[n+2]-0.7y[n+1]+0.1y[n]=7x[n+2]-2x[n+1]
$$
&lt;/div>
&lt;p>输入信号为 $x[n]=0.8^nu[n]$，系统的初始条件为 $y[-1]=10$，$y[-2]=-10$，求系统的零输入相应、零状态响应和全响应。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.7&lt;/span> &lt;span class="mf">0.1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">7&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">A&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">B&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">C&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">tf2ss&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sys&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ss&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">A&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">B&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">C&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X0&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">10&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mf">0.8&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yzi&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)),&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">X0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yzs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">lsim&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">X0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">yzi&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero Input Response&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">yzs&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero State Response&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Total Response&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-9.png" alt="signals-and-systems-9.png">&lt;/p>
&lt;h2 id="傅立叶变换和-lti-系统的频域分析">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#傅立叶变换和-lti-系统的频域分析" class="anchor-link" aria-label="傅立叶变换和-lti-系统的频域分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:傅立叶变换和-lti-系统的频域分析" class="headings">傅立叶变换和 LTI 系统的频域分析&lt;/a>&lt;/h2>
&lt;p>傅里叶变换在众多领域都有着广泛的应用。在信号和系统中，通过傅里叶变换可将时域上的信号转换为频域上的频谱密度函数，还可将时域上的卷积运算转化为频域上较为简单的乘积运算。值得一提的是，离散形式的傅里叶变换（Discrete Fourier Transfer，简称 DFT）可通过快速傅里叶变换算法（Fast Fourier Transfer，简称 FFT）用计算机快速地实现。以 FFT 为基础的频域方法是现代数字信号和图像处理、通信、控制等众多领域的最基本的技术手段之一。&lt;/p>
&lt;h3 id="矩形脉冲的傅里叶变换">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#矩形脉冲的傅里叶变换" class="anchor-link" aria-label="矩形脉冲的傅里叶变换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:矩形脉冲的傅里叶变换" class="headings">矩形脉冲的傅里叶变换&lt;/a>&lt;/h3>
&lt;p>求矩形脉冲 $x(t)=u(t+1/2)-u(t-1/2)$ 的傅里叶变换。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Fs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% Sampling frequency&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">T&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% Sample time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">L&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">50001&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% Length of signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">L&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:(&lt;/span>&lt;span class="n">L&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">T&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% Time vector&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Signal - rectangular pulse&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">NFFT&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="nb">nextpow2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">L&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Next power of 2 from length of y&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">time&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">cputime&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">T&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% FFT&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c">% Shift the spectrum&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">cputime&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">time&lt;/span> &lt;span class="c">% Display the time used by the FFT operation&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=((&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c">% The corresponding frequency vector&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">1.5&lt;/span> &lt;span class="mf">1.5&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (Hz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">5.5&lt;/span> &lt;span class="mf">5.5&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-10.png" alt="signals-and-systems-10.png">&lt;span class="caption">※ 矩形脉冲信号及其傅里叶变换&lt;/span>&lt;/p>
&lt;h3 id="连续时间信号的傅里叶逆变换">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#连续时间信号的傅里叶逆变换" class="anchor-link" aria-label="连续时间信号的傅里叶逆变换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:连续时间信号的傅里叶逆变换" class="headings">连续时间信号的傅里叶逆变换&lt;/a>&lt;/h3>
&lt;p>求连续时间信号傅里叶变换的逆变换。已知信号 $x(t)$ 的傅里叶变换为：&lt;/p>
&lt;div>
$$
X(j\omega)=\frac{4e^{-j2\omega}}{4+\omega^2}
$$
&lt;/div>
&lt;p>作出信号的时域波形和相应的频谱图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Fs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">T&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">L&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">10000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">NFFT&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="nb">nextpow2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">L&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=((&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">T&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="nb">j&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ifft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">NFFT&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">T&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">5&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">5.5&lt;/span> &lt;span class="mf">5.5&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency(rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Phase (degrees)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">5.5&lt;/span> &lt;span class="mf">5.5&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">180&lt;/span> &lt;span class="mi">180&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-11.png" alt="signals-and-systems-11.png">&lt;/p>
&lt;h3 id="加随机噪声的傅里叶变换">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#加随机噪声的傅里叶变换" class="anchor-link" aria-label="加随机噪声的傅里叶变换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:加随机噪声的傅里叶变换" class="headings">加随机噪声的傅里叶变换&lt;/a>&lt;/h3>
&lt;p>连续时间信号：&lt;/p>
&lt;p>$$
x(t)=0.5\sin(100\pi t)+\cos(150\pi t)+0.7\sin(200\pi t+\pi/3)
$$&lt;/p>
&lt;p>使用快速傅里叶变换方法求出信号的傅里叶变换，并在信号上加上方差为 $5$ 的随机噪声，如：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">xn&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">randn&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>作出信号及其频谱。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.2e-3&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="mi">13&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sn&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">randn&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xn&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">sn&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,(&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yn&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xn&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (Hz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xn&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">yn&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (Hz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-12.png" alt="signals-and-systems-12.png">&lt;/p>
&lt;h3 id="rc-串联电路滤波器">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#rc-串联电路滤波器" class="anchor-link" aria-label="rc-串联电路滤波器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:rc-串联电路滤波器" class="headings">RC 串联电路滤波器&lt;/a>&lt;/h3>
&lt;p>RC 串联电路是最简单的一阶低通滤波器（输出为电容两端的电压）和一阶高通滤波器（输出为电阻两端的电压）。取 $R=51\Omega$、$C=22\mu F$ 值，作出低通和高通滤波器的幅频特性和相频特性图；用快速傅里叶变换方法分别求出低通和高通滤波器的单位阶跃响应，即 RC 串联电路接通直流电源后电容和电阻两端电压的瞬态变化。&lt;/p>
&lt;p>首先根据时间常数 $\tau=RC$ 确定了较为合适的时间区间、样本个数和采样时间间隔，然后给出电路的频率响应:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">C&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">22e-6&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">R&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">51&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tau&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">R&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">C&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Tf&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">tau&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">25&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>^&lt;span class="mi">13&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">Tf&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w&lt;/span>&lt;span class="p">=((&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">H1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">freqs&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">],[&lt;/span>&lt;span class="n">tau&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">H2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">freqs&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="n">tau&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">],[&lt;/span>&lt;span class="n">tau&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>作出低通和高通滤波器的幅频和相频曲线：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">H1&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">set&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">gca&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;xscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;yscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">H1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">90&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">set&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">gca&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;xscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Phase (degrees)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">H2&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">set&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">gca&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;xscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;yscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">H2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">set&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">gca&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;xscale&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;log&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (rad/s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Phase (degrees)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-13.png" alt="signals-and-systems-13.png">&lt;/p>
&lt;p>再计算输入信号的傅里叶变换，经过频域的相乘及傅里叶反变换即得到时域上的响应。为计算方便起见不妨取输入信号为一个矩形窗函数，窗口宽度为计算的时间区间的一半，得到的结果的前半部分即为单位阶跃响应，后半部分为 RC 电路的放电曲线：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="n">Tf&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">H1&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="n">ifftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">X&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">H2&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="n">ifftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">X&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ifft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Y1&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ifft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fftshift&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Y2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y2&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;g&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;:r&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="n">Tf&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.1&lt;/span> &lt;span class="mf">1.1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (millisecond)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;u_c&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;u_r&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;u_{in}&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-14.png" alt="signals-and-systems-14.png">&lt;/p>
&lt;h2 id="连续时间信号的时域采样和重建">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#连续时间信号的时域采样和重建" class="anchor-link" aria-label="连续时间信号的时域采样和重建">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:连续时间信号的时域采样和重建" class="headings">连续时间信号的时域采样和重建&lt;/a>&lt;/h2>
&lt;p>在数字信号处理系统中，通常首先要通过采样和量化过程将模拟信号转换为离散信号（合起来称为模数转换，或 ADC），然后是数字信号处理器对离散信号进行处理，最后要通过重建（或恢复）过程将处理后的离散信号转换为模拟信号（称为数模转换，或 DAC）。&lt;/p>
&lt;p>采样定理：如果信号带宽小于奈奎斯特频率（即采样频率的二分之一），那么采样得到的离散样本值能够完全表示原信号。频率大于等于奈奎斯特频率的信号分量会发生混叠现象，在重建时将会重建成频率低于奈奎斯特频率的信号，因此在实际应用中一般都要求避免混叠。通过采样定理可以得出以下的结论：&lt;/p>
&lt;ol>
&lt;li>如果已知信号的最高频率 $\omega_m$，采样定理给出了保证完全重建信号的最低采样频率 $\omega_s$；&lt;/li>
&lt;li>反之，如果已知采样频率 $\omega_s$，采样定理给出了保证完全重建信号的带限信号的最高频率 $\omega_m$;&lt;/li>
&lt;li>被采样的信号必须是带限的。信号中高于某频率的成分必须为零，或者非常接近于零，这样在重建信号时这些频率成分的影响可忽略不计。&lt;/li>
&lt;/ol>
&lt;p>采样定理是在理想化的条件下得出的，它假设信号是非时限的（因为只有持续时间无限长的信号的频谱才是完全带限的），而在实际应用中绝大多数信号都是时限的。因此采样信号的完全重建只是对理想化的数学模型是可能的，在实际应用中，信号采样、重建得到的一般都是原信号的近似。&lt;/p>
&lt;p>从采样定理可知，如果以超过奈奎斯特率的频率对带限信号进行采样，那么就能从其样本完全重建信号。重建过程可以看成是一个分为两步的过程：首先是将离散时间样本 $x[n]$ 转换为加权冲激串信号：&lt;/p>
&lt;div>
$$
s_p(t)=\sum\limits_{n=-\infty}^{\infty}x[n]\delta(t-nT_s)
$$
&lt;/div>
&lt;p>然后将该冲激串信号输入到一个理想低通滤波器即可完全恢复原信号，理想低通滤波器的带宽限制在 $(-\omega_s/2,\omega_s/2)$，增益为 $2\pi/\omega_s$。根据上述的重建过程，不难得出重建信号 $x_a(t)$ 的内插公式为：&lt;/p>
&lt;div>
$$
x_a(t)=\sum\limits_{n=-\infty}^{\infty}x[n]\mathrm{sinc}\bigg(\frac{1}{T_s}(t-nT_s)\bigg)
$$
&lt;/div>
&lt;p>实际上这种理想低通滤波器和内插通常是不可行的（因为系统是非因果的，且严格来说，只对非时限信号有效）。在实际应用中，我们常用比较低阶的内插来近似地重建信号，如：零阶保持、一阶保持、三次样条。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mf">0.2&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.2&lt;/span> &lt;span class="mf">1.2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">1e-3&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Continuous-time Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Discrete-time Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">stairs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero-order Hold Signal&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">off&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>运行上述代码得到下图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-15.png" alt="signals-and-systems-15.png">&lt;/p>
&lt;p>如图所示，在 MATLAB 中我们可以用零阶保持信号来近似地表示连续信号。 零阶保持和一阶保持的优点是在实际应用中很容易实现。从图中可以看出，采样间隔越小（相应地采样频率越高），所得到的零阶保持近似与原信号就越接近。&lt;/p>
&lt;h3 id="采样信号的时域频域分析">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#采样信号的时域频域分析" class="anchor-link" aria-label="采样信号的时域频域分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:采样信号的时域频域分析" class="headings">采样信号的时域频域分析&lt;/a>&lt;/h3>
&lt;p>已知信号：&lt;/p>
&lt;div>
$$
x(t)=5+3\cos\bigg(400\pi t+\frac{\pi}{4}\bigg)+4\cos\bigg(600\pi t-\frac{\pi}{2}\bigg)
$$
&lt;/div>
&lt;p>作出采样频率分别为 $700Hz$、$600Hz$ 和 $500Hz$ 时，信号采样值的波形及其频谱。&lt;/p>
&lt;p>首先定义两个函数：&lt;/p>
&lt;p>&lt;code>mydft&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>y&lt;span class="p">=&lt;/span>&lt;span class="nf">mydft&lt;/span>&lt;span class="p">(&lt;/span>x,t,f&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;#39;*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>myidft&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="k">function&lt;/span>&lt;span class="w"> &lt;/span>x&lt;span class="p">=&lt;/span>&lt;span class="nf">myidft&lt;/span>&lt;span class="p">(&lt;/span>y, f, t&lt;span class="p">)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">&amp;#39;*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>为了较清楚地显示频谱混叠现象，分别设置采样率为 $700Hz$、$650Hz$、$600Hz$、$550Hz$、$500Hz$ 和 $450Hz$。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Fs&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">700&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">650&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">600&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">550&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">450&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">12000&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.03&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">400&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">600&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">at&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">af&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">900&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">900&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.05&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">1.5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">6&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">):&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">400&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">600&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">mydft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (ms)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;g:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">20&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span> &lt;span class="mi">13&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">hold&lt;/span> &lt;span class="n">off&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">]);&lt;/span> &lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (kHz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-16.png" alt="signals-and-systems-16.png">&lt;/p>
&lt;p>采样得到的离散时间信号的频谱是周期的，周期为采样率 $f_s$，因此如果原信号的最高频率 $f_m\geq f_s/2$，采样得到的信号的频谱将发生混叠。由于信号的最高频率为 $300Hz$，所以图中只有采样率为 $700Hz$ 和 $650Hz$ 时得到的采样信号未发生混叠现象。&lt;/p>
&lt;p>如果设计一个增益为 $1$、截止频率为采样频率的一半的理想低通滤波器，近似地求出当采样频率为 $1kHz$ 时，采样得到的零阶保持信号经过该理想低通滤波器后的输出。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Fs&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10000&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">):&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">):&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Sampled signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">400&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">800&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Over-sampled signal representing the continous-time signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">400&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">800&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% &amp;#39;Continous-time&amp;#39; zero order hold signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xzoh&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xzoh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,:)=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xzoh&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">xzoh&lt;/span>&lt;span class="p">(:)&lt;/span>&lt;span class="o">&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Fourier transform of the &amp;#39;continous-time&amp;#39; signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yc&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">mydft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Fourier transform of the sampled signal &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">mydft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Fourier transform of the zero order hold signal &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">yzoh&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">mydft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xzoh&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Low-pass filtering&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylpf&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">yzoh&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Inverse Fourier transform the low-pass filtered signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlpf&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">myidft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ylpf&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% The plottings&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">at&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span> &lt;span class="mi">30&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">af&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">900&lt;/span> &lt;span class="mi">900&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.05&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">421&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">at&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Continous-time Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">423&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">stem&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">at&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Sampled Discrete-time Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">425&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xzoh&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">at&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero Order Hold Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">422&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">yc&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">af&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">424&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">af&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">426&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">yzoh&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">af&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">428&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ylpf&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">af&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (Hz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">427&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xlpf&lt;/span>&lt;span class="p">));&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">at&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (ms)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Low-pass filtered Signal&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-17.png" alt="signals-and-systems-17.png">&lt;/p>
&lt;p>从图中可以看出，采样得到的零阶保持信号虽然在时域上波形与原始信号有较大的差别，但经低通滤波器滤除高次谐波后，更接近于原信号。&lt;/p>
&lt;h3 id="采样信号的时域重建">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#采样信号的时域重建" class="anchor-link" aria-label="采样信号的时域重建">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:采样信号的时域重建" class="headings">采样信号的时域重建&lt;/a>&lt;/h3>
&lt;p>已知时限信号：&lt;/p>
&lt;div>
$$
x(t)=\sin(20\pi t+\pi/4),\quad 0\leq t\leq 1
$$
&lt;/div>
&lt;p>用采样频率 $f_s=20Hz$ 对信号进行采样得到离散时间信号 $x[n]$。画出 $x[n]$ 用以下不同重建方式得到的模拟信号并叠加在原信号上进行比较：&lt;/p>
&lt;ol>
&lt;li>零阶保持；&lt;/li>
&lt;li>一阶保持；&lt;/li>
&lt;li>三次样条内插；&lt;/li>
&lt;li>$sinc$ 函数内插。&lt;/li>
&lt;/ol>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Fs&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">):&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">):&lt;/span>&lt;span class="mf">2.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Sampled signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Over-sampled signal representing the continous-time signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xc&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Zero order hold signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xzoh&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">l&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">ceil&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xzoh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">l&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">%First order hold signal&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xfoh&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">l&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">ceil&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">l&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xfoh&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">l&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">l&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Spline interpolation&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xspi&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">spline&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">% Sinc interpolation&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xssi&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sinc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">&amp;#39;*&lt;/span>&lt;span class="nb">ones&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">size&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">)))));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ax&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">1.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">1.2&lt;/span> &lt;span class="mf">1.2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xzoh&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Zero Order Hold&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xfoh&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Linear&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xspi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Spline&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xssi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">xc&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r:&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">axis&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ax&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Sinc&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (s)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-18.png" alt="signals-and-systems-18.png">&lt;/p>
&lt;h2 id="连续时间信号和系统的复频域分析">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#连续时间信号和系统的复频域分析" class="anchor-link" aria-label="连续时间信号和系统的复频域分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:连续时间信号和系统的复频域分析" class="headings">连续时间信号和系统的复频域分析&lt;/a>&lt;/h2>
&lt;p>已知单边信号：&lt;/p>
&lt;div>
$$
x(t)=e^{-3t}\cos(2t+\pi/3)u(t)
$$
&lt;/div>
&lt;p>计算其拉普拉斯变换的解析式。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">syms&lt;/span> &lt;span class="n">t&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Xs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">laplace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xt&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pretty&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Xs&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到其拉普拉斯变换为：&lt;/p>
&lt;div>
$$
X(s)=\frac{\frac{1}{2}(s+3)-\sqrt{3}}{(s+3)^2+4}
$$
&lt;/div>
&lt;p>求：&lt;/p>
&lt;div>
$$
X(s)=\frac{4s^3-6s^2-3s+4}{s^4-4s^3+5s^2-2s},\quad Re\{s\}>0
$$
&lt;/div>
&lt;p>的拉普拉斯反变换。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">syms&lt;/span> &lt;span class="n">t&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Xs&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>^&lt;span class="mi">3&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>^&lt;span class="mi">4&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>^&lt;span class="mi">3&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ilaplace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Xs&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pretty&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">xt&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到其拉普拉斯反变换为：&lt;/p>
&lt;div>
$$
x(t)=(3e^{2t}+3e^t+te^t-2)u(t)
$$
&lt;/div>
&lt;p>已知两个因果 LTI 系统的系统函数为：&lt;/p>
&lt;div>
$$
H(s)=\frac{2s+1}{s^3+(3/2)s^2+(13/16)s+(5/16)}
$$
&lt;/div>
&lt;p>和&lt;/p>
&lt;div>
$$
G(s)=\frac{s(2s+1)}{s^3+(3/2)s^2+(13/16)s+(5/16)}
$$
&lt;/div>
&lt;p>分别对系统函数进行部分分式展开，求出系统的单位冲激响应 $h(t)$ 和 $g(t)$，作出其时域波形。&lt;/p>
&lt;p>与上一问题类似，通过符号运算工具箱和 &lt;code>ilaplace&lt;/code> 函数可得：&lt;/p>
&lt;div>
$$
h(t)=\bigg(-\frac{16}{13}e^{-t}+\frac{16}{13}e^{-\frac{t}{4}}\cos\bigg(\frac{t}{2}\bigg)+\frac{28}{13}e^{-\frac{t}{4}}\sin\bigg(\frac{t}{2}\bigg)\bigg)u(t)
$$
&lt;/div>
&lt;p>和&lt;/p>
&lt;div>
$$
g(t)=\bigg(\frac{16}{13}e^{-t}+\frac{10}{13}e^{-\frac{t}{4}}\cos\bigg(\frac{t}{2}\bigg)-\frac{15}{13}e^{-\frac{t}{4}}\sin\bigg(\frac{t}{2}\bigg)\bigg)u(t)
$$
&lt;/div>
&lt;p>通过程序：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">b0&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">b1&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">13&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">16&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sys0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">tf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">sys1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">tf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.01&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">impulse&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ht&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">28&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ht&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;h(t)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">impulse&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">gt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">gt&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;g(t)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到下图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-19.png" alt="signals-and-systems-19.png">&lt;/p>
&lt;p>图中左边为直接用 &lt;code>impulse&lt;/code> 函数得到的结果，右边为拉普拉斯反变换得到 $h(t)$ 和 $g(t)$，两者相同。由于 $G(s)=sH(s)$，所以 $h(t)$ 和 $g(t)$ 有：&lt;/p>
&lt;div>
$$
g(t)=\frac{d}{dt}h(t)
$$
&lt;/div>
&lt;p>作出系统的零、极点分布图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">121&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pzmap&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">122&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pzmap&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sys1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-20.png" alt="signals-and-systems-20.png">&lt;/p>
&lt;p>由于这两个因果系统的极点均分布在 $S$ 平面的左半平面（即所有极点的实部均小于零），因此系统是稳定的。&lt;/p>
&lt;h2 id="离散时间信号和系统的-z-域分析">&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#离散时间信号和系统的-z-域分析" class="anchor-link" aria-label="离散时间信号和系统的-z-域分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/#contents:离散时间信号和系统的-z-域分析" class="headings">离散时间信号和系统的 Z 域分析&lt;/a>&lt;/h2>
&lt;p>求出以下序列的 Z 变换：&lt;/p>
&lt;ol>
&lt;li>$x[n]=a^n\cos(n\pi/2)u[n]$&lt;/li>
&lt;li>$x[n]=n(n-1)/2u[n]$&lt;/li>
&lt;/ol>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">syms&lt;/span> &lt;span class="n">a&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">a&lt;/span>^&lt;span class="n">n&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X0&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">simple&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x0&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X1&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">simple&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x1&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pretty&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">X0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pretty&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">X1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>求得 Z 变换为：&lt;/p>
&lt;div>
$$
\begin{aligned}
x(z)&amp;=\frac{z^2}{a^2+z^2}\\
x(z)&amp;=\frac{z}{(z-1)^3}
\end{aligned}
$$
&lt;/div>
&lt;p>用 Z 域分析法求出以下离散时间 LTI 系统的零状态响应。&lt;/p>
&lt;ol>
&lt;li>系统单位脉冲响应为 $h[n]=(\frac{1}{3}(-1)^n+\frac{2}{3}3^n)u[n]$，输出信号为 $x[n]=(-1)^nu[n]$；&lt;/li>
&lt;li>系统函数为 $H(z)=\frac{z(7z-2)}{(z-0.2)(z-0.5)}$，输入信号为 $x[n]=\cos(\frac{n\pi}{2})u[n]$。&lt;/li>
&lt;/ol>
&lt;p>通过：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">syms&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">h&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="n">n&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">3&lt;/span>^&lt;span class="n">n&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">H&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">X&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">H&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">X&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">simple&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">iztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Y&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可得系统的零状态响应为：&lt;/p>
&lt;div>
$$
y[n]=\bigg(\frac{1}{3}(-1)^nn+\frac{1}{2}(-1)^n+\frac{1}{2}3^n\bigg)u[n]
$$
&lt;/div>
&lt;p>通过：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">syms&lt;/span> &lt;span class="n">n&lt;/span> &lt;span class="n">z&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">H&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">X&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">ztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">H&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">X&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">simple&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">iztrans&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Y&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pretty&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到：&lt;/p>
&lt;div>
$$
\begin{aligned}
&amp;y[n]=\\
&amp;\bigg(\bigg(\frac{1}{2}\bigg)^n+\frac{1}{13}\bigg(\frac{1}{5}\bigg)^n+j^n\bigg(\frac{77}{26}-j\frac{31}{26}\bigg)+(-j)^n\bigg(\frac{77}{26}+j\frac{31}{26}\bigg)\bigg)u[n]
\end{aligned}
$$
&lt;/div>
&lt;p>用欧拉公式可化简为：&lt;/p>
&lt;div>
$$
y[n]=\bigg(\bigg(\frac{1}{2}\bigg)^n+\frac{1}{13}\bigg(\frac{1}{5}\bigg)^n+\frac{77}{13}\cos\bigg(\frac{n\pi}{2}\bigg)-\frac{31}{13}\sin\bigg(\frac{n\pi}{2}\bigg)\bigg)u[n]
$$
&lt;/div>
&lt;p>读取计算机中的系统提示音文件 &lt;code>Windows Logon.wav&lt;/code>（文件位置：&lt;code>C:\Windows\Media\&lt;/code>），作出声音的时域波形和频谱。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">xi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">audioread&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Windows Logon.wav&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">xi&lt;/span>&lt;span class="p">(:,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">fft&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Time (seconds)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">floor&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">floor&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Frequency (KHz)&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">2&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">0.02&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/signals-and-systems-21.png" alt="signals-and-systems-21.png">&lt;span class="caption">※ 系统音频的时域波形和频谱图&lt;/span>&lt;/p>
&lt;p>让声音通过一滤波器，传递函数为：&lt;/p>
&lt;div>
$$
H(z)=1+az^{-D}+a^2z^{-2D}+a^3z^{-3D}
$$
&lt;/div>
&lt;p>其中 $D$ 的值为采样率的 $0.2$ 倍，$a=0.2$，改变参数值，可观察到不同的回声效果。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">D&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">floor&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">z&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">zt&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">z&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">zt&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">z&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">zt&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">D&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">z&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">zt&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">audiowrite&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;output.wav&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Fs&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/signal-processing-based-on-matlab/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/signal-processing-based-on-matlab/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/matlab/">MATLAB</category></item><item><title>
MATLAB 光学仿真入门</title><link>https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/</guid><pubDate>Sun, 19 Jan 2020 12:29:36 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="光的电磁理论基础">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#光的电磁理论基础" class="anchor-link" aria-label="光的电磁理论基础">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:光的电磁理论基础" class="headings">光的电磁理论基础&lt;/a>&lt;/h2>
&lt;h3 id="光波由光疏介质进入光密介质">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#光波由光疏介质进入光密介质" class="anchor-link" aria-label="光波由光疏介质进入光密介质">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:光波由光疏介质进入光密介质" class="headings">光波由光疏介质进入光密介质&lt;/a>&lt;/h3>
&lt;p>分析光波由光疏介质进入光密介质时反射率和透射率的变化。光疏介质空气 $n_1=1$，光密介质石英玻璃 $n_2=1.45$，作出 $p$、$s$ 分量的振幅反射率和振幅透射率以及他们的绝对值随入射角度的变化曲线。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">n1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.45&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">theta&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rp&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rs&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rs&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rp&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;:&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rs&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;-.&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;r_p&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r_s&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;|r_p|&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;|r_s|&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">tp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ts&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tp&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;:&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ts&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;-.&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;t_p&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;t_s&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;|t_p|&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;|t_s|&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-0.png" alt="simulation-of-optics-0.png">&lt;/p>
&lt;p>由图可知：&lt;/p>
&lt;ol>
&lt;li>当入射角 $\theta_i=0$，即垂直入射时，$r_p$、$r_s$ 和 $t_p$、$t_s$ 都不为 $0$，表示存在反射波和折射波。&lt;/li>
&lt;li>当入射角 $\theta_i=90$，即掠入射时，$r_p=r_s=-1$，$t_p=t_s=0$，即没有折射光波。&lt;/li>
&lt;li>$t_p$、$t_s$ 随 $\theta_i$ 的增大而减小，$|r_s|$ 随 $\theta_i$ 的增大而增大，直到等于 $1$。&lt;/li>
&lt;li>$|r_p|$ 先随 $\theta_i$ 的增大而减小，到达一特定的值 $\theta_B$ 时，有 $|r_p|=0$，即反射波中此时没有 $p$ 分量，只有 $s$ 分量，产生全偏振现象，然后随着 $\theta_i$ 的增大，$|r_p|$ 不断增大，直到等于 $1$。&lt;/li>
&lt;/ol>
&lt;p>作出 $p$、$s$ 分量的能流反射率和能流透射率以及他们的平均值随入射角度的变化曲线。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">n1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.45&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">theta&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rp&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rs&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Rp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rp&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Rs&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rs&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Rn&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">Rp&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">Rs&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Tp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tp&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ts&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Tn&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">Tp&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Rp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Rs&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-.&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Rn&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;R_p&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;R_s&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;R_n&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Tp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Ts&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-.&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Tn&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;T_p&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;T_s&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;T_n&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Amplitude&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-1.png" alt="simulation-of-optics-1.png">&lt;/p>
&lt;p>由图可知：&lt;/p>
&lt;ol>
&lt;li>当入射角 $\theta_i=0$ 时，垂直入射时能流反射率 $R_p$、$R_s$ 和 $T_p$、$T_s$ 都不为 $0$，此时存在反射光波。&lt;/li>
&lt;li>随着 $\theta_i$ 的增大，$R_s$ 不断增大至 $1$，$T_s$ 不断减小至 $0$，但始终有 $R_s+T_s=1$。&lt;/li>
&lt;li>随着 $\theta_i$ 的增大，$R_p$ 先减小，直至一特定的值 $\theta_B$ 时变为 $0$，而后随着 $\theta_i$ 的增大不断增大到 $1$。$T_p$ 的过程正好相反，在入射角为 $\theta_B$ 时为 $1$，且始终有 $R_p+T_p=1$。&lt;/li>
&lt;/ol>
&lt;h3 id="光波由光密介质进入光疏介质">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#光波由光密介质进入光疏介质" class="anchor-link" aria-label="光波由光密介质进入光疏介质">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:光波由光密介质进入光疏介质" class="headings">光波由光密介质进入光疏介质&lt;/a>&lt;/h3>
&lt;p>分析光波由光密介质进入光疏介质时反射率和透射率的变化。光疏介质空气 $n_1=1$，光密介质石英玻璃 $n_2=1.45$，作出 $p$、$s$ 分量的振幅反射率和振幅透射率以及他们的绝对值随入射角度的变化曲线。&lt;/p>
&lt;p>与上述过程相同，只需要将折射率互换。此处的光波变化分析略去。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-2.png" alt="simulation-of-optics-2.png">&lt;/p>
&lt;p>在图中，$\theta_i&amp;gt;\theta_c$ 后，$|r_p|$ 和 $r_p$ 以及 $|r_s|$ 和 $r_s$ 产生了很大的差异。因为 $n_1&amp;gt;n_2$， 如果 $\sin\theta_i&amp;gt;n_2/n_1$ 则 $1-(n_1/n_2)^2\sin^2\theta_1&amp;lt;0$，计算得到的 $r_p$ 和 $r_s$ 将变为复数。但作图时只取了实部。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="o">&amp;#39;&lt;/span> &lt;span class="n">rp&lt;/span>&lt;span class="o">&amp;#39;&lt;/span> &lt;span class="n">rs&lt;/span>&lt;span class="o">&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">ans&lt;/span> &lt;span class="p">=&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.1000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.2000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.3000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.4000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">0.5000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.1837&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">......&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.5449&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.7542&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.1000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.5754&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.7727&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.2000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.6108&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.7938&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.3000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.6531&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.8185&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.4000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.7064&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.8487&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.5000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.7814&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.8897&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.6000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9601&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9808&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.7000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9717&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.2360&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9935&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.1135&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.8000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9433&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.3319&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9869&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.1614&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">43.9000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9155&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.4023&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9802&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.1978&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">44.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.8883&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.4593&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="mf">0.9736&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.2283&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c">......&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">89.5000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.9999&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0115&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.9997&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0241&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">89.6000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0092&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.9998&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0193&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">89.7000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0069&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">0.9999&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0145&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">89.8000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0046&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0096&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">89.9000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0023&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0048&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mf">90.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">1.0000&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mf">0.0000&lt;/span>&lt;span class="nb">i&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>光波从光密介质入射光疏介质在一定角度会发生全反射现象，将上述程序代码中的折射率互换即可得到下图。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-3.png" alt="simulation-of-optics-3.png">&lt;/p>
&lt;p>平面光波从石英玻璃入射到空气，空气 $n_1=1$，石英玻璃 $n_2=1.45$，作出 $p$、$s$ 分量的反射波相位和透射波相位随入射角度的变化曲线。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">n1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">n2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.45&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">theta&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">a&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rp&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rs&lt;/span>&lt;span class="p">=(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">tp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ts&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">cos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sin&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">arp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ars&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">rs&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">atp&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">tp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ats&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">angle&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ts&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">arp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ars&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;arg(r_p)&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;arg(r_s)&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\phi&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">3.5&lt;/span> &lt;span class="mf">3.5&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">subplot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">atp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ats&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;--&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LineWidth&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">legend&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;arg(t_p)&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;arg(t_s)&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\theta_i&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;\phi&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s">&amp;#39;n_1=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n1&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="s">&amp;#39;,n_2=&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n2&lt;/span>&lt;span class="p">)])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">90&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mf">3.5&lt;/span> &lt;span class="mf">3.5&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-4.png" alt="simulation-of-optics-4.png">&lt;/p>
&lt;h2 id="高斯光束">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#高斯光束" class="anchor-link" aria-label="高斯光束">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:高斯光束" class="headings">高斯光束&lt;/a>&lt;/h2>
&lt;h3 id="高斯光束的基本性质">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#高斯光束的基本性质" class="anchor-link" aria-label="高斯光束的基本性质">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:高斯光束的基本性质" class="headings">高斯光束的基本性质&lt;/a>&lt;/h3>
&lt;p>作出束腰半径为 $0.5mm$ 的高斯光束在束腰处的三维光强分布图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">r&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">eta&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">rho&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="nb">meshgrid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">eta&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="nb">pol2cart&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">theta&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rho&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">rho&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">surf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">I&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">shading&lt;/span> &lt;span class="n">interp&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;position /mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;position /mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;relative intensity /a.u.&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Causs intensity distribution&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colorbar&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-5.png" alt="simulation-of-optics-5.png">&lt;span class="caption">※ 高斯光束的三维光强分布&lt;/span>&lt;/p>
&lt;p>作出束腰半径为 $0.5mm$ 的高斯光束在束腰处的二维光强分布图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">Npoint&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">501&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">x&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Npoint&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Npoint&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">X&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">meshgrid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">meshgrid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">Y&lt;/span>&lt;span class="o">&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">R&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">X&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">Y&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">I&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">R&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imagesc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">I&lt;/span>&lt;span class="p">,[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colormap&lt;/span> &lt;span class="n">gray&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colorbar&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;x /mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;y /mm&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Gauss intensity distribution&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-6.png" alt="simulation-of-optics-6.png">&lt;span class="caption">※ 高斯光束的二维光强分布&lt;/span>&lt;/p>
&lt;h3 id="高斯光束的复参数表示">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#高斯光束的复参数表示" class="anchor-link" aria-label="高斯光束的复参数表示">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:高斯光束的复参数表示" class="headings">高斯光束的复参数表示&lt;/a>&lt;/h3>
&lt;p>作出束腰为 $0.5mm$，波长为 $1.55\mu m$ 的高斯光束在 $3$ 倍瑞利长度范围内传播过程中的振幅变化图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">w0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.5e-3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">lambda&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.55e-6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ZR&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Lz&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">ZR&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">z&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">Lz&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Lz&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">y&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">py&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">pz&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="nb">meshgrid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">wz&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">pz&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Iopt&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">wz&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">py&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">wz&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imagesc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Iopt&lt;/span>&lt;span class="o">&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;z /mm&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;y /mm&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">title&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Intensity of Gauss beam propagation&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colorbar&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colormap&lt;/span> &lt;span class="n">hot&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-7.png" alt="simulation-of-optics-7.png">&lt;span class="caption">※ 高斯光束在自由空间传播过程的光强分布&lt;/span>&lt;/p>
&lt;p>作出束腰半径为 $2\mu m$，波长为 $1.5\mu m$ 的高斯光束在自由空间传播过程中其束腰附近某一时刻的电场分量的归一化空间分布。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">lambda&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.5e-6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">2e-6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Ld&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Rd&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">N&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">401&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">zd&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">Ld&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Ld&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">rd&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">linspace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">Rd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">Rd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">N&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">z&lt;/span> &lt;span class="n">r&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="nb">meshgrid&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rd&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">k0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">invq0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">q0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">invq0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">q&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">q0&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">invw2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">imag&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">invw2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">R&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">1.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">phi&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">atan&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">lambda&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w0&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">E&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k0&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">R&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">phi&lt;/span>&lt;span class="p">)));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">E&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="p">))));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">scrsz&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;ScreenSize&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">figure&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;Position&amp;#39;&lt;/span>&lt;span class="p">,[&lt;/span>&lt;span class="n">scrsz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span> &lt;span class="n">scrsz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">4&lt;/span> &lt;span class="n">scrsz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="n">scrsz&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imagesc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">colorbar&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;r&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-8.png" alt="simulation-of-optics-8.png">&lt;span class="caption">※ 高斯光束在自由空间传播过程的电场分量实部的归一化分布&lt;/span>&lt;/p>
&lt;p>将上述代码的第 21 行改为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">imagesc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="p">)))&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>得到高斯光束在自由空间传播过程中的电场分量实部绝对值的归一化分布。该图更多地被用来展示高斯光束的电场分布形式。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-9.png" alt="simulation-of-optics-9.png">&lt;span class="caption">※ 高斯光束在自由空间传播过程的电场分量实部绝对值的归一化分布&lt;/span>&lt;/p>
&lt;p>在上述代码的基础上，运行下面的程序，得到高斯光束咋自由空间传播的过程中电场分量的变化。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">numFrames&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">25&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">numFrames&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">E&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">w0&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.*&lt;/span>&lt;span class="nb">exp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k0&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">R&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">phi&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">pi&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">25&lt;/span>&lt;span class="p">)));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">E&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="p">))));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">imagesc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">rd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">real&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">E&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">hold&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,:),&lt;/span>&lt;span class="s">&amp;#39;r&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">zd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,:),&lt;/span>&lt;span class="s">&amp;#39;r&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">mov&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">getframe&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">VideoWriter&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;GaussianBeam.avi&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">animated&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">numFrames&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="n">numFrames&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[&lt;/span>&lt;span class="n">animated&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">cmap&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">rgb2ind&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">mov&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="n">cdata&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">256&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;nodither&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">animated&lt;/span>&lt;span class="p">(:,:,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">rgb2ind&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">mov&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="n">cdata&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">cmap&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;nodither&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">filename&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#39;GaussianBeam.gif&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">imwrite&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">animated&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">cmap&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;DelayTime&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;LoopCount&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">inf&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">web&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-gaussian-beam.gif" alt="simulation-of-optics-gaussian-beam.gif">&lt;span class="caption">※ 高斯光束在自由空间传播过程中的电场分量变化&lt;/span>&lt;/p>
&lt;h3 id="高斯光束通过复杂光学系统的变换">&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#高斯光束通过复杂光学系统的变换" class="anchor-link" aria-label="高斯光束通过复杂光学系统的变换">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/#contents:高斯光束通过复杂光学系统的变换" class="headings">高斯光束通过复杂光学系统的变换&lt;/a>&lt;/h3>
&lt;p>高斯光束通过薄透镜时，传播矩阵为：&lt;/p>
&lt;div>
$$
M=
\begin{bmatrix}
1&amp;0\\
-1/f&amp;1
\end{bmatrix}
$$
&lt;/div>
&lt;p>成像公式为：&lt;/p>
&lt;div>
$$
\frac{1}{s_i}=\frac{1}{f}-\frac{1}{s_0}\frac{1}{1+Z_{01}^2/s_0(s_0-f)}
$$
&lt;/div>
&lt;p>物像比例公式为：&lt;/p>
&lt;div>
$$
w_i=\frac{fw_0}{[(s_0-f)^2+Z_{01}^2]^{1/2}}
$$
&lt;/div>
&lt;p>作出高斯光束在通过薄透镜变换时，取不同的归一化参数 $Z_{01}/f$ $(0,0.2,0.4,0.5,1,5)$ 的情况下，归一化物距参数 $s_0/f$ 随归一化相距参数 $s_i/f$ 的变化曲线。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Z0&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mf">0.2&lt;/span> &lt;span class="mf">0.4&lt;/span> &lt;span class="mf">0.5&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.01&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s1&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s2&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z0&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s2&lt;/span>&lt;span class="p">(:,&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="n">f&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">f&lt;/span>^&lt;span class="mf">2.&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="p">[(&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">s1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">Z0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s1&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">s2&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span> &lt;span class="n">square&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;s_0/f&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;s_i/f&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">2.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;z_{01}/f&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">3.8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;0&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">val&lt;/span> &lt;span class="n">pos&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">val&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-10.png" alt="simulation-of-optics-10.png">&lt;span class="caption">※ 归一化像距和归一化物距的关系曲线&lt;/span>&lt;/p>
&lt;p>当 $(s_0-f)^2\gg Z_{01}^2$，$Z_{01}\rightarrow 0$时，成像公式过渡为几何光学中薄透镜的成像公式：&lt;/p>
&lt;div>
$$
\frac{1}{s_i}+\frac{1}{s_0}=\frac{1}{f}
$$
&lt;/div>
&lt;p>作出物像比例 $w_i/w_0$ 和归一化物距 $s_0/f$ 的关系曲线。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-matlab" data-lang="matlab">&lt;span class="line">&lt;span class="cl">&lt;span class="n">clear&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mf">0.1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">Z01&lt;/span>&lt;span class="p">=[&lt;/span>&lt;span class="mi">0&lt;/span> &lt;span class="mf">0.2&lt;/span> &lt;span class="mf">0.4&lt;/span> &lt;span class="mf">0.5&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="mi">2&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">t&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mf">0.01&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">w1w0&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="nb">zeros&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z01&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z01&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">w1w0&lt;/span>&lt;span class="p">(:,&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)=&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="o">./&lt;/span>&lt;span class="nb">sqrt&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">s0&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="n">Z01&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span>^&lt;span class="mi">2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">plot&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s0&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">w1w0&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="mi">4&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">grid&lt;/span> &lt;span class="n">on&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">axis&lt;/span> &lt;span class="n">square&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">xlabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;s_0/f&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">ylabel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#39;w_1/w_0&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">3.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;Z_{01}/f&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">5.5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#39;0&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[&lt;/span>&lt;span class="n">val&lt;/span> &lt;span class="n">pos&lt;/span>&lt;span class="p">]=&lt;/span>&lt;span class="n">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w1w0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="nb">i&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nb">length&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z01&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">text&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">pos&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)),&lt;/span>&lt;span class="n">val&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">num2str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">Z01&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">i&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="n">f&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">end&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/simulation-of-optics-11.png" alt="simulation-of-optics-11.png">&lt;span class="caption">※ 物像比例和归一化物距的关系曲线&lt;/span>&lt;/p>
&lt;p>当 $(s_0-f)^2\gg Z_{01}^2$，$Z_{01}\rightarrow 0$时，物像比例与几何光学相同，有：&lt;/p>
&lt;div>
$$
w_i=\frac{fw_0}{s_0-f}=\frac{sw_0}{s_0}
$$
&lt;/div>
&lt;p>像方瑞利长度 $Z_{02}$ 为：&lt;/p>
&lt;div>
$$
Z_{02}=\frac{\pi w_i^2}{\lambda}=\frac{f^2Z_{01}}{Z_{01}^2+(s_0-f)^2}
$$
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/simulation-of-optics-based-on-matlab/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/tags/electromagnetic-wave/">电磁波</category><category domain="https://guanqr.com/tags/matlab/">MATLAB</category><category domain="https://guanqr.com/tags/photonics/">光电子学</category></item><item><title>
微信小程序课程后记</title><link>https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/</guid><pubDate>Sat, 18 Jan 2020 19:52:44 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app.png" alt="wechat-mini-app.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">据&lt;/span>说微信小程序的开发是计算机学院暑假短学期的一门课程，因为我并非计算机专业的学生，所以无法选修该门课程。不过在 2019 年秋冬学期的选课中，我竟发现计算机学院开设了一门名叫「微信小程序开发实践」的通识课程。这门课程的上课地点在紫金港，虽然我已搬到玉泉，不过既然有这样一门开发微信小程序的课程，为何不抓住这一机会呢？在几乎十比一的选中概率下，我这样一个「选课非酋」居然幸运地选上了这门课程。&lt;/p>
&lt;h2 id="课程介绍">&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/#课程介绍" class="anchor-link" aria-label="课程介绍">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>课程介绍&lt;/h2>
&lt;p>首先需要说明的一点是，这门课程虽然属于学校的通识选修课程，面向对象也是全校各专业的学生，但是对于非工科类学生以及大一新生等没有学过编程的学生极不友好。不过我看在 2020 年的选课系统中并没有这门课程，想必是因为上述原因外加授课教师时间不充足导致课程停开。&lt;/p>
&lt;p>由于这门课程是横跨秋冬两个学期的课程，在教学安排上面，秋学期主要讲解网页设计前端的基础（HTML，CSS，JavaScript），冬学期则是使用微信小程序的开发工具进行小程序的开发，总共分为六次实验，最后的考核是三人一组完成一个大作业项目。我对这门课程并不是很满意，原因如下：&lt;/p>
&lt;ol>
&lt;li>选课的时候，在课程介绍上，我看到这门课程会讲一些后端开发的内容，但实际上并没有怎么涉及到。&lt;/li>
&lt;li>授课教师是计算机学院一位学生评分很高的教授，但是他对讲授这门课的态度不太认真。课堂上有一半的时间都是让助教上台讲课，自己下台休息。&lt;/li>
&lt;li>前端基础知识的讲解耗费了很长时间，教师并没有对当天课程的授课内容进行合理规划，完全是想到哪里讲哪里，对知识点没有进行系统性地讲解。&lt;/li>
&lt;li>课程的重点应该是小程序的开发，但是在冬学期时，对小程序开发的讲解只花费了一节课的时间，剩下的时间全部是让学生依照实验指导书进行上机实验，对于小程序开发的很多问题都得不到解决。&lt;/li>
&lt;li>六次实验已经耗费了很多精力，最后仍需要三人一组完成一个项目设计并进行答辩，不符合通识课程的定位。以至于在期末复习阶段，在复习专业课程知识的同时，还需要操该门课程的任务。&lt;/li>
&lt;li>和我同一组的组员缺少上进心，全程划水，我作为组长分配给每个人的任务，上交的时候只能完成目标的三分之一。我要求每个人完成一个页面的设计，数据单独存放，页面内的元素单独构成组件（component），使用 JavaScript 对数据进行传递，但这些工作都是由我一人完成的，他们均以不会为由偷工减料。&lt;/li>
&lt;/ol>
&lt;p>我对于这门课程的分数高低并不太关心，早已修够了通识课程的学分，选这一门课程只是为了对前端知识进行巩固和学习如何开发小程序。我们制作的小程序只能处于全班的中下等水平。因为别的组三个人都能为了自己的项目呕心沥血，但我们组的成员毫不放在心上，完全依靠我一个人。但恰好我正是那个没有时间肝项目的人，毕竟在这段时间里，我一直在为 SRTP 发愁。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-toolbox.png" alt="wechat-mini-app-toolbox.png">&lt;span class="caption">※ 利用假期时间开发的小程序&lt;/span>&lt;/p>
&lt;p>由于我们组设计的程序我很不满意，所以就不展示出来献丑了。放假回到家后，我再次回顾了这门课程的学习过程。在课堂展示上，我很欣赏一个小组的设计，他们组设计的是一个工具箱，具备亲戚关系的计算、BMI 的计算、家庭记账等功能。我利用两天的时间将这个工具箱复刻了出来，我将完整的程序放在了 GitHub 的仓库中。&lt;/p>
&lt;div class="github">
&lt;div class="logo">
&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 16 16">&lt;path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/>&lt;/svg>
&lt;a class="name" href=https://github.com/guanqr/WeApp-Toolbox target="_blank">WeApp-Toolbox&lt;/a>
&lt;/div>
&lt;div class="description">WeChat MiniApp: Toolbox. 微信小程序：一个健康管理主题的生活工具箱。&lt;/div>
&lt;div class="language">
&lt;span class="language-color" style="background-color: #f1e05a">&lt;/span>
&lt;span class="language-name">JavaScript&lt;/span>
&lt;/div>
&lt;/div>
&lt;h2 id="程序设计">&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/#程序设计" class="anchor-link" aria-label="程序设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>程序设计&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-page-0.png" alt="wechat-mini-app-page-3.png">&lt;span class="caption">※ 生活工具箱&lt;/span>&lt;/p>
&lt;p>目前「生活工具箱」实现了「亲戚计算器」、「BMI 计算器」、「家庭记账本」这三个功能。其实在 GitHub 上有很多相关的程序，一些函数直接搬运现成的就能使用，节省了许多时间。&lt;/p>
&lt;h3 id="亲戚计算器">&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/#亲戚计算器" class="anchor-link" aria-label="亲戚计算器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>亲戚计算器&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-page-1.png" alt="wechat-mini-app-page-4.png">&lt;span class="caption">※ 亲戚计算器&lt;/span>&lt;/p>
&lt;p>亲戚计算器的核心就是能够区分人与人之间的关系，这里我使用的是 mumuy 写的 &lt;a href="https://github.com/mumuy/relationship/blob/master/dist/relationship.js" target="_blank" rel="noopener">Javascript 库&lt;/a>。首先需要用户确认自己的性别，不同性别对亲戚的称谓也不同。然后再进行按键按下的方法处理，核心函数如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;span class="lnt">136
&lt;/span>&lt;span class="lnt">137
&lt;/span>&lt;span class="lnt">138
&lt;/span>&lt;span class="lnt">139
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// pages/relationship-calculator/relationship-calculator.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">relationship&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;../../datas/relationship.js&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 页面的初始数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">second_height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="c1">// 第二部分的高度
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">screenData&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;我&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">result&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id1&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;丈夫&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id2&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;妻子&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id3&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;back&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id4&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;clean&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id5&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;爸爸&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id6&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;妈妈&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id7&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;哥哥&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id8&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;弟弟&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id9&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;姐姐&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id10&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;妹妹&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id11&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;儿子&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id12&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;女儿&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">id13&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;each&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">isTrue&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wantHelp&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 点击开关男|女
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">switchChange&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 通过判断 true or false
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">detail&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">value&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// true时为女
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">// 设置数据为选中
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 设置数据为选中
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 点击按钮事件
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">clickButton&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">event&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 获取屏幕内容
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">screenData&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">toString&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 获取屏幕结果内容
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">toString&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 获取点击的 id
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">id&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">event&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">target&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">id&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id3&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// 如果是 X 后退则清除两个字符
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">// 如果屏幕只有 我 则不处理
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">data&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s2">&amp;#34;我&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">substring&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 需要重新计算关系
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">relationship&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">reverse&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">id&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id4&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// AC 操作 清空屏幕
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;我&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// 点击其他操作
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kd">var&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">substring&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">relationship&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">reverse&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">id&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id13&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// 互查操作 Ta 称呼我
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">// 如果字数大于 22 个则不要增加 and 提示关系态复杂啦
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="mi">22&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;关系有点远，年长就叫老祖宗吧~&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTrue&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// 一开始为 false
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">relationship&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">reverse&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 设置数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">isTrue&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">relationship&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">reverse&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 设置数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">isTrue&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 修改屏幕结果为 result
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 如果字数大于 22 个则不要增加 and 提示关系态复杂啦
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="mi">22&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;关系有点远，年长就叫老祖宗~\n同龄人就叫帅哥美女吧&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 同性关系处理 当为男性时，一开始点击不做处理
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">((&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nx">id&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id1&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;我&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">||&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nx">id&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id2&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;我&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;的&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">id&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 需要重新计算关系
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">relationship&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">sex&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">sex&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">reverse&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isNull&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="c1">// 结果为空
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">result&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;哎呀，关系太复杂了啊，我算不出来&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataResult&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 设置数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">screenData&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">result&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">dataResult&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 判断结果是否为空，若是则输出关系太复杂了
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">isNull&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wantHelp&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">setTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">showModal&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;温馨提示&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">content&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;请先选择你的性别，使用屏幕下方按键输入亲戚和你之间的关系，屏幕上方即可显示亲戚对你的称谓。点击交换按钮可以查看你对亲戚的称谓。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>relationship-calculator.wxml&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!--pages/relationship-calculator/relationship-calculator.wxml--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;head-view&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> 男&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">switch&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;switchClass&amp;#34;&lt;/span> &lt;span class="na">bindchange&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;switchChange&amp;#34;&lt;/span> &lt;span class="p">/&amp;gt;&lt;/span>女
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;exchange&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id13}}&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/exchange.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;help&amp;#34;&lt;/span> &lt;span class="na">catchtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;wantHelp&amp;#39;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/help.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;body-view&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">textarea&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;textstyle&amp;#34;&lt;/span> &lt;span class="na">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;{{screenData}}&amp;#39;&lt;/span> &lt;span class="na">disabled&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;true&amp;#39;&lt;/span> &lt;span class="na">maxlength&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;34&amp;#34;&lt;/span> &lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;body-view&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">textarea&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;result-style&amp;#34;&lt;/span> &lt;span class="na">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;{{result}}&amp;#39;&lt;/span> &lt;span class="na">disabled&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;true&amp;#39;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text-align:right&amp;#34;&lt;/span> &lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;family&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;family-image&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/family.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;keyboard&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;btnGroup&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id1}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>夫&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id2}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>妻&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id3}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;delate-icon&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id3}}&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/delate.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal-color&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id4}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>AC&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;btnGroup&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id5}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>父&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id6}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>母&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id7}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>兄&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id8}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>弟&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;btnGroup&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id9}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>姐&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id10}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>妹&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id11}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>子&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;item normal&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;clickButton&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{id12}}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>女&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>relationship-calculator.wxss&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* pages/relationship-calculator/relationship-calculator.wxss */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">page&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">head-view&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">wx-switch-input&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#7DB9DE&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#7DB9DE&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/*白色样式（false的样式）*/&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">head-view&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">wx-switch-input&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">before&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/*绿色样式（true的样式）*/&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">head-view&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">wx-switch-input&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">after&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">keyboard&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#e5e5e5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#FFFFFF&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">solid&lt;/span> &lt;span class="mf">0.25&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#c0c0c0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">fixed&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">head-view&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">84&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">solid&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#d9d9d9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#313131&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">gender&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">exchange&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">48&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">48&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">120&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">help&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">48&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">48&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">body-view&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">textstyle&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">120&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#313131&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">36&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">result-style&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">120&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#313131&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">family-image&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">calc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">0.4&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="kt">vw&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="kt">vh&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">btnGroup&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">flex-direction&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">row&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">item&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">187.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">min-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="kt">vh&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">delate-icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">color&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#ebebeb&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">solid&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#d9d9d9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mh">#7DB9DE&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">normal&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#313131&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">solid&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#d9d9d9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">normal-color&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mh">#7DB9DE&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">solid&lt;/span> &lt;span class="mf">0.5&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#d9d9d9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="bmi-计算器">&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/#bmi-计算器" class="anchor-link" aria-label="bmi-计算器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>BMI 计算器&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-page-2.png" alt="wechat-mini-app-page-5.png">&lt;span class="caption">※ BMI 计算器&lt;/span>&lt;/p>
&lt;p>BMI 计算器也是一个很简单的设计，调整好身高和体重的数据就能够计算出你的 BMI 得分和在该身高下正常的体重。因为国内和国际 BMI 标准有一定的区别，在函数中可以做修改。核心函数如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// pages/bmi-calculator/bmi-calculator.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">STANDARD&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">22&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">rules&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[&lt;/span>&lt;span class="mf">18.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">28&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[&lt;/span>&lt;span class="mf">18.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">35&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">[&lt;/span>&lt;span class="mf">18.5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">23&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">ruleConfig&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s1">&amp;#39;偏瘦&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;正常&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;偏胖&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;肥胖&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;重度肥胖&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;极重度肥胖&amp;#39;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 页面的初始数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">bmi&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">170&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">score&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mf">20.8&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">index&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weightStandard&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mf">63.6&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">physicalCondition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;正常&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">changeHeight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">bmi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">height&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">detail&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">value&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">changeWeight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">bmi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">weight&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">detail&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">value&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">calculateBtn&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">calculate&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">weightStandardCalculate&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">physicalConditionCalculate&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">calculate&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">score&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">height&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">bmi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">height&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">weight&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">bmi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">weight&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">score&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">weight&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">height&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="nx">height&lt;/span>&lt;span class="p">)).&lt;/span>&lt;span class="nx">toFixed&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">score&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">score&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weightStandardCalculate&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">weight&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">height&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">bmi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">height&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">STANDARD&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">height&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="nx">height&lt;/span>&lt;span class="p">)).&lt;/span>&lt;span class="nx">toFixed&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weightStandard&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">weight&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//身体状况计算
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">physicalConditionCalculate&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">rule&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">rules&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">score&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">score&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">length&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">rule&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">score&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="nx">rule&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="kd">let&lt;/span> &lt;span class="nx">length&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">rule&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">i&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="nx">i&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="o">--&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">score&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="nx">rule&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> &lt;span class="nx">score&lt;/span> &lt;span class="o">&amp;gt;=&lt;/span> &lt;span class="nx">rule&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">i&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">physicalCondition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ruleConfig&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">value&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>bmi-calculator.wxml&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!--pages/bmi-calculator/bmi-calculator.wxml--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;head&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;bmi&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;bmi-head&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>你的 BMI 值&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;bmi-index&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{score}}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;bmi-description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>BMI，即身体质量指数，是国际上常用的衡量人体肥胖程度和健康程度的重要标准。BMI=体重/身高平方 (kg/㎡)&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;result&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;overview&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>身体状况：{{physicalCondition}}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;overview&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>标准体重：{{weightStandard}}kg&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;height&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;icon&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-icon&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/height.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;data&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-head&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>身高&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-index&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{bmi.height}}cm&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;body-view&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">slider&lt;/span> &lt;span class="na">max&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;220&amp;#34;&lt;/span> &lt;span class="na">min&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;80&amp;#34;&lt;/span> &lt;span class="na">step&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;1&amp;#34;&lt;/span> &lt;span class="na">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{bmi.height}}&amp;#34;&lt;/span> &lt;span class="na">bindchanging&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;changeHeight&amp;#34;&lt;/span> &lt;span class="na">block-color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#7DB9DE&amp;#34;&lt;/span> &lt;span class="na">block-size&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;16&amp;#34;&lt;/span> &lt;span class="na">activeColor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#7DB9DE&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;weight&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;icon&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">image&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-icon&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/images/weight.png&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">image&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;data&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-head&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>体重&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;slider-index&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{bmi.weight}}kg&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;body-view&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">slider&lt;/span> &lt;span class="na">max&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;100&amp;#34;&lt;/span> &lt;span class="na">min&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;10&amp;#34;&lt;/span> &lt;span class="na">step&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;1&amp;#34;&lt;/span> &lt;span class="na">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{bmi.weight}}&amp;#34;&lt;/span> &lt;span class="na">bindchanging&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;changeWeight&amp;#34;&lt;/span> &lt;span class="na">block-color&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#7DB9DE&amp;#34;&lt;/span> &lt;span class="na">block-size&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;16&amp;#34;&lt;/span> &lt;span class="na">activeColor&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#7DB9DE&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">button&lt;/span> &lt;span class="na">hover-class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;btn-hover&amp;#34;&lt;/span> &lt;span class="na">bindtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;calculateBtn&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>计算&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">button&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>bmi-calculator.wxss&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;span class="lnt">84
&lt;/span>&lt;span class="lnt">85
&lt;/span>&lt;span class="lnt">86
&lt;/span>&lt;span class="lnt">87
&lt;/span>&lt;span class="lnt">88
&lt;/span>&lt;span class="lnt">89
&lt;/span>&lt;span class="lnt">90
&lt;/span>&lt;span class="lnt">91
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* pages/bmi-calculator/bmi-calculator.wxss */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">page&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kp">-webkit-&lt;/span>&lt;span class="nb">linear-gradient&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kc">bottom&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kc">white&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">#cef3ff&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">#7DB9DE&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">head&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#eff2f5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">440&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#7da0c0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">bmi&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">bmi-head&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">bmi-index&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">120&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">bmi-description&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-indent&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">result&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">overview&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">26&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">34&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="kc">solid&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">height&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#eff2f5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">210&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#7da0c0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weight&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#eff2f5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">210&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">37.5&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">align-items&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mh">#7da0c0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">slider-description&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-24&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">slider-icon&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">data&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">slider-head&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="n">rpx&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">26&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">slider-index&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">32&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-weight&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">wx-button&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#eff2f5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#7DB9DE&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#7DB9DE&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">64&lt;/span>&lt;span class="n">rpx&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="家庭记账本">&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/#家庭记账本" class="anchor-link" aria-label="家庭记账本">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>家庭记账本&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-page-3.png" alt="wechat-mini-app-page-6.png">&lt;span class="caption">※ 家庭记账本&lt;/span>&lt;/p>
&lt;p>记账本因为需要存储用户数据，这里使用到了微信小程序的云开发功能。云开发数据的储存和调用其实不算难，关键是要理清数据存储的结构。这里我将讲述一下云开发的基本使用方法，不再展示记账本的 &lt;code>wxml&lt;/code> 和 &lt;code>wxss&lt;/code> 的内容。&lt;/p>
&lt;p>使用微信小程序云开发，则需要使用自己的 AppID，进入云开发控制台，创建数据库，添加一个集合。这里我创建的数据库环境为 &lt;code>guanqr-01&lt;/code>，集合名称为 &lt;code>cashbook&lt;/code>。&lt;/p>
&lt;p>在小程序所在目录中，将除了 &lt;code>project.config.json&lt;/code> 外的全部文件存放在 &lt;code>miniprogram&lt;/code> 文件夹内，然后再新建一个名为 &lt;code>cloudfunctions&lt;/code> 文件夹，用来存放云函数，不过目前并未涉及到云函数的使用。以上步骤完成后，在 &lt;code>project.config.json&lt;/code> 文件的开头添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">{
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;#34;miniprogramRoot&amp;#34;: &amp;#34;miniprogram/&amp;#34;,
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;#34;cloudfunctionRoot&amp;#34;: &amp;#34;cloudfunctions/&amp;#34;,
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> &amp;#34;description&amp;#34;: &amp;#34;项目配置文件&amp;#34;,
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;#34;packOptions&amp;#34;: {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;#34;ignore&amp;#34;: []
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> }
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后进入 &lt;code>app.js&lt;/code>，添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">App({
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> onLaunch: function () {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ if (!wx.cloud) {
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ console.error(&amp;#39;请使用 2.2.3 或以上的基础库以使用云能力&amp;#39;)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ } else {
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ wx.cloud.init ({
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ env: &amp;#39;guanqr-01&amp;#39;,
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ traceUser: true,
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ })
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ }
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> }
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">})
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>env&lt;/code> 这里需要填写你配置云开发的时候填写的数据库环境。上述步骤完成后，云开发的基本配置就完成了。如果你需要上传数据到云端，可以设置一个函数，比如名为 &lt;code>addData&lt;/code>，在 &lt;code>js&lt;/code> 文件中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="nx">addBtn&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span>&lt;span class="p">(){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;cashbook&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">add&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 这里是需要上传的数据，以下面的六组数据为例
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">incomeOrPay&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">incomeOrPay&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">fontColor&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">fontColor&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mark&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">mark&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">money&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">money&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">date&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">date&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 这里填写上传成功后的运行的函数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">showToast&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;添加成功&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//console.log(&amp;#39;添加成功，记录 _id:&amp;#39;, res._id)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">fail&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">showToast&lt;/span> &lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">icon&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;none&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;添加失败&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//concole.error(&amp;#39;添加失败&amp;#39;, err)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>运行该函数将数据上传后，即可在控制台中看到存储的数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-cloud.png" alt="wechat-mini-app-cloud.png">&lt;span class="caption">※ 云开发控制台&lt;/span>&lt;/p>
&lt;p>每一组数据具有唯一的 &lt;code>_id&lt;/code>，因此可以借助 &lt;code>_id&lt;/code> 查找并修改特定的数据类型。&lt;/p>
&lt;p>对于数据库中的数据读取操作也很简单：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 页面的初始数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 生命周期函数--监听页面显示
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">onShow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;cashbook&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">get&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//console.log(res.data)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>至于数据的删除，我觉得当前很多应用都是向左滑动删除当前一栏数据，因此我对此进行了模仿。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-mini-app-page-4.png" alt="wechat-mini-app-page-4.png">&lt;span class="caption">※ 向左滑动删除数据&lt;/span>&lt;/p>
&lt;p>首先对 &lt;code>wxml&lt;/code> 文件进行改写：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!--pages/cashbook/cashbook.wxml--&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;body&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;cashbook {{item.isTouchMove ? &amp;#39;touch-move-active&amp;#39; : &amp;#39;&amp;#39;}}&amp;#34;&lt;/span> &lt;span class="na">data-index&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{index}}&amp;#34;&lt;/span> &lt;span class="na">bindtouchstart&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;touchstart&amp;#34;&lt;/span> &lt;span class="na">bindtouchmove&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;touchmove&amp;#34;&lt;/span> &lt;span class="na">wx:for&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{cashbook}}&amp;#34;&lt;/span> &lt;span class="na">wx:key&lt;/span>&lt;span class="o">=&lt;/span> &lt;span class="s">&amp;#34;index&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;content&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{item.title}}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;details&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;money&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;color:{{item.fontColor}};&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{item.mark}}{{item.money}} 元&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;date&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{item.date}}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">view&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;del&amp;#34;&lt;/span> &lt;span class="na">catchtap&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;del&amp;#34;&lt;/span> &lt;span class="na">data-index&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{index}}&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;{{item._id}}&amp;#39;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>删除&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">view&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>再编写 JavaScript 函数实现滑动删除：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// pages/cashbook/cashbook.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">Page&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 页面的初始数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">startX&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="c1">//开始坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">startY&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">countereId&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">null&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 生命周期函数--监听页面显示
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">onShow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;cashbook&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">get&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">success&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//console.log(res.data)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">reverse&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">res&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">addNewCash&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">setTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">navigateTo&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;/pages/add-cash/add-cash&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//手指触摸动作开始 记录起点X坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">touchstart&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//开始触摸时 重置所有删除
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">forEach&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">v&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">v&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTouchMove&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="c1">//只操作为true的
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">v&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTouchMove&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">startX&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">changedTouches&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">clientX&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">startY&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">changedTouches&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">clientY&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//滑动事件处理
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">touchmove&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">that&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">index&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">currentTarget&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dataset&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">index&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="c1">//当前索引
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">startX&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">startX&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="c1">//开始X坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">startY&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">startY&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="c1">//开始Y坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">touchMoveX&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">changedTouches&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">clientX&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="c1">//滑动变化坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">touchMoveY&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">changedTouches&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">clientY&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="c1">//滑动变化坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">//获取滑动角度
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">angle&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">angle&lt;/span>&lt;span class="p">({&lt;/span> &lt;span class="nx">X&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">startX&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">Y&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">startY&lt;/span> &lt;span class="p">},&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="nx">X&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">touchMoveX&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">Y&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">touchMoveY&lt;/span> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">forEach&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">v&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">v&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTouchMove&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//滑动超过30度角 return
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">abs&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">angle&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="mi">30&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">i&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="nx">index&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">touchMoveX&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="nx">startX&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1">//右滑
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">v&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTouchMove&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">false&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="c1">//左滑
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">v&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">isTouchMove&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//更新数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nx">that&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="cm">/**
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * 计算滑动角度
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * @param {Object} start 起点坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> * @param {Object} end 终点坐标
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm"> */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">angle&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">start&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">end&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">_X&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">end&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">X&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="nx">start&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">X&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">_Y&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">end&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Y&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="nx">start&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">Y&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//返回角度 /Math.atan()返回数字的反正切值
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">return&lt;/span> &lt;span class="mi">360&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">atan&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">_Y&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="nx">_X&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">/&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">PI&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//删除事件
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nx">del&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">splice&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">currentTarget&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dataset&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">index&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setData&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cashbook&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cashbook&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">var&lt;/span> &lt;span class="nx">uid&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">target&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">id&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//console.log(uid)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kr">const&lt;/span> &lt;span class="nx">db&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">wx&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cloud&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">database&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">db&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">collection&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;cashbook&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">doc&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">uid&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">remove&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>删除数据的关键就是获取当前数据的 &lt;code>_id&lt;/code> 值。在 &lt;code>wxml&lt;/code> 文件中，我通过使用 &lt;code>id = '{{item._id}}'&lt;/code> 获取到了当前数据的 &lt;code>_id&lt;/code> 值，然后使用 &lt;code>remove()&lt;/code> 删除了指定数据。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/wechat-mini-app-development-toolbox/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/mini-app/">小程序</category><category domain="https://guanqr.com/tags/typography/">排版</category><category domain="https://guanqr.com/tags/wechat/">微信</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
全息透镜与数字全息技术</title><link>https://guanqr.com/tech/optics/hololens-experiment/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/hololens-experiment/</guid><pubDate>Thu, 16 Jan 2020 16:21:40 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="传统全息术">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#传统全息术" class="anchor-link" aria-label="传统全息术">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:传统全息术" class="headings">传统全息术&lt;/a>&lt;/h2>
&lt;h3 id="基本原理">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#基本原理" class="anchor-link" aria-label="基本原理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:基本原理" class="headings">基本原理&lt;/a>&lt;/h3>
&lt;p>全息透镜实际上是一张球面波基元全息图（或称点光源的全息图）。它相当于一块菲涅耳波带板，具有类似透镜的会聚作用和成像特性。全息透镜易制成较大的尺寸，造价低，制作方法简单，易复制，重量轻，因而在某些场合具有独特用途。全息透镜可用一束平面光波和一束球面光波的干涉来记录，也可用两束球面光波干涉来记录。全息透镜有同轴全息透镜和离轴全息透镜两种。图 1 ( a ) 所示为同轴全息透镜的记录原理，轴上点源发出的球面波与平面波干涉的结果，在记录面上两相干光波的振幅相等时，则干涉条纹的强度为：&lt;/p>
&lt;div>
$$
I(x,y)=|E_0|^2+2E_0\cos\big(\frac{\pi\rho^2}{\lambda z_0}\big)
$$
&lt;/div>
&lt;p>式中，$E_0$ 表示振幅常数。由光强 $I(x,y)$ 线性曝光得到的全息图是一同心圆环干涉图，如图 1 ( b )。第 $m$ 个环带的半径平方：&lt;/p>
&lt;div>
$$
\rho_m^2=m\lambda z_0 \quad m=1,2,3,\cdots
$$
&lt;/div>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-0.png" alt="hololens-0.png">&lt;span class="caption">※ 图 1：同轴全息透镜的记录&lt;/span>&lt;/p>
&lt;p>因此，环带沿半径方向由内向外变密，全息图上干涉环带的分布和菲涅耳波带板相同。这种全息图称为全息波带板。全息波带板和菲涅尔波带板的区别在于，线性记录的全息波带板其振幅透射系数是余弦形函数，而菲涅耳波带板的振幅透射系数是矩形函数。如果仍然用参考光R照明这个线性记录的全息图（图 2），全息图只产生 0，±1 级衍射光。1 级衍射光束对参考光束的偏角即衍射角 $\theta'$，满足光栅的衍射公式：&lt;/p>
&lt;div>
$$
\sin\theta'=\frac{\lambda}{\rho_1}
$$
&lt;/div>
&lt;p>一方面，根据上面的环带半径的公式，有：&lt;/p>
&lt;div>
$$
\frac{\lambda}{\rho_1}=\frac{\rho_1}{z_0}
$$
&lt;/div>
&lt;p>因此：&lt;/p>
&lt;div>
$$
\sin\theta'=\frac{\rho_1}{z_0}
$$
&lt;/div>
&lt;p>另一方面，当图 2 中的 $\theta$ 角很小时，有：&lt;/p>
&lt;div>
$$
\sin\theta\approx\tan\theta=\frac{\rho_1}{z_0}
$$
&lt;/div>
&lt;p>因此得 $\theta'=\theta$，即衍射角等于记录时的干涉孔径角。又因为全息图的振幅透射系数是圆对称分布，所以通光口径内的 +1 级衍射光束，好像是从 $S_0$ 点射出的发散光束（图 2），所以 $S_0$ 就是全息图再现的虚像点，它和物点 $O$ 的坐标完全相同，这时全息图起着普通负透镜的作用。同理，-1 级衍射光聚集于全息图的另一侧，与 $S_0$ 成镜像位置的 $S$ 处，全息图起着普通正透镜的作用。零级光没有偏折地透过全息图，不参与成像，全息图起着平行平晶的作用。或者说，线性记录的全息图能衍射产生两个像，一个是虚像，另一个是实像。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-1.png" alt="hololens-1.png">&lt;span class="caption">※ 图 2：全息波带片的衍射&lt;/span>&lt;/p>
&lt;p>当两相干的球面波或一球面波与一平面波不是同轴情况时，利用记录在全息干板上的两个相干光波的干涉条纹，就能制成离轴全息透镜。此时被记录的干涉条纹为同轴记录时形成的同心圆条纹的一部分弧形结构，条纹较密。&lt;/p>
&lt;p>全息透镜具有普通透镜类似的一些性质：&lt;/p>
&lt;ol>
&lt;li>全息透镜具有与正透镜类似的聚焦特性。平行光透过全息透镜时能得到一个会聚球面波，会聚点即它的焦点。焦点至全息透镜的距离即为它的焦距。应当注意：全息透镜的焦距一般并不等于制作时形成球面波的透镜的焦距。它只取决于光束会聚点至全息干板的距离，在实验中可以调节这个距离。&lt;/li>
&lt;li>全息透镜也具有成像作用，其成像规律与普通透镜一致。&lt;/li>
&lt;/ol>
&lt;p>全息透镜还有一些与普通透镜完全不同的特性：&lt;/p>
&lt;ol>
&lt;li>由于正弦型薄全息图总是同时存在 ±1 级衍射，同一个全息透镜既相当于一个正透镜，同时也相当于一个负透镜。因此，同轴全息透镜在成像时，既有类似于正透镜所成的像，同时也有类似于负透镜所成的像。离轴全息透镜的成像是离轴的，可以把它看成是一个棱镜和一个透镜的组合。透镜起成像作用，棱镜则使光轴离轴偏转，表现出离轴全息透镜的成像和转像的双重功能，而普通透镜不能两者兼是。&lt;/li>
&lt;li>对于非线性记录的薄全息透镜，重现时除了 ±1 级衍射外，还同时有高次衍射，如 ±2 级、±3 级等衍射，因而全息透镜存在多重焦距和多重成像。&lt;/li>
&lt;li>全息透镜具有明显的色散作用。由于衍射角对应于不同波长的入射光有着不同的数值，所以同一个全息透镜即使是对于同一级衍射所形成的会聚焦点的位置也随波长的不同而变化。也就是说，对于不同的波长，全息透镜的焦距值也不同。表现出多焦点的特点。&lt;/li>
&lt;/ol>
&lt;p>因而，全息透镜既可取代透镜，又可取代棱镜或光栅等，集准直、成像、转像以及分光等功能。&lt;/p>
&lt;h3 id="搭建光路">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#搭建光路" class="anchor-link" aria-label="搭建光路">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:搭建光路" class="headings">搭建光路&lt;/a>&lt;/h3>
&lt;p>利用如图 3 所示的光路制作全息透镜。其中，$Lazer$－激光器；$M_1$、$M_2$－反射镜；$BS_1$、$BS_2$－分束镜；$L_0$－扩束镜；$Lcv$－准直透镜；$SF$－针孔滤波器；$D$－光栏；$P$－光屏。光路的光源是氦氖激光器或固体激光器。由于其出射光由于光束质量并不高，因此需要滤波。实验中使用的滤波器件是针孔滤波器，主要有显微物镜、针孔组成（图 3 中用 $L_0$、$SF$ 表示）。当小孔恰好位于显微物镜焦点，入射激光束可以被较好的滤波。滤波后的激光束经过准直透镜变换为平行光，入射到马赫－泽德干涉仪。&lt;/p>
&lt;p>马赫－泽德干涉仪采用分振幅法产生双光束干涉。两块分束镜 $BS_1$，$BS_2$ 和两块反射镜 $M_1$，$M_2$ 的反射面互相平行，并且中心光路构成一平行四边形。平行光束投射到 $BS_1$ 上，$BS_1$ 的前表面将光束分成两束。它们分别由反射镜 $M_1$，$M_2$ 反射，到达分束镜 $BS_2$ 后相遇产生干涉，在光屏 $P$ 上可得到干涉条纹。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-2.png" alt="hololens-2.png">&lt;span class="caption">※ 图 3：马赫－泽德干涉仪&lt;/span>&lt;/p>
&lt;h3 id="记录全息图">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#记录全息图" class="anchor-link" aria-label="记录全息图">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:记录全息图" class="headings">记录全息图&lt;/a>&lt;/h3>
&lt;p>按图 3 调整好马赫－泽德干涉仪光路。调整中注意使两束光的光程接近相等。在反射镜 $M_1$ 和分束镜 $BS_2$ 之间置入高鉴别率的透镜 $L$，使其光轴与原光束的光轴重合。取下光屏 $P$，用工业相机对全息图进行采集，记录较为完整的同心圆环状图样，如图 4 所示，并记录相机型号，由此可以计算得出全息透镜的主焦距。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-3.png" alt="hololens-3.png">&lt;span class="caption">※ 图 4：采集到的全息图样&lt;/span>&lt;/p>
&lt;p>工业相机各项参数如图 5 所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-4.png" alt="hololens-4.png">&lt;span class="caption">※ 图 5：工业相机参数&lt;/span>&lt;/p>
&lt;p>激光器出射激光波长为 $632.8nm$，工业相机型号为 MER-310-12UC，像素尺寸大小为 $3.2\mu m\times3.2 \mu m$。第七级圆环最外圈直径像素点为 $792$ 个，对应距离为 $2534.4\mu m$，半径为 $1267.2\mu m$。&lt;/p>
&lt;p>根据公式：&lt;/p>
&lt;div>
$$
f=\frac{r_n^2}{2n\lambda}
$$
&lt;/div>
&lt;p>求得焦距为 $18.12cm$。&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">插入透镜的焦距&lt;/th>
&lt;th style="text-align: center">透镜与像面的距离&lt;/th>
&lt;th style="text-align: center">全息透镜主焦距实测值&lt;/th>
&lt;th style="text-align: center">全息透镜主焦距计算值&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">200mm&lt;/td>
&lt;td style="text-align: center">39.25cm&lt;/td>
&lt;td style="text-align: center">19.25cm&lt;/td>
&lt;td style="text-align: center">18.12cm&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;h3 id="制作全息透镜">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#制作全息透镜" class="anchor-link" aria-label="制作全息透镜">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:制作全息透镜" class="headings">制作全息透镜&lt;/a>&lt;/h3>
&lt;p>在黑暗条件下，装上全息干板 $H$ 进行曝光，经暗室处理后得到同轴全息透镜。需要注意的是，下述步骤的处理时候随着温度的变化而调整。&lt;/p>
&lt;ol>
&lt;li>显影：在 20℃±1℃ 的 D-19 显影液中漂洗 2 分钟左右，直到全息干板 $H$ 上出现灰色，在暗绿灯下观察到由灰变黑的现象，即可取出再用清水漂洗。线性记录振幅型全息图，最佳平均光密度为 0.6～1；&lt;/li>
&lt;li>停显：停显液中（20℃）停显 1 分钟左右，再用清水漂洗；&lt;/li>
&lt;li>定影：F-5 定影液（20℃）中定影 2 分钟左右，再水洗；&lt;/li>
&lt;li>漂白：在漂白液中漂白 1 分钟左右，可观察到全息干板上的黑色褪去，即可取出水洗。振幅型全息图经过氰化钾漂白剂得到相位型全息图，使衍射效率提高。应不停地漂动全息图，得呈乳白色薄层状平板。&lt;/li>
&lt;/ol>
&lt;p>上述过程中除漂白以外，其余过程均需在暗室环境下进行操作。装上全息干板进行曝光前，要先设定好曝光时间为 8 秒，再等待 1 分钟左右，使整个光路的实验环境稳定下来后，再对全息干板进行曝光。而在暗房进行显影、停显及定影操作时，可用暗绿灯作为安全灯辅助实验进行。&lt;/p>
&lt;h2 id="数字全息术">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#数字全息术" class="anchor-link" aria-label="数字全息术">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:数字全息术" class="headings">数字全息术&lt;/a>&lt;/h2>
&lt;h3 id="基本原理-1">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#基本原理-1" class="anchor-link" aria-label="基本原理-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:基本原理-1" class="headings">基本原理&lt;/a>&lt;/h3>
&lt;p>数字全息记录和再现的基本理论与普通全息是相同的，其区别在于数字全息采用数字摄像机代替干板存储全息图，通过计算机软件模拟记录光场实现图像衍射再现，简化了再现过程，实现了全息图实时记录与存储，展现了全息的数字化过程。&lt;/p>
&lt;h4 id="数字全息图记录">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#数字全息图记录" class="anchor-link" aria-label="数字全息图记录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:数字全息图记录" class="headings">数字全息图记录&lt;/a>&lt;/h4>
&lt;p>物光波的信息包括光波的振幅和相位，然而现有的记录介质均只能记录光强，因此，必须把相位信息转换为强度信息才能记录下物光的所有信息。全息术就是利用干涉法将空间相位调制转化为空间强度调制从而记录下物光波全部信息的方法。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-5.png" alt="hololens-5.png">&lt;span class="caption">※ 图 6：数字全息图记录和再现的坐标系统变换示意图&lt;/span>&lt;/p>
&lt;p>图 6 为数字全息记录和再现的坐标系统变换示意图。物体位于物平面 $x_0y_0$ 面上，与全息平面 $xy$ 面相距 $d_0$，即全息图的记录距离。摄像机位于 $xy$ 面上，记录物光和参考光在全息平面上的干涉光强分布。$x_1y_1$ 面是数值再现的成像平面，与全息平面相距 $d$，也称为再现距离。&lt;/p>
&lt;p>设位于 $x_0y_0$ 平面的物光场分布为 $U_0(x_0,y_0)$，传播到全息平面 $xy$ 面记为：&lt;/p>
&lt;div>
$$
O(x,y)=A_o(x,y)\exp[j\varphi_0(x,y)]
$$
&lt;/div>
&lt;p>其中，$A_o(x,y)$ 和 $\varphi_0(x,y)$ 分别为物光波的振幅和相位分布。将到达全息平面上的参考光波记为：&lt;/p>
&lt;div>
$$
R(x,y)=A_r(x,y)\exp[j\varphi_r(x,y)]
$$
&lt;/div>
&lt;p>其中，$A_r(x,y)$ 和 $\varphi_r(x,y)$ 分别为参考光的振幅和相位分布。则 $xy$ 面上全息图的强度分布为：&lt;/p>
&lt;div>
$$
\begin{aligned}
I_H(x,y)=&amp;|U(x,y)|^2=|O(x,y)+R(x,y)|^2\\
=&amp;|A_o(x,y)|^2+|A_r(x,y)|^2+\\
&amp;O(x,y)R^*(x,y)+O^*(x,y)R(x,y)
\end{aligned}
$$
&lt;/div>
&lt;p>该式前两项分别是物光和参考光的强度分布，仅与振幅有关，与相位没有关系。第三项是干涉项，包含了物光波的振幅和相位信息。参考光波作为载波，其振幅和相位都受到物光波的调制，干涉条纹则是参考光波的振幅和相位受到物光波调制的结果。&lt;/p>
&lt;p>假设全息图经数字化后离散为 $N_x\times N_y$ 个点，记录全息图的 CCD 光敏面尺寸为 $L_x\times L_y$，则通过空间采样后所记录的数字全息图可表示为：&lt;/p>
&lt;div>
$$
I(u,v)=I_H(x,y)rect\big(\frac{x}{L_x},\frac{y}{L_y}\big)\sum_u\sum_v\delta(x-u\Delta x,y-v\Delta y)
$$
&lt;/div>
&lt;p>其中，（$u,v=-N/2,-N/2+1,\cdots,N/2-1$）。$\Delta x$ 和 $\Delta y$ 分别是 $x$ 和 $y$ 方向的采样间隔，且 $\Delta x=L_x/N_x$，$\Delta y=L_y/N_y$ ，$\delta$ 表示二维脉冲函数，矩形函数 $rect(x/L_x,y/L_y)$ 表示 CCD 靶面的有效面积。&lt;/p>
&lt;p>由于数字全息是使用 CCD 代替全息干板记录全息图，因此想获得高质量的数字全息图，并完好重现物光光波，必须保证全息图表面上的光波的空间频率与记录介质的空间频率之间满足奈奎斯采样定理，即记录介质的空间频率必须是全息图表面上光波的空间频率的两倍以上。但是由于摄像机分辨率（约 100 线 / mm）比全息干板等传统记录介质的分辨（约 5000 线 / mm）低的多，而且 CCD 靶面较小，因此数字全息的记录条件不容易满足，记录结构的考虑也有别于传统全息。目前数字全息技术仅限于记录和再现较小物体低频信息，且对记录条件有其自身要求，因此想成功记录数字全息图，就必须合理的设计实验光路。&lt;/p>
&lt;p>设物光和参考光在全息图表面上的最大夹角为 $\theta_{\max}$，则摄像机平面上形成最小的条纹间距 $\Delta e_{\min}$ 为：&lt;/p>
&lt;div>
$$
\Delta e_{\min}=\frac{\lambda}{2\sin(\theta_{\max}/2)}
$$
&lt;/div>
&lt;p>所以全息图表面上光波的最大空间频率为：&lt;/p>
&lt;div>
$$
f_{\min}=\frac{2\sin(\theta_{\max}/2)}{\lambda}
$$
&lt;/div>
&lt;p>一个给定的 CCD 像素大小为 $\Delta x$，根据采样定理，一个条纹周期 $\Delta e$ 至少要等于大于 2 倍像素周期，即 $\Delta e\geq 2\Delta x$，记录信息才不会失真。由于数字全息光路中所允许的物光和参考光夹角 $\theta$ 很小，因此 $\sin\theta\approx\tan\theta\approx\theta$，有：&lt;/p>
&lt;div>
$$
\theta\leq\frac{\lambda}{2\Delta x}
$$
&lt;/div>
&lt;p>所以：&lt;/p>
&lt;div>
$$
\theta_{\max}=\frac{\lambda}{2\Delta x}
$$
&lt;/div>
&lt;p>在数字全息图的记录光路中，参考光与物光的夹角范围受到摄像机分辨率的限制。由于现有摄像机分辨率较低，因此只有尽可能减小参考光和物光夹角才能保证携带物体信息的物光中的振幅和相位被全息图完整的记录下来。摄像机的像素尺寸一般在 $5\mu m\sim10\mu m$ 微米范围内，故参考光和物光夹角最大值在 $2^\circ\sim4^\circ$ 范围内。&lt;/p>
&lt;h4 id="数字全息图再现">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#数字全息图再现" class="anchor-link" aria-label="数字全息图再现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:数字全息图再现" class="headings">数字全息图再现&lt;/a>&lt;/h4>
&lt;p>从摄像机记录的光波场，到以数字形式存储全息图，再到数值再现全息图，数字全息技术的这一过程可以看作是一个数字化的相干光学成像系统，它能产生一个复波场，而这个复波场是经原始物体折射或衍射的像。对于这个成像系统，只要在物场给定一个输入函数，就能在像场得到一个输出函数。根据数字全息图成像方式的不同，也需要选择不同的再现系统。&lt;/p>
&lt;p>如图 6 所示，$x_Iy_I$ 面是数值再现的成像平面，与全息平面相距 $d$，也称为再现距离。$U_I(x_I,y_I)$ 是再现像的复振幅分布，因为它是一个二维复数矩阵，所以可以同时得到再现像的强度和相位分布。菲涅耳数字全息图再现过程就是一个菲涅耳衍射过程，根据衍射原理和再现距离可得再现平面上的光场分布，即：&lt;/p>
&lt;div>
$$
\begin{aligned}
U_I(x_I,y_I)=&amp;\frac{\exp(jkd)}{j\lambda d}\iint_{-\infty}^{\infty}I(u,v)C(u,v)\\
&amp;\exp\bigg\{\frac{jk}{2d}\big[(x_I-u)^2+(y_I-v)^2\big]\bigg\}dudv
\end{aligned}
$$
&lt;/div>
&lt;p>式中，$C(u,v)$ 为计算机模拟的再现光复振幅分布。将上式中二次相位因子 $(x_I-u)^2+(y_I-v)^2$ 展开：&lt;/p>
&lt;div>
$$
\begin{aligned}
U_I(x_I,y_I)=&amp;\frac{\exp(jkd)}{j\lambda d}\iint_{-\infty}^{\infty}I(u,v)C(u,v)\exp\bigg[\frac{jk}{2d}(u^2+v^2)\bigg]\\
&amp;\exp\bigg[-j2\pi\frac{1}{\lambda d}(ux_1+vy_1)\bigg]dudv
\end{aligned}
$$
&lt;/div>
&lt;p>在满足菲涅耳衍射的条件下，为了获得清晰的再现像，$|d|$ 必须等于 $d_0$ (记录距离)。当 $d=-d_0&amp;lt;0$ 时，原始像在焦，再现像 $U_I(x_I,y_I)$ 包含物光波原始像的复振幅分布。其中：&lt;/p>
&lt;div>
$$
\begin{aligned}
U_I(x_I,y_I)=&amp;\frac{\exp(jkd)}{j\lambda d}\exp\bigg[-2\frac{j\pi}{\lambda d}(x_1^2+y_1^2)\bigg]\times\\
&amp;F^{-1}\bigg\{I(u,v)C(u,v)\exp\bigg[-\frac{jk}{\lambda d}(u^2)+v^2\bigg]\bigg\}
\end{aligned}
$$
&lt;/div>
&lt;p>当 $d=d_0&amp;gt;0$ 时，共轭像在焦，再现像 $U_I(x_I,y_I)$ 包含物光波共轭像的复振幅分布。其中：&lt;/p>
&lt;div>
$$
\begin{aligned}
U_I(x_I,y_I)=&amp;\frac{\exp(jkd)}{j\lambda d}\exp\bigg[\frac{j\pi}{\lambda d}(x_1^2+y_1^2)\bigg]\times\\
&amp;F^{-1}\bigg\{I(u,v)C(u,v)\exp\bigg[\frac{jk}{\lambda d}(u^2)+v^2\bigg]\bigg\}
\end{aligned}
$$
&lt;/div>
&lt;p>在菲涅耳数字全息图的数值再现过程中，同样可以根据衍射距离的不同选择 S-FFT 或 D-FFT 方法进行再现计算。&lt;/p>
&lt;p>数字像面全息图是物光场的像与参考光在全息平面干涉的强度分布 $I_H(x,y)$。因此 $I(u,v)$ 的傅里叶变换频谱 $I(f_u,f_v)$ 将包含原始物光波的频谱，同时存在物光共轭像的频谱及零级衍射光。如果利用频谱滤波或在参考光中引入相移等方法消除共轭像的频谱及零级衍射光，这样就将得到物光场在全息平面 $xy$ 面上的像的频谱 $I_o(f_u,f_v)$，再通过傅里叶反变换，就可以获得物光场的像的复振幅分布 $U_I(x_I,y_I)$。&lt;/p>
&lt;p>容易看出，再现像的强度分布 $I_I(x_I,y_I)$ 和相位分布 $\Phi_I(x_I,y_I)$ 都可以由复振幅分布 $U_I(x_I,y_I)$ 计算得到（$^*$ 表示共轭）：&lt;/p>
&lt;div>
$$
\begin{aligned}
I_I(x_I,y_I)&amp;=U_I(x_I,y_I)U_I^*(x_I,y_I)\\
\Phi_I(x_I,y_I)&amp;=\arctan\frac{Im[U_I(x_I,y_I)]}{Re[U_I(x_I,y_I)]}
\end{aligned}
$$
&lt;/div>
&lt;h3 id="计算模拟全息记录与再现">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#计算模拟全息记录与再现" class="anchor-link" aria-label="计算模拟全息记录与再现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:计算模拟全息记录与再现" class="headings">计算模拟全息记录与再现&lt;/a>&lt;/h3>
&lt;h4 id="物面与全息图抽样">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#物面与全息图抽样" class="anchor-link" aria-label="物面与全息图抽样">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:物面与全息图抽样" class="headings">物面与全息图抽样&lt;/a>&lt;/h4>
&lt;p>数字计算机通常只能对离散的数字信号进行处理，并以离散的形式输出。因此，制作计算全息图的第一步是对物波函数进行抽样。设待记录的物波函数为：&lt;/p>
&lt;div>
$$
f(x,y)=a(x,y)\exp[i\varphi(x,y)]
$$
&lt;/div>
&lt;p>其傅里叶变换（空间频谱）为：&lt;/p>
&lt;div>
$$
F(u,v)=A(u,v)\exp[i\varphi(u,v)]
$$
&lt;/div>
&lt;p>为满足抽样定理的要求，物波函数及其空间频谱函数必须是带限函数，即：&lt;/p>
&lt;div>
$$
\begin{aligned}
f(x,y)=0\quad|x|\geq\frac{\Delta x}{2},|y|\geq\frac{\Delta y}{2}\\
F(u,v)=0\quad|u|\geq\frac{\Delta u}{2},|v|\geq\frac{\Delta v}{2}
\end{aligned}
$$
&lt;/div>
&lt;p>在此条件下，根据抽样定理，对物函数及其频谱函数的抽样间隔应为：&lt;/p>
&lt;div>
$$
\begin{aligned}
\delta x\geq\frac{1}{\Delta u},\quad\delta y\geq\frac{1}{\Delta v}\\
\delta u\geq\frac{1}{\Delta x},\quad\delta v\geq\frac{1}{\Delta y}
\end{aligned}
$$
&lt;/div>
&lt;p>取式中的等号，抽样单元总数 $M\times N=\Delta x\Delta y \Delta u\Delta v$ 是相同的。对于傅里叶变换全息图，全息图上记录的是物波的空间频谱 $F(u,v)$，因此必须对物波函数进行离散傅里叶变换。为了减少运算时间，通常采用快速傅里叶变换（FFT）算法。计算结果一般为复数：&lt;/p>
&lt;div>
$$
f(m,n)\stackrel{FFT}{\longrightarrow}F(j,k)=F_r(j,k)=iF_i(j,k)
$$
&lt;/div>
&lt;p>其振幅和位相可分别表示为：&lt;/p>
&lt;div>
$$
\begin{aligned}
A(j,k)=\sqrt{F_r^2(j,k)+F_i^2(j,k)}\\
\varphi(j,k)=\arctan\bigg[\frac{F_i(j,k)}{F_r(j,k)}\bigg]
\end{aligned}
$$
&lt;/div>
&lt;h4 id="全息图再现">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#全息图再现" class="anchor-link" aria-label="全息图再现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:全息图再现" class="headings">全息图再现&lt;/a>&lt;/h4>
&lt;p>计算全息图的再现与光学全息类似，不同的是实验过程中通过软件模拟平面波光场，模拟物信息记录的实验条件，所以模拟仅在特定的衍射级次上才能再现我们希望的波前。&lt;/p>
&lt;h3 id="空间光调制器实时再现">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#空间光调制器实时再现" class="anchor-link" aria-label="空间光调制器实时再现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:空间光调制器实时再现" class="headings">空间光调制器实时再现&lt;/a>&lt;/h3>
&lt;p>随着计算机和采集技术的发展，在传统全息实验基础上，人们逐渐用高分辨率的 CCD 摄像机来替代全息记录干板来采集全息图。由于摄像机记录了含有物光信息的全息图，如果能将此全息图加载到再现光路上，那么就能完成光学再现。空间光调制器恰好可对光进行振幅调制和相位调制，能完成全息图加载光路的工作。&lt;/p>
&lt;h4 id="空间光调制器">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#空间光调制器" class="anchor-link" aria-label="空间光调制器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:空间光调制器" class="headings">空间光调制器&lt;/a>&lt;/h4>
&lt;p>空间光调制器是可在随时间变化的电驱动信号或其他信号的控制下，改变空间上光分布的振幅或强度、相位、偏振态以及波长，或者把非相干光转化成相干光。由于它的这种性质，可作为实时光学信息处理、光计算等系统中构造单元或关键的器件。空间光调制器是实时光学信息处理，自适应光学和光计算等现代光学领域的关键器件。空间光调制器一般按照读出光的读出方式不同，可以分为反射式和透射式。&lt;/p>
&lt;p>想定量分析液晶屏对光的调制特性，需要将调制过程用数学方法来模拟，液晶盒里的扭曲向列液晶可沿光的透过方向分层，每一层可看作是单轴晶体，它的光学轴与液晶分子的取向平行。由于分子的扭曲结构，分子在各层间按螺旋方式逐渐旋转，各层单轴晶体的光学轴沿光的传输方向也螺旋式旋转。如图 7 所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-6.png" alt="hololens-6.png">&lt;span class="caption">※ 图 7：TNLC 分层模型&lt;/span>&lt;/p>
&lt;p>在空间光调制器液晶屏的使用中，光线依次通过起偏器 $P_1$、液晶分子、检偏器 $P_2$，如图 8 所示。光路中要求偏振片和液晶屏表面都在 $xy$ 平面上，图中已经分别标出了液晶屏前后表面分子的取向，两者相差 $90^\circ$。偏振片角度的定义是，逆着光的方向看，$\Phi_1$ 为液晶屏前表面分子的方向顺时针到 $P_l$ 偏振方向的角度，$\Phi_2$ 为液晶屏后表面分子的方向逆时针到 $P_2$ 偏振方向的角度。偏振光沿 $z$ 轴传输，各层分子可以看作具有相同性质的单轴晶体，它的琼斯矩阵表达式与液晶分子的寻常折射率 $n_o$ 和非常折射率 $n_e$，以及液晶盒的厚度 $d$ 和扭曲角 $\alpha$ 有关。除此之外，琼斯矩阵还与两个偏振片的转角 $\Phi_1$、$\Phi_2$ 有关。因此光波强度和相位的信息可简单表示为 $T=T(\beta,\Phi_1,\Phi_2)$；$\delta=\delta(\beta,\Phi_1,\Phi_2)$，其中 $\beta=\pi d[n_e(\theta)-n_0]/\lambda$ 又称为双折射，它其实为隐含电场的量，因为 $\beta$ 为非常折射率 $n_e$ 的函数，非常折射率 $n_e$ 随液晶分子的倾角 $\theta$ 改变，$\theta$ 又随外加电压而变化。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-7.png" alt="hololens-7.png">&lt;span class="caption">※ 图 8：SLM 光路示意图&lt;/span>&lt;/p>
&lt;p>在不加电压和加电压的情况下液晶屏的透光原理如图 9 所示。液晶屏两侧的起偏器和检偏器相互平行，自然光透过起偏器后变为线偏振光偏振方向为水平。右侧 $V=0$，不加电压，液晶分子自然扭曲 $90^\circ$，透过光的偏振方向也旋转 $90^\circ$，与检偏器方向垂直，无光线射出，即为关态。然而在左侧 $V\neq 0$，分子沿电场方向排列，对光的偏振方向没有影响，光线经检偏器射出，即为开态。这样即实现了通过电压控制光线通过的功能。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-8.png" alt="hololens-8.png">&lt;span class="caption">※ 图 9：液晶屏的透光原理&lt;/span>&lt;/p>
&lt;h4 id="实时再现">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#实时再现" class="anchor-link" aria-label="实时再现">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:实时再现" class="headings">实时再现&lt;/a>&lt;/h4>
&lt;p>利用空间光调制器来代替传统全息干板，可以实现传统全息实验中无法实现的实时全息功能。但由于液晶空间光调制器的分辨率比干板的低，当有参考光照射空间光调制器时衍射过程中物的振幅信息和相位信息都会有丢失，所以在记录全息图的时候一定要尽可能获得较完备信息。同时为提高再现信息质量，物体尺寸、记录距离、参物光干涉夹角以及共轭像的分离都可以作为实验中的优化参数。&lt;/p>
&lt;h3 id="实验记录">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#实验记录" class="anchor-link" aria-label="实验记录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:实验记录" class="headings">实验记录&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-9.jpg" alt="hololens-9.jpg">&lt;span class="caption">※ 图 10：实验中搭建的全息光路&lt;/span>&lt;/p>
&lt;h4 id="计算机模拟全息">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#计算机模拟全息" class="anchor-link" aria-label="计算机模拟全息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:计算机模拟全息" class="headings">计算机模拟全息&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-10.jpg" alt="hololens-10.jpg">&lt;span class="caption">※ 图 11：数字记录&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-11.jpg" alt="hololens-11.jpg">&lt;span class="caption">※ 图 12：数字再现&lt;/span>&lt;/p>
&lt;h4 id="数字全息">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#数字全息" class="anchor-link" aria-label="数字全息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:数字全息" class="headings">数字全息&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-12.jpg" alt="hololens-12.jpg">&lt;span class="caption">※ 图 13：光学记录&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-13.jpg" alt="hololens-13.jpg">&lt;span class="caption">※ 图 14：数字再现&lt;/span>&lt;/p>
&lt;h4 id="可视数字全息">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#可视数字全息" class="anchor-link" aria-label="可视数字全息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:可视数字全息" class="headings">可视数字全息&lt;/a>&lt;/h4>
&lt;p>数字记录同计算机模拟全息。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-14.jpg" alt="hololens-14.jpg">&lt;span class="caption">※ 图 15：光学再现&lt;/span>&lt;/p>
&lt;h4 id="实时传统全息">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#实时传统全息" class="anchor-link" aria-label="实时传统全息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:实时传统全息" class="headings">实时传统全息&lt;/a>&lt;/h4>
&lt;p>光学记录同数字全息。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hololens-15.jpg" alt="hololens-15.jpg">&lt;span class="caption">※ 图 16：光学再现&lt;/span>&lt;/p>
&lt;h2 id="关于全息实验">&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#关于全息实验" class="anchor-link" aria-label="关于全息实验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/#contents:关于全息实验" class="headings">关于全息实验&lt;/a>&lt;/h2>
&lt;p>全息术的两个实验（全息透镜实验和数字全息及实时再现实验）是物理光学实验中比较重要的实验，也是我在本学期实验课程中最喜欢的实验。值得一提的是，在课程最后的实验操作考试中，我抽中的题目同样是全息光路的搭建。&lt;/p>
&lt;p>实验中最关键的环节是光路的搭建。因为全息光路的搭建比较复杂，过程很繁琐，特别是在光源扩束的环节，扩束镜中的小孔需要精确地与光束对准才能有较好的实验效果。如果你的手很不稳，不能对扩束镜进行细微地调整，就很难做到完美的扩束。全息透镜实验是在课程前期进行的实验，当时由于理论课程还没有讲到傅里叶光学这一章节，很多同学对于全息术的原理究竟是什么感到很迷惑；数字全息及实时再现实验是课程后期进行的实验，因为是第二次做全息实验，我对该光路的搭建已经很熟悉了，做起来便得心应手，在实验操作考试中也能静下心来。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/hololens-experiment/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/hololens-experiment/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/fourier-optics/">傅里叶光学</category><category domain="https://guanqr.com/tags/hololens/">全息</category><category domain="https://guanqr.com/tags/slm/">SLM</category></item><item><title>
新年夜不狂欢</title><link>https://guanqr.com/life/school/new-year-night-2020/</link><guid isPermaLink="true">https://guanqr.com/life/school/new-year-night-2020/</guid><pubDate>Fri, 03 Jan 2020 12:01:17 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>很期待每一年的跨年夜，从一年的年末跨越到下一年的年初，又一个轮回默默的开启了。虽说公历元旦带来的欢喜远不如农历春节那么多，但毕竟也算是除旧迎新。每一年学校都会在十二月末的时候举办学生节，比如各学院的花车方阵游行，比如各种趣味运动会，包括马拉松和水上嘉年华，又比如说最令人期待的紫金港校区「新年狂欢夜」。&lt;/p>
&lt;p>这学期的课程比较少，从 12 月 27 日周五开始到周三元旦节假日的六天时间里都没有课，虽说临近期末考试，不过这毕竟是难得的五天连放假期，我的心中早已有一个完整的假期计划。29 日早上参加紫金港校区的马拉松比赛；30 日晚上参加学院的新年晚会；31 日早上去紫金港进行学院的游园会活动的准备工作，顺便积一些志愿者小时数，晚上留在紫金港跨年；剩下的时间就用来复习专业课。&lt;/p>
&lt;p>每年的「新年狂欢夜」，不仅仅是紫金港校区的人，其他校区的人也会聚集到云峰的篮球场，这是属于浙大自己的节日。其他校区其实也会同时举办跨年庆祝活动，但是因为场地所限，只有抢到门票的幸运儿才能进入剧场欣赏一些室内的表演，远不如紫金港的露天舞台热闹。听闻今年的「新年狂欢夜」校长要唱《龙的传人》，我便更加地期待。&lt;/p>
&lt;p>然而事与愿违。在周六早上，在参与完这学期最后一次科研项目的讨论会后，指导我们项目组的博士生学姐告诉我们，我们需要在 31 日前完成这一篇还没有修改完的论文，因为马上就要截稿了。这一句话彻底打乱了我的计划。作业？复习？活动？都往后放一放吧，论文才是最重要的。我从周六下午开始，几乎每半天交一次论文，学姐修改完成后反馈给我们，我们再接着修改，就这样拼死拼活地改到了 1 月 2 日才改到「能看」的地步。&lt;/p>
&lt;p>我们的项目研究其实不算难，已经做了九个月了，研究的内容有理有据，其实将整个研究过程严谨地描述一遍就可以，但是难就难在如何分析得到的结果。研究结果就摆在眼前，我们虽然查阅了很多文献，却仍然写不出什么合理的解释。每次修改完一个版本的论文后，就会发现新的问题。这就像给一个已经破的不行的衣服打补丁，缝好了一处，旁边的一处又破了。在论文修改期间，我反反复复重新画了三遍以上的配图，数据也修改了很多遍。配图方面，因为我编写了一个比较脑残的程序，在要反反复复跑很多次程序才能生成其中某一个配图，所以我很不愿意重新画图。这篇论文中总共有十张图，每一张图的字形、字体大小，线条的粗细都要保持一致，这就很令人头疼。数据方面，在初稿中我对所写的公式和数据没有认真核查，出现了一些错误，直到最后几天才发现这些错误，才急急忙忙地修改。数据一定不能错，为了防止再有什么错误发生，我对整篇论文一个字一个字地核查了一遍，才放下心来。&lt;/p>
&lt;p>我没想到 2019 年的年末竟然是和一篇论文共同度过的。每天我都在担心微信弹出消息让我继续修改论文，每天我的神经都维持在高度紧张的状态，内心很压抑，以至于前几天夜里，我还做了个噩梦，梦到凌晨五点接到电话让我去修改论文……因为这是我第一次完整的写完一篇科技论文，所以对于论文各部分内容应该怎样写还不熟悉，写出来的文章，我自认为也就一般般吧。&lt;/p>
&lt;p>因为修改论文，我错过了马拉松，错过了新年狂欢夜。虽然我抽空参加了光电学院的新年晚会，不过因为心中还绷着一根弦，没能好好享受那个夜晚。我不禁回想起大一那年，「新年狂欢夜」，我还和远在天大的好友视频聊天，让她看一看这隆重的庆典。今年，什么都没有了，只有孤独寂寞相伴。新年夜不狂欢。修改完论文后，我才有了空闲时间写作业。复习，还是推到下个周末吧。在校论坛看了校长在「新年狂欢夜」上放开歌喉，大声欢唱《龙的传人》，操场上人们排着队吃烤全羊，想必紫金港的同学们经历了一个热闹非凡的夜晚吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/new-year-night-2020/" target="_blank" rel="noopener">https://guanqr.com/life/school/new-year-night-2020/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/research/">科研</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
冬季，雨，北高峰</title><link>https://guanqr.com/life/travels/opt-trailwalk/</link><guid isPermaLink="true">https://guanqr.com/life/travels/opt-trailwalk/</guid><pubDate>Sat, 21 Dec 2019 18:16:40 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">毅&lt;/span>行是浙大人的朝圣之旅。我曾参与过一次校友会组织的春季毅行，三千人的队伍，从玉泉老和山出发，徒步翻山越岭，终点是之江钟楼。沿途可以欣赏到幽静的山涧、寺庙钟声和茶园风光。冬至前日，我和学院里的一些同学一起，进行了一次短程的毅行，目的地是北高峰。&lt;/p>
&lt;p>杭州的冬季经常是连绵不断的雨天。每一年到十二月份的时候，杭州就会把积攒了一整个秋冬的雨水倾泻下来。似乎只有到入春后才会宁静，因此我们的心情也没有晴日那么开朗。雨天的毅行，增加了一丝危险紧张的氛围，是一次独特的体验。&lt;/p>
&lt;p>路途中最艰难的部分要属玉泉校区图书馆后上山的那七百级台阶。想象一下你需要一口气爬七十层楼那么高。因为平时锻炼的时间太少了，身体素质也没以前那么好，在我咬着牙爬了五百级台阶的时候，腿已经酸痛无比，我喘着粗气，只能倚靠在旁边的树边休息。我想这么累其实还有一个原因，我还需要用一只手撑着伞，这样身体两边的平衡性就不太好，更容易累。七百级台阶就像是毅行的入门考验，只有通过考验的人，才能继续前行。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/opt-trailwalk-0.jpg" alt="opt-trailwalk-0.jpg">&lt;/p>
&lt;p>登上七百级台阶后，才是真正的征程。山上的路，都是用石头铺的斜坡路，雨天路滑，这样的路更难行走。在山林中，飘荡着浓浓的雾气。林中多是常青的树种，冬季依然保持着翠绿，但因为寒风与雨水，很多绿叶都掉落下来。不打伞了，我把伞收了起来，让雨水尽情地滴落在我的头上，听着大自然的气息，内心更加宁静。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/opt-trailwalk-1.jpg" alt="opt-trailwalk-1.jpg">&lt;/p>
&lt;p>在北高峰，如果天气晴朗的话，可以俯瞰杭州城的模样——但是我们眼前只有浓浓的雾气，有些可惜。我还没有在北高峰上看过杭州。山顶有座寺庙，庙前修建了一座信号塔，二者在同一画面中的样子有些滑稽，毕竟一个是唯心的信仰，一个是唯物的科技。寺庙的前面还有一座钟，三十元钱可以敲钟九下，我并不知道这九次钟声到底有什么含义。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/opt-trailwalk-2.jpg" alt="opt-trailwalk-2.jpg">&lt;/p>
&lt;p>下山的时候，我们乘坐了北高峰的缆车，灵隐寺距离这里并不远，我本想前去走个形式拜一拜，祈祷自己接下来的一个月事事顺利，不过还是走了。返校的时候我们叫了辆出租车，司机看我们是学生，问我们到这里来干什么，我说来爬山。他笑了笑说，他以为我们是来烧香拜佛的，年轻人不要学老一代的这一套迷信的思想。&lt;/p>
&lt;p>上一次校友毅行，走了四万多步，那时年轻气盛，在山上还跑着前进。那次毅行的路程长度约是这一次的四倍，我们在法喜寺吃了斋饭，在梅家坞穿梭于茶园间。后来由于种种原因，我没能再参与校友会的毅行活动，可能是因为有一种懒惰的心理，与其累一天，不如在床上多休息一会。现在内心早已没有两年前的那种激情。是什么让我参与了这次活动？我想可能是压抑在心中已久的阴霾吧。我想要宣泄自己低沉的情绪。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/travels/opt-trailwalk/" target="_blank" rel="noopener">https://guanqr.com/life/travels/opt-trailwalk/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/travels/">travels</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
那些没有被光抓走的人</title><link>https://guanqr.com/life/films/gone-with-the-light/</link><guid isPermaLink="true">https://guanqr.com/life/films/gone-with-the-light/</guid><pubDate>Tue, 17 Dec 2019 12:48:12 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">周&lt;/span>末去电影院看了《被光抓走的人》这部电影。从电影名字上看，似乎是一部科幻片，我觉得这更像是一部魔幻现实主义的电影。那束光，只是这个故事开始的导火索，谁也无法解释那束光到底是什么。甚至到了电影的结尾，那束光的原因、那些人随着光去了哪里，都没有一个明确的解释。&lt;/p>
&lt;p>被光带走的人，大多是一对一对的，所以有传言称，只有那些真正互相爱着的人才会被光带走。所以这些留在世上的人，那些夫妻，那些情侣，究竟是否爱着对方？或许他们本是爱着的，但因为这个传言，变得互相猜忌，最终导致情感破碎。这部电影就讲述了四类人在白光发生后的故事。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gone-with-the-light-li-nan.jpg" alt="gone-with-the-light-li-nan.jpg">&lt;span class="caption">※ 李楠&lt;/span>&lt;/p>
&lt;p>李楠在民政局门口等待丈夫胡建平来办理离婚手续，但她并没有等到丈夫的到来，她又重新戴上了那枚结婚戒指。白光发生后，她再也没联系上自己的丈夫，她觉得，自己的丈夫可能和别的女人一起消失了。小三何晓芬找到了李楠，质问她把胡建平藏在了哪里，这时候双方才意识到，胡建平可能是和其他的女人一起消失了。他们找到了一个又一个曾经和胡建平有过交往的女人，他们回忆着自己和胡建平生活过的点点滴滴。胡建平就戴着无数个面具，在每个人面前，都会换一张脸。何晓芬始终相信胡建平是爱着自己的，她也对胡建平爱得撕心裂肺。李楠却一直保持着冷静，她之所以沉住气和小三一起寻找胡建平到底是和谁一起消失的，是要看看究竟是什么样的女人，能被胡建平如此地爱。实际上，胡建平并没有消失，他开车经过大桥的时候，发生了车祸，掉江身亡。得知这一真相的时候，何晓芬有一些欣慰，在她的眼中，胡建平爱自己，她幻想着，如果胡建平还活着的话，可能就会和自己一起随光消失。李楠却独自一人来到江边惆怅，她摸着自己无名指上带着的那枚戒指——她还是爱着胡建平的，他也知道胡建平爱的人是自己。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gone-with-the-light-liu-jia-yi-wang-yang.jpg" alt="gone-with-the-light-liu-jia-yi-wang-yang.jpg">&lt;span class="caption">※ 刘佳一与王扬&lt;/span>&lt;/p>
&lt;p>当时在民政局门口的不止李楠一个人，还有一对小情侣，刘佳一与王扬。刘佳一的父母阻止他们在一起，因为他们觉得王扬是爱上了他们家的财产。她爬上了楼顶，想要跳楼自杀来证明自己对王扬的真爱。然而白光带走了她的父母，却没有带走他们。她不明白，自己的父母平时矛盾很多，难道他们就是相爱的人吗。自己这么爱着王扬，却没有消失，难道王扬不爱自己吗。她开始质疑他们之间的爱情，她忽然觉得自己的父母没错，王扬对自己不是真正的爱。王扬为了证明自己对她是真爱，从家中的阳台跳了下去。王扬没死，她在病床前，看着躺在床上的他。他们不愿意被这种爱与不爱的思想束缚，他们都愿意为对方死。他们意识到，爱与不爱是他们自己决定的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gone-with-the-light-kuai-zi.jpg" alt="gone-with-the-light-kuai-zi.jpg">&lt;span class="caption">※ 筷子&lt;/span>&lt;/p>
&lt;p>筷子是一个街头混混。白光发生后，他与自己的兄弟秦山失联，就去秦山的家中找他，可他只在秦山的家中发现了一滩血迹，他相信秦山被人害了。因为消失了很多人，街头很混乱，筷子趁机到一家超市中抢了几包烟，却被警察逮住，带到了警察局。在警察局，他遇到了一个文质彬彬的人前来自首。这个人称自己是社科院的研究员，他们研究员研究发现，白光带走的都是互相爱着的人，研究员却没有和自己的妻子一起消失，说明他和妻子之间没有爱情。回到家中，看到妻子做事不顺眼，就把她掐死了。研究员的语气很平静，似乎这是一件很寻常的事。筷子觉得这个人疯了。筷子告诉警察秦山失踪的事，希望警察能调查清楚。警察找到了嫌疑人，嫌疑人承认用刀捅了秦山，可因为没有人看到秦山是被捅后随着白光消失了，还是被捅后藏尸了，所以无法定罪。筷子不愿意接受这样的事实，一天晚上，嫌疑人出门的时候，他拿着刀子出现在面前。&lt;/p>
&lt;p>单单来看筷子的故事会觉得很奇怪，别的故事都是讲述两个人之间的爱情，这个故事中为什么只有一个人？筷子对自己的兄弟秦山之间的情感，超越了友情。他是个混混，他知道同性恋的事是不值得说出口的，他厌恶别人这么看待他与自己兄弟的感情。他可能知道秦山消失了，是和别的女人一起消失，秦山没有爱过自己，可他不愿意接受这样的事实，他更愿意相信，秦山爱着自己，他应该和自己一起消失，而现在自己没有消失的原因是，秦山被人杀死了。他一直抑制着自己的情感，用暴力掩饰伪装自己内心的脆弱。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gone-with-the-light-wu-wen-xue.jpg" alt="gone-with-the-light-wu-wen-xue.jpg">&lt;span class="caption">※ 武文学&lt;/span>&lt;/p>
&lt;p>武文学的一家是那么的幸运，没有一个人被白光带走；却又那么的不幸，没有一个人被白光带走。他们一家人是充满爱的，但是别人并不相信。武文学在白光事件后一直在为自己家里没有人消失作解释，他给妻子造假票，在饭局上谈论一些很丢人的事，让妻子很没面子。他和妻子之间的感情本来是好的，却被那束白光破坏了。武文学无意间看到妻子手机中和别的男人的对话，他很是气愤、不愿意面对现实。他找到这个和自己妻子聊天的男人，那个男人却劝他找一找自身的错误，武文学感到很迷惑。他从对白光理论的不屑，到现在越来越相信——原来白光带走的真的是相爱的人。在学校里，小韩老师对武文学很有好感，在武文学情绪低落的时候，小韩老师向武文学表白了。可能是心中太愤怒，武文学在当晚就开了房，等待着小韩老师的到来。但他并没有爱着小韩老师，在等待的时间里，他焦躁不安，甚至想要逃跑，他最后还是拒绝了小韩老师。他承认了自己的虚伪，展现了自己的真实。回到家中，他才意识到是自己的种种行为破坏了家庭的幸福。他选择相信自己的妻子。&lt;/p>
&lt;p>白光事件发生后，武文学与小韩老师在办公室里的一番话很值得思考：那束光到底是带走了他们，还是带走了我们。或许那些人与我们被那束光分离到了两个世界，或许那些人确实是相爱的人，那个世界是一个充满爱的世界。可那种爱究竟是否能长久呢？试想一下，他们在白光事件发生后，发现那个世界上只留下了相爱的人，他们感到很幸运。但随着时间的推移，他们逐渐对爱着的人感到厌倦，甚至不再爱。但是，我们这个世界的人们，却依然能自由爱着自己想爱的人，就算我们的爱没有那么强烈，又何妨？爱是我们自己创造的，不是那束光能决定的。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/gone-with-the-light/" target="_blank" rel="noopener">https://guanqr.com/life/films/gone-with-the-light/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/death/">死亡</category><category domain="https://guanqr.com/tags/family/">家庭</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/magical-realism/">魔幻现实</category></item><item><title>
一个卡片相机</title><link>https://guanqr.com/life/ideas/a-card-digital-camera/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/a-card-digital-camera/</guid><pubDate>Wed, 11 Dec 2019 17:01:26 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">前&lt;/span>些日子从抽屉里翻出了我的卡片相机。这是我刚入学的时候从家带过来的相机，当时想着我要拿个相机记录我的校园生活，为自己留下点青春的回忆，可是现在再也没见过有人使用卡片相机了。随着技术的提升，手机的摄像功能越来越强大。论相机使用的傻瓜程度，卡片相机已经比不过手机了。而真正玩摄影的人，肯定会掏钱去买昂贵的单反与各种镜头。想想这件事就觉得有些可笑——我一个光学专业的人，深入学习过相机的成像原理，镜头结构，以及像差的计算分析，却没怎么摸过单反相机。&lt;/p>
&lt;p>我从大学入学开始，就没用过这个卡片相机。因为它没电了。没电就充电啊？然而这个相机的充电插头是英标的，普通的插座根本无法充电。当时没想着买个转换头，因为手机照相完全够用了，我也不是摄影重度爱好者，不那么追求图像的色彩画质和畸变程度。然而我却在大三的一个下午，把在抽屉里躺了很长时间的它拿了出来，从网上买了个转换头，给电池充满了电。我想继续用相机拍些校园的风景，还有一年多就毕业了，想留下点回忆。&lt;/p>
&lt;p>我有三张储存卡，两张小容量的用来拍照片，一张大容量的用来拍视频。相机里存储着我那些年最美好的回忆。那年冬天的第一场大雪来得太突然，柳叶还未泛黄落下，大雪就已经覆盖了悦宁湖畔，我和很多同学一样，在自习课下课后，奔向湖边，拿起相机，拍下了那一个傍晚。白雪中透过柳树的翠绿，那抹绿像是对寒冷的不屑。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yuening-lake.jpg" alt="yuening-lake.jpg">&lt;span class="caption">※ 雪中悦宁湖&lt;/span>&lt;/p>
&lt;p>那年学生艺术节，霏哥唱的《那些花儿》惊艳开场，刘正的京东大鼓表演压轴，还有校乐团演奏的欢乐颂。我用相机录下了全部的表演。那年清北之旅，早上从学校出发，八点多就到了清华大学的校史馆，那天细雨蒙蒙，走在清华园与北大未名湖畔，我听着教授讲解那段历史，被西南联大的办学精神感动到落泪，我也希望自己能在最好的青春时期挥洒汗水与热血。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/weiming-lake.jpg" alt="weiming-lake.jpg">&lt;span class="caption">※ 雨中博雅塔&lt;/span>&lt;/p>
&lt;p>那年班级换教室，我和她成了前后桌。她在学校住宿，马上要过生日了，她说希望能用我的相机记录她过生日的情景，我答应了她。我的相机里就多了很多她眼中的校园：清晨的天空、午餐的食堂、夜晚的宿舍楼、新交的朋友。我和她成为了高三强压下的精神伴侣。高考后的那个暑假，我跟团来到了大西北，陕西、甘肃、青海。我那年的夏天，我看过鸣沙山上的日落，看过青海湖上的彩虹与日出，还看过山间的油菜花田，水天相接的茶卡盐湖。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/caka-salt-lake.jpg" alt="caka-salt-lake.jpg">&lt;span class="caption">※ 茶卡盐湖&lt;/span>&lt;/p>
&lt;p>那些我认为微不足道的过往，却成为了现在最值得怀念的故事。&lt;/p>
&lt;hr>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>天的课堂上，忽然回忆起小时候在社区里生活的故事。曾经社区里举办的一场场婚礼，社区的盘古队打着节拍奏着乐，新郎登上新娘家的房子来娶新娘，边敲门边往门里塞着红包。等新娘下楼后，新郎牵着新娘，两个小孩抓着新娘的婚纱向前走，盘古队在后面奏乐。社区里的孩子们都来围观，哄抢者撒向空中的喜糖。曾经和社区里的小伙伴们一起玩耍。那时仿真玩具枪还没有被禁，我们从家中背来各式各样的玩具枪玩枪战游戏。有段时间悠悠球还有陀螺很流行，我们就比试谁悠悠球玩的花样最多，陀螺转的时间最长，我们把陀螺的各种零件都换成了金属来增加惯性。社区里经常施工，我们就用路边的水龙头接上一盆一盆的水，倒在施工用的沙子上，做着自己心中最霸气的城堡。&lt;/p>
&lt;p>小时候的各种童趣之事都没有相机的记录，或许会随着时间慢慢淡忘。那些老照片中的故事，不管是酸甜苦辣，现在品味起来，全都变成甜的了吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/a-card-digital-camera/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/a-card-digital-camera/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/family/">家庭</category><category domain="https://guanqr.com/tags/youth/">青春</category></item><item><title>
竺老校长的两个问题</title><link>https://guanqr.com/life/school/two-questions-from-ckc/</link><guid isPermaLink="true">https://guanqr.com/life/school/two-questions-from-ckc/</guid><pubDate>Sat, 07 Dec 2019 23:09:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;blockquote>
&lt;p>诸位在校，有两个问题应该自己问问，第一，到浙大来做什么？第二，将来毕业后要做什么样的人？&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/p>&lt;/blockquote>
&lt;p>从我们迈进浙大的那一刻起，竺可桢校长的两个问题就一直伴随着我们。这两个问题，刻在了紫金港校区大门前的石头上，印在了新生报到注册的信息表上，还出现在了每一次的开学典礼上。已经在浙大度过了三年，对于这两个问题该如何回答，我想说说我自己的看法。&lt;/p>
&lt;p>大一刚入学的时候，每个人都怀揣着美好的愿望，希望在大学的四年中做点什么有意义的事。还记得当初信息大类确认专业的时候，同学们争抢着计算机学院的专业名额，不论是「计算机科学与技术」、「软件工程」还是刚刚建起的「信息安全」，只要能挤进计算机学院的大门，就是胜利——我在那时候才了解到原来计算机专业是如此的热门。但是我并没有选择它，我的第一志愿选择的就是光电信息科学与工程，这一在信息大类中最依赖物理学，相对比较冷门的专业，偏向科研，必须拿到硕博学历才有比较好的工作。很多人对像我这样第一志愿就选光电的人感到不解，「既然都来到信息大类了，冲一冲计算机不好吗，选光电这一劝退专业，脑子有问题吧」。但是我觉得，光，是宇宙中最为耀眼，最令人着迷的事物。他们选择他们想要走的道路，我只是跟随自己的内心罢了。&lt;/p>
&lt;p>有一类人，他们在学习上付出了很多，努力刻苦，成绩优异，每一年都能获得各种奖学金和荣誉证书。可他们又似乎并不是那么会学习——至少在我眼中不是。他们很聪明，但他们的目标只是父母给他们的目标。选课的时候，父母陪在了他们身边，指导者他们应该选择什么课程；他们经常会收到父母写给他们的学习建议；选专业的时候，父母给他们说，选计算机，「钱」景好。他们可能觉得自己在第一次分专业的时候，竞争不过别人，就选择了其他专业，然后通过努力学习，进入了「竺可桢学院」，最后顺利转到了「计算机科学与技术」。他们听从了父母的建议。我以为当初，他们选择的专业就是他们心之所向，谁知道，他们只是把这个专业当成跳板而已。他们只是在盲目的学习，他们只是在完成父母给自己的一项又一项的任务，他们成绩优异只不过是因为他们擅长完成父母的任务而已。那么脱离了别人给自己的目标后，自己的目标又是什么呢？&lt;/p>
&lt;p>还有一类人，他们同样在学习上付出了很多，努力刻苦，成绩优异，每一年都能获得各种奖学金和荣誉证书。他们有自己的目标——去阿里、去华为，赚钱，在杭州买一套房，安居乐业。每次听到他们谈理想的时候，他们都会说出诸如此类的话。他们的目标和那位学长一样。他们最初选择了控制、信电，或者和我一样的光电专业。他们也只是把这些专业当作跳板而已。每一学期在计算机学院官网的公告栏里的转专业学生名单公示中，都会出现几个熟悉的名字，他们每一学期都在尝试转到计算机学院，有些人可能运气好一点，转成功了，有些人缺少了好运气，一次又一次地失败，却又在一次又一次地尝试，甚至把期望寄托在考研上。他们不屈服于现状，一直在为将来转计算机而努力。&lt;/p>
&lt;p>当然，还有一类人，他们同样在学习上付出了很多，努力刻苦，成绩优异，每一年都能获得各种奖学金和荣誉证书。他们，是我真正欣赏与佩服的人。他们对所学的知识力求全部掌握，书中的每一个公式都要自己推导一遍，在实验中，出现的任何一个问题都会认真思考分析原因。从大二开始，他们就主动联系了学院的老师，进入实验室进行专项课题研究，大量的科研任务对他们的学习成绩没有任何影响。他们对于自己的未来有很好的规划。正是他们一丝不苟的学习态度和朝着自己理想努力拼搏的精神，让他们取得了优异成绩。他们的思维很活跃，我相信，如果他们选择学习计算机，成绩也会排在前几名，将来就业机遇会更好，前景也会更好，可他们却选择留在光电——因为他们和我一样，都是热爱光学的人。&lt;/p>
&lt;p>我认为任何专业都是值得学习的专业。近些年来，校论坛中有很多「喷壶」，高度吹捧计算机的成功理论，称其他专业为「劝退专业」，成功与劝退的判断标准就是岗位的需求量与薪水的高低，所有没有进入计算机专业领域的人，都是因为他们没有这个实力。如此的做法逐渐形成了一条专业鄙视链，他们带着计算机高高在上的帽子，嘲讽一切学科。可悲的是，身在「劝退专业」中的人，也在叹息自己的处境。每一个领域都需要新生力量的注入，因自己拥有高薪专业而嘲讽其他专业的同学，似乎并没有思考过社会的发展并不只是需要计算机人才。我的身边存在一部分人，心中是没有明确目标的，他们只是因为哪个领域热门而选择哪个专业，内心并没有一个明确的方向，就像一只随波逐流的小船，他知道，湍急的河水会带着他奔向大海，但到了汪洋大海之后呢，你又能够到哪里去？&lt;/p>
&lt;p>学校每一年在科研上的支出很多，我相信老师们更愿意自己的学生能在学术领域上取得令人瞩目的成就，而不是为了一个毕业文凭，接受一家互联网企业的 offer。可能是因为我太年轻，对于一些事物的看法太片面，导致我的想法很天真——当然我知道科研是很艰苦的，与其承受这样的折磨，不如 996 福报来得痛快。可能是因为我喜欢孤独的感觉吧。常年孤独一人，很少与人交流，我不喜欢混在在人群中，不喜欢参加聚会宴席，我喜欢艰苦的生活环境，我最敬佩的是当年一批又一批走进戈壁隐姓埋名的科研工作者们，我也向往那一望无际的戈壁滩。&lt;/p>
&lt;p>每一年都有很多人为了成为选调生而努力，他们希望有稳定的工作，稳定的收入。我以为他们会选择到西部地区工作，可他们只愿意留在浙江、江苏一带。每一年，学校都会举行表彰大会，表彰那些进入军工企业部门工作的学生……我以为身为浙大学子的我们，到军工单位工作是再正常不过的想法，我以为我们身上还有着所谓的「家国情怀」&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>当然，我不是什么圣人，钱重要，生活质量重要，人不爱钱不爱仕是不可能的。但是，我们仍需要思考：既然我们已经拥有了国内社会相对较好的教育资源，那么在我们毕业之后，是不是也要谈点「家国情怀」，为这个社会，这个国家做些什么？如果我们占据了这个社会上最顶层的资源的群体却还是只会去考虑自己的个人利益，争着去做精致的利己主义者，凡事都只考虑着将自己的利益最大化，为了钱而奋不顾身；没有改变世界、推动社会向前发展的欲望，嘴里仍旧喊着「我所做的这一切都是被逼的，我要恰饭啊，我自己都活不下去，哪管得了别人」、「我没有错，错的是这个世界」，那我们的这个国家，还能指望谁？&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>我得承认，我的学习成绩并不太好，思维没有别人那么活跃，每天脑子中装着的是不存在的世界。在这样一个「唯成绩论」的时代，我没有地位，没有发言权。或许，我们专业的这一群人当中，只有极少数优秀的人最终才会在科研领域取得令人瞩目的成就，而剩下的人，会向现实低头。就算曾经拥有多么崇高的理想，最后也要屈服于现实。但我们至少追逐过自己的理想，不会留下什么遗憾。&lt;/p>
&lt;p>谈「家国情怀」容易，困难的是，在你认清现实之后仍能在心中保持这股「家国情怀」。&lt;/p>
&lt;p>今年十月份，正是新生分专业的时候，听说有一名新生因为没有被计算机学院录取，准备退学复读。因为他不知道如果不学计算机，将来还有什么意义——这样的人，我觉得有些可悲，却又对他感到一丝同情。&lt;/p>
&lt;p>说了这么多，最后还是要回到竺可桢校长的两个问题上。竺可桢校长的两问，问的就是人生目标，问的是今年和明天要做什么。竺老校长在当年的演讲中，给出了这两个问题的答案：&lt;/p>
&lt;blockquote>
&lt;p>第一，诸位求学，应不仅在科目本身，而且要训练如何能正确地训练自己的思想；第二，我们人生的目的是在能服务，而不在享受。&lt;/p>&lt;/blockquote>
&lt;p>我也有自己心目中的答案。&lt;/p>
&lt;p>到浙大来做什么？&lt;/p>
&lt;p>首先是学习专业知识，为将来的专业科研打下基础；学得要广，开拓自己的视野。其次，发展综合素质，多参与社会工作与活动，提高自身的工作能力。&lt;/p>
&lt;p>将来毕业后要做什么样的人？&lt;/p>
&lt;p>为光学发展献出自己的一份力量。哪怕这份力量微不足道，但我也能满意地说出，我把我的青春奉献给了我最爱的学科领域。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>《科学的方法，公正的态度，果断的决心》，竺可桢，1936年&amp;#160;&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>本来我想在这里说是缺少「远大抱负」，但后来想了想，我觉得任何为某一目标而奋斗的人都能称得上是有「远大抱负」的人。&amp;#160;&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>今年年初的时候，在校论坛里，有人谈到了「家国情怀」，我很欣慰地看到有人的观点与我相同。&amp;#160;&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/two-questions-from-ckc/" target="_blank" rel="noopener">https://guanqr.com/life/school/two-questions-from-ckc/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/choice/">抉择</category><category domain="https://guanqr.com/tags/research/">科研</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
重构博客的友情链接</title><link>https://guanqr.com/tech/website/add-blogroll/</link><guid isPermaLink="true">https://guanqr.com/tech/website/add-blogroll/</guid><pubDate>Wed, 04 Dec 2019 21:08:01 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/blogroll-new-style.png" alt="blogroll-new-style.png">&lt;span class="caption">※ 全新的友链设计&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">就&lt;/span>在昨天晚上，我看着我的博客友情链接的设计，觉得是时候改进一下了。因为我的友链在设计与添加两个方面都有一定的缺陷，在设计方面，与主题风格有些不符，而且由于宽度过窄，网站的说明文字字数受到了很大的限制，最多显示十二个汉字；在添加方面，因为没有在 HTML 中添加任何复杂语句，每次添加新友链的时候，都需要将网站名称、网站地址等基本信息插入到已有的标签中，操作过于繁琐。于是我参考了几个博客的友链设计样式与源码，自己构建了一个全新的友链页面。&lt;/p>
&lt;p>目前绝大多数博客主题，不论是 Hexo 还是 Hugo 的主题，很少会自带友链页面模板的。就拿 Hexo 的 NexT 主题来说，该主题将友链放置在了侧栏中，只能够显示友链的名字，不能显示头像与博客的说明，导致友链的地位显得有些「低下」，而且空间大小受到了限制。我更喜欢单独将友链放置在一个页面中，这样就能向来访我的博客的人们&lt;em class="emphasis-point">郑重&lt;/em>介绍我的朋友们和我喜欢的网站有哪些。&lt;/p>
&lt;h2 id="以前的友链设计">&lt;a href="https://guanqr.com/tech/website/add-blogroll/#以前的友链设计" class="anchor-link" aria-label="以前的友链设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>以前的友链设计&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/blogroll-old-style.png" alt="blogroll-old-style.png">&lt;span class="caption">※ 以前的友链页面&lt;/span>&lt;/p>
&lt;p>之前的友链设计我参考的 &lt;a href="https://bestzuo.cn/" target="_blank" rel="noopener">Sanarous&lt;/a> 这位博主的文章。他的博客采用的是旧版的 NexT 主题，从他的博客可以看出，他也是参考了很多博主的教程对博客进行了个性化改造，所以这个友链设计到底出自谁手，我也不太清楚😅。当初采用这个友链设计就是因为我只找到了这一种配置比较简单的教程。在主题下添加一个友链的模板，然后新建一个友链页面，引用该模板，再在配置文件中依照 YAML 语法添加每个博客的链接即可。但是现在我将博客从 Hexo 迁移到了 Hugo，博客主题结构发生了变化，直接将原来的友链添加方法「照搬」过来显然是不行的。由于当时也没有太多时间研究主题的文件结构，为了能快速建好友链页面，直接采用了最傻瓜的办法：将每个博客的信息用 HTML 语言一条一条地写进友链的 Markdown 文件中……😕&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/blogroll-old-html.png" alt="blogroll-old-html.png">&lt;span class="caption">※ 采用最傻瓜的办法添加友链&lt;/span>&lt;/p>
&lt;h2 id="全新的友链设计">&lt;a href="https://guanqr.com/tech/website/add-blogroll/#全新的友链设计" class="anchor-link" aria-label="全新的友链设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>全新的友链设计&lt;/h2>
&lt;p>这次我对友链页面的重构，适配了目前我采用的 Hugo 博客框架与 MemE 博客主题。而且可以采用添加网站信息至独立的 TOML 文件中，通过页面调取文件中的各项信息生成友链。比之前的傻瓜方式便捷了很多，而且文件结构层次分明，方便管理🍻。&lt;/p>
&lt;p>首先是添加友链模板。为了避免因对原主题文件进行大规模修改而进行文件的大量替换，方面以后的主题更新，这里为友链创建一个全新的页面模板。首先在博客根目录下的 &lt;code>layouts&lt;/code> 文件夹（没有该文件夹请自建）下创建一个名为 &lt;code>blogroll&lt;/code> 的文件夹，在该文件夹下创建名为 &lt;code>blogroll.html&lt;/code> 的模板文件。主题中的页面模板为 &lt;code>~/themes/meme/layouts/partials/pages/&lt;/code> 目录下的 &lt;code>post.html&lt;/code> 文件，可参照该文件内容进行添加。不过需要注意的是，随着主题的更新，该文件的内容可能会发生变化，目前我添加的代码如下所示。如果你使用的主题版本和我的不一样，请自行修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/layouts/blogroll/blogroll.html --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ define &amp;#34;main&amp;#34; }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $Deliver := . -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">main&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;main single&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;main&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;main-inner&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">article&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;content post&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">h1&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;post-title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .Title }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">h1&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ if .Site.Params.displayPostDescription }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ with .Params.description }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- $raw := . -}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;post-description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ partial &amp;#34;utils/markdownify.html&amp;#34; (dict &amp;#34;Deliver&amp;#34; $Deliver &amp;#34;raw&amp;#34; $raw &amp;#34;isContent&amp;#34; false) }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;post-body&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range .Site.Data.blogroll }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range sort . &amp;#34;weight&amp;#34; }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;blogroll&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;avatar&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .avatar }}&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;friend&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .url }}&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;name&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .name }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;excerpt&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .description }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ partial &amp;#34;utils/content.html&amp;#34; . }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">article&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ partial &amp;#34;components/comments.html&amp;#34; . }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">main&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里我删减了许多没有用到的组件。代码中的核心部分如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">{{ range .Site.Data.blogroll }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ range sort . &amp;#34;weight&amp;#34; }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .url }}&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;blogroll&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;avatar&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ .avatar }}&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;friend&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;name&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .name }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;excerpt&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ .description }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ end }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{ end }}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这里需要调用博客根目录 &lt;code>data&lt;/code> 文件夹下的 &lt;code>blogroll.toml&lt;/code> 中的数据，所以先在 &lt;code>data&lt;/code> 下新建 &lt;code>blogroll.toml&lt;/code> 文件，然后在该文件中添加友链的各项基本信息，比如：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">blogroll&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;荷戟独彷徨&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.com&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">avatar&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.com/icons/android-chrome-512x512.png&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">description&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;爱光学，爱生活，爱创造&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">blogroll&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;荷戟独彷徨&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">url&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.com&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">avatar&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://guanqr.com/icons/android-chrome-512x512.png&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">description&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;爱光学，爱生活，爱创造&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">weight&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="mi">2&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>weight&lt;/code> 表示该友链的权重，用来排序。然后当然是需要新建一个友链页面，运行命令 &lt;code>hugo new blogroll/_index.md&lt;/code>。接着运行 &lt;code>Hugo server -D&lt;/code> 检查友链是否显示出来，如果显示正常，那么就可以继续添加 CSS 样式。在自定义 CSS 样式的文件 &lt;code>custom.scss&lt;/code> 中添加下面的样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-scss" data-lang="scss">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 文件位置：~/assets/scss/custom/_custom.scss
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nc">.blogroll&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">padding&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">solid&lt;/span> &lt;span class="ni">transparent&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">border-bottom&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="ni">dashed&lt;/span> &lt;span class="nf">var&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="ni">color&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="ni">contrast&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">low&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">transition&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">all&lt;/span> &lt;span class="mf">.5&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.friend&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-decoration&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-overflow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">ellipsis&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">overflow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">white-space&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">nowrap&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.name&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.375&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.excerpt&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">font-size&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="mf">.875&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">text-overflow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">ellipsis&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">overflow&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">white-space&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="ni">nowrap&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nc">.avatar&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="k">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">height&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="k">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">margin&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="k">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="na">z-index&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这样一个全新的友链页面就添加完成啦。为了将友链的页面样式和使用 TOML 记录友链信息，我花了一晚上的时间去研究🧐，功夫不负有心人，最终还是完成了它。所以写这一篇文章的目的，一是为了记录我的心血，二是为了分享这一不太复杂的成果😆。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/add-blogroll/" target="_blank" rel="noopener">https://guanqr.com/tech/website/add-blogroll/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
浅谈微信推文编辑</title><link>https://guanqr.com/life/ideas/wechat-article-typography/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/wechat-article-typography/</guid><pubDate>Sat, 30 Nov 2019 17:02:06 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/web-typography-terminology.png" alt="web-typography-terminology.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">因&lt;/span>为我在院级学生会里负责运营微信公众号，经常需要编辑微信推文，而微信公众平台的后台管理以及推文内容编辑方式繁琐、费时费力，所以，久而久之我便对微信推文的编辑产生了一种「厌恶」。当然这里的「厌恶」并不是对于这份工作的「厌恶」，而仅仅是对于微信后台的反人类设计感到「厌恶」。在这里我们暂且不说微信公众平台的每一步操作都要管理员扫描二维码授权是为了安全；也不说普通公众号每日只能发送一次消息，且发出的消息仅能修改几个字是为了稳定与审核的方便；在这里我们仅仅讨论由微信推文编辑的反人类操作引发的对文章排版格式的思考。&lt;/p>
&lt;h2 id="微信推文编辑的反人类操作">&lt;a href="https://guanqr.com/life/ideas/wechat-article-typography/#微信推文编辑的反人类操作" class="anchor-link" aria-label="微信推文编辑的反人类操作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>微信推文编辑的反人类操作&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-backstage.png" alt="wechat-backstage.png">&lt;span class="caption">※ 微信公众平台素材管理界面&lt;/span>&lt;/p>
&lt;p>微信公众平台的推文编辑功能有限，如果仅仅在该平台上进行推文的排版编辑，那么可能一篇推文的最终模样就是白底黑字，上方或者下方贴上几幅生硬的图片。或许你本想在每一段落前空上两格实现段首缩排，谁知道在手机上浏览的时候就变成了空四个字格。因为原生的后台编辑功能是如此的简陋，所以便诞生了一些第三方编辑平台，比如秀米。我相信各位负责微信公众号运营的人都知道秀米这类平台的存在，因为基本上所有人都会使用第三方平台编辑推文。这些平台提供了多样化的组件，你可以插入个性化的标题，带底纹的文字段落，带花纹边框的图片。你甚至可以控制文字与图片的显示位置与角度——只要你能想到的，自然就能做到。但似乎秀米有一个缺陷，就是无法插入代码块，而微信自家的管理平台是有这个功能的，也许秀米的管理者并没有考虑过有人会在微信推文里插入代码吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/xiumi-backstage.png" alt="xiumi-backstage.png">&lt;span class="caption">※ 在秀米上进行推文编辑&lt;/span>&lt;/p>
&lt;p>当你在秀米上编辑好了一篇推文，可以直接授权到公众号将文章搬运到微信公众平台的素材管理中，或者采用复制粘贴的方式，将所有的组件粘贴到新建的素材中。明明微信官方可以在自家平台上实现这样的功能，现在非要我们使用第三方平台才能实现自己想要的排版样式，微信官方似乎到现在为止也并没有什么表态。多样化的组件和自由的排版方式为推文编辑带来便捷的同时，也带来了很多排版方面的混乱。&lt;/p>
&lt;h2 id="微信推文的类型与格式规范">&lt;a href="https://guanqr.com/life/ideas/wechat-article-typography/#微信推文的类型与格式规范" class="anchor-link" aria-label="微信推文的类型与格式规范">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>微信推文的类型与格式规范&lt;/h2>
&lt;p>推文的类型有很多种，这里我举一些学校里常见的例子：&lt;/p>
&lt;ul>
&lt;li>社团组织纳新推文&lt;/li>
&lt;li>举办活动的宣传推文&lt;/li>
&lt;li>活动结束后的总结推文&lt;/li>
&lt;li>与党政工作有关的推文&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/four-kinds-of-articles-in-wechat.png" alt="four-kinds-of-articles-in-wechat.png">&lt;span class="caption">※ 不同类型的推文&lt;/span>&lt;/p>
&lt;p>不同类型的推文，风格当然是不一样的，像活动总结与党政宣传这样类型的推文风格肯定是比较严肃的。在排版上，尽量不要带有花里胡哨的修饰贴图。文章主体段落部分需要采用「两端对齐」的方式，文字大小也要控制在 14 字号左右，文字间距为 1.5 或 1.6 倍。而社团组织的纳新推文或者活动宣传的推文基调应该比较轻松活泼，形式各异。比如一句话成段，文字「居中对齐」；或者采用二人对话的形式，再加上一些惊叹或者可爱的语气词。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/smallopt-edit-standard.png" alt="smallopt-edit-standard.png">&lt;span class="caption">※ 「光小电」编辑规范&lt;/span>&lt;/p>
&lt;p>在去年，我们宣传部的前部长编写了一本详细的小编手册，明确规范了推文的排版细则，统一了我们学院公众号的推文格式。在我看来，这本小编手册对推文排版的格式要求已经很详尽了，能够很好的规范推文的格式。不过因为这些格式与秀米的默认格式不同，所以在每次对推文进行排版的时候，都要花费大量的时间在调整格式上。比如秀米默认的字号的 16，行距为 1.6，而我们的规定字号是 14，行距为 1.5；又比如，段与段之间需要空一行，段落与图片之间也要空一行。&lt;/p>
&lt;p>当然，这本小编手册中也有我认为描述不够详尽的地方和不合理的地方，有些不合理之处甚至因为使用的人多了，便成为了微信推文的一种规范。比如段首缩排与段间距式，半角与全角符号的使用等等。&lt;/p>
&lt;h2 id="一些值得探讨的排版问题">&lt;a href="https://guanqr.com/life/ideas/wechat-article-typography/#一些值得探讨的排版问题" class="anchor-link" aria-label="一些值得探讨的排版问题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>一些值得探讨的排版问题&lt;/h2>
&lt;p>首先说说段首缩排与段间距式之间的差别。段首缩排就是平时我们常见的开头空两个字格的形式，段间距等于行间距，这种排版常用于纸质书籍的排版。我们写论文、写实验报告的时候也会被要求采用段首缩排的格式。而段间距式则常用于网络媒体的文字书写，段首不进行缩进，段间距大于行间距，比如你现在看到的这篇文章。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/paragraph-indents-vs-margins.png" alt="paragraph-indents-vs-margins.png">&lt;/p>
&lt;p>正是由于我们过去常使用段首缩排的格式进行文章的书写，让我们错误地认为正确的排版模式都应为首行缩进。在我第一次在博客上写文章的时候，就总是思考如何能在段首精确地空上两格字格，因为在编辑文字的时候，使用键盘敲的空格不论是圆角还是半角，都并没有占到两格圆角字符的宽度。现在看来这种思考是一种多余的想法，网页采用段间距式排版的原因我认为主要有两点，一是为了方便阅读，二是技术简单。与纸质书籍横向翻页不同，网页是竖直方向的连续滚动，当网页快速滚动时，就使段落上下相连的段首缩排显得繁密易懵，而段落上下间隔的段间距则显得结构简明，更便于信息的快速传达；而网页的 HTML 代码与 CSS 样式对于段间距式的实现要比段首缩排简单得多。&lt;/p>
&lt;p>由于有这种每一段文字都要首行缩进的错误意识，导致在微信推文上出现了排版混乱的现象。既然为了段落分明而是用段间距式的排版方式，何必再使用段首缩排呢？二者混合使用的效果无疑是破坏了文章的完整程度，给人一种碎裂的感觉。&lt;/p>
&lt;hr>
&lt;p>其次，文章符号的使用也是一个值得探讨的问题。很多人在写文章的时候会乱用符号，逗号、句号、问号、括号、引号……究竟用的是全角还是半角？当然，我们都知道中文字符需要使用全角符号，然而，移动端打字的时候经常会出现一个问题，你在写了一句话后，想在后面加一个逗号，这个时候你看到键盘上有一个逗号字符，就使用了它，但是你却不会在意它到底是全角还是半角。符号的使用似乎并没有引起我们的重视——在碎片化阅读的时代，似乎很少会有人关注语句的停顿和关系划分了。&lt;/p>
&lt;p>如果你在一整篇文章中全部使用一致的标点符号，不论是全角符号还是半角符号，就算一篇中文文章中使用的全是半角符号，一般来说也没有什么大碍，但如果你在一段话中既使用全角符号，又使用半角符号，一定会造成混乱从而影响阅读。为了避免标点混用的现象发生，我们必须要明确在什么情况下使用什么样的标点符号是最合适的。&lt;/p>
&lt;p>现在请思考下面几个问题：&lt;/p>
&lt;ul>
&lt;li>&lt;code>'&lt;/code> 与 &lt;code>’&lt;/code>，文章段落中如果需要使用一个单引号，需要敲击键盘上的单双引号的按键输入。那么这个单引号到底是直的还是弯曲的，英文中的单引号、缩写词中的撇号和表示英尺的「撇」是同一个符号吗？&lt;/li>
&lt;li>&lt;code>&amp;quot;&amp;quot;&lt;/code> 与 &lt;code>“”&lt;/code> 与 &lt;code>「」&lt;/code>，当一篇文章中即有英文又有中文，而又都需要使用引号的时候，是使用半角全角双引号，还是使用直角引号？双引号的到底是直的还是弯曲的？&lt;/li>
&lt;li>&lt;code>-&lt;/code> 与 &lt;code>−&lt;/code> 与 &lt;code>—&lt;/code>，文章中需要表示一个范围——多少至多少的时候，连接前后数字的横线符号是键盘上加号左边的那个吗，这个键是「减号」吗，这个横线到底有多长？&lt;/li>
&lt;li>&lt;code>·&lt;/code> 与 &lt;code>•&lt;/code> 与 &lt;code>●&lt;/code>，文章中需要引入一个外国人的名字，姓和名之间的那个圆点是否是直接使用键盘左上角的那个键输入的，这个圆点到底有多大？&lt;/li>
&lt;/ul>
&lt;p>引号的使用问题，我认为是最普遍的问题。PlatyHsu 在他的一篇&lt;a href="https://sspai.com/post/45516" target="_blank" rel="noopener">文章&lt;/a>中说过，引号不是一个符号，而是一对符号，有前后之分；它们是双引号 &lt;code>“”&lt;/code>（U+201C 和 U+201D Left/Right Double Quotation Mark）或单引号 &lt;code>‘’&lt;/code>（U+2018 和 U+2019 Left/Right Single Quotation Mark），即所谓的「弯引号」。但是，键盘上却只有一个「引号」键，而且输入的也不是「正牌」的、弯曲的引号，而是垂直的 &lt;code>'&lt;/code>（U+0027 Apostrophe）和 &lt;code>&amp;quot;&lt;/code>（U+0022 Quotation Mark），即所谓的「直引号」。这种违反直觉的安排实际上是打字机时代的遗产：为了节省空间、减少机械结构，打字机的键位安排思路是「能少一个是一个」，而现代键盘则为了迁就习惯而将其原封不动地继承了下来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/usage-of-quotation-mark.png" alt="usage-of-quotation-mark.png">&lt;span class="caption">※ 不同引号在不同网页设定下的显示效果&lt;/span>&lt;/p>
&lt;p>总的来说，英文的引号应该使用「弯引号」。而对于中文来说，网页上输入的双引号经常会渲染成半角符号。因此推荐使用直角引号 &lt;code>「」&lt;/code>（U+300C 和 U+300D Corner Brackets）。不可否认，尽管国家标准规定中文引号的形态与西文相同，但直角引号在中文互联网上的人气似乎已经盖过了前者，成为了很多在线社区的成文或事实标准。对于弯引号而言，与冒号、分号等标点都有用于东亚文字的全角版本不同，弯引号缺少一个中文专用的版本。无论中文西文，弯引号都是同样码位上的同一对字符，其外形完全取决于字体。在中西文混排的场合，弯引号常常因为套用西文字体而显示为半角宽度，与汉字和其他中文标点差异很大，从而对排版效果产生不利影响。但是，直角引号的形态与方块字更加契合，在我国香港、台湾省地区和日本都是官方规范，这也为将其使用到简体中文提供了依据。&lt;/p>
&lt;p>对于连接号的使用问题，&lt;a href="https://zh.wikipedia.org/wiki/%E8%BF%9E%E6%8E%A5%E5%8F%B7" target="_blank" rel="noopener">维基百科&lt;/a>上有对不同长短的连接号详尽的说明。键盘上数字 &lt;code>0&lt;/code> 的右侧按键输入的是连字符 &lt;code>-&lt;/code>（U+2010 Hyphen-Minus），它的主要用途是将较长的西文单词断成两行。而连接号有一短一长两个，分别是 &lt;code>–&lt;/code>（U+2013 En Dash）和 &lt;code>—&lt;/code>（U+2014 Em Dash），它们的名字来源于活字印刷术语——「em」是金属活字的垂直长度，「en」则是前者的一半。较短的 en dash 用在各种数字、日期、年份、地名之间，它也用在一些由两个人共同提出的理论、概念中。至于较长的 em dash，它在英文中的作用很像中文的破折号，用于句中的插入语前后（类似逗号）、引出补充说明或列举（类似冒号）、标示中断或间隔等。在中文当中，连字符没有任何用武之地。而对于起连接作用的符号，国内标准将其细化为短横线、一字线和浪纹线三种，分别对应前面所说的 en dash、em dash，和 &lt;code>～&lt;/code>（U+FF5E Fullwidth Tilde）。至于三种形态的各自用途，国标的列举过于繁琐，简记方法是：一字线（em dash）和浪纹线可以互换，用于表示时间、地域、数字的起止；其他表示「连接」的场合都用短横线（en dash）。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/usage-of-dash.png" alt="usage-of-dash.png">&lt;/p>
&lt;p>间隔号的使用问题，&lt;a href="https://zh.wikipedia.org/wiki/%E9%97%B4%E9%9A%94%E5%8F%B7" target="_blank" rel="noopener">维基百科&lt;/a>上也有很详细的说明。&lt;code>·&lt;/code>（U+00B7 Middle Dot）与 &lt;code>•&lt;/code>（U+2022 Bullet）二者在不同字体下的渲染也不相同，有的时候会是全角符号，有的时候却是半角。而 &lt;code>●&lt;/code>（U+25CF Black Circle）如此夸张大小的圆点应该很少会有人去使用。间隔号的输入非常容易：大多数中文输入法将这个字符映射在紧邻主键盘区数字 &lt;code>1&lt;/code> 左边的按键上，直接按下即可输入。但事实上该符号的渲染会遇到与引号相同的问题——全角显示为半角。这个问题目前没有很好的解决方案。一些观点指出可以使用日文的 &lt;code>・&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/usage-of-middle-dot.png" alt="usage-of-middle-dot.png">&lt;/p>
&lt;p>对于其他的一些符号的使用规范，比如省略号、句号，这里不再进行讨论。在不同平台的输入法和键盘上，不同字符的输入方法也不太相同，因此在我们进行写作和文章编辑中，需要多多注意这些地方的细节。&lt;/p>
&lt;hr>
&lt;p>除此之外，我认为还有一个小小的问题值得思考：中英文混排时中文与英文之间是否要有空格？&lt;/p>
&lt;p>有一个在中英文中间插图空格的插件，名叫 &lt;code>pangu.js&lt;/code>。在这一个插件的说明中写道：&lt;/p>
&lt;blockquote>
&lt;p>汉学家称这个空白字元为「盘古之白」，因为它劈开了全角符和半角符之间的混沌。另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。&lt;/p>&lt;/blockquote>
&lt;p>我在浏览不同的网站时发现，有的人会在中英文之间插入空格，有的人却不会。这似乎并没有一个硬性的规定，不过由于汉字是全角，英文与数字是半角，二者之间插入一个空白会让文字在视觉效果上更为和谐。如果你经常使用 Microsoft Word 打字的话，就不会对这样的问题有感觉，因为该软件默认增大了汉字与英文之间的间距，目前在微信上也采用了这样的排版美学，所以不需要人为地进行空格处理。但是，在网页排版方面，不会有如此智能的渲染。就拿本篇文章来说，你会发现我在英文和中文之间添加了空格。如果我不说我添加了空格，或许你不会发现这一点，因为你早已习惯了 Microsoft Word 的排版方式。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/ideas/wechat-article-typography/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>以上这些思考并不仅仅是针对微信推文的编辑，更多的是在目前网页浏览中普遍现象的分析。可能这些思考太过于「吹毛求疵」，不过。合理的排版与正确的符号使用规则会让一篇文章更为美观。为了一篇完美的文章，多费点心思在排版上又有何妨？&lt;/p>
&lt;p>回到微信推文编辑的问题上，如果有机会的话，我会对前部长所编写的小编手册进行修订，添加更为详尽的使用规范。由于微信推文编辑的操作方式过于繁琐，而 Markdown 语法的使用能够节省大量文章排版的时间。我也期待微信公众平台在未来的某一天能够支持 Markdown 语法的写作方式。目前有一些使用 Markdown 语法进行推文编辑的神器，比如 &lt;a href="https://github.com/mdnice/markdown-nice" target="_blank" rel="noopener">markdown-nice&lt;/a>。如果你不是过于追求花里胡哨的排版，可以考虑使用此类工具。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/wechat-article-typography/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/wechat-article-typography/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/typography/">排版</category><category domain="https://guanqr.com/tags/wechat/">微信</category></item><item><title>
月夜下享受那份独特的安逸</title><link>https://guanqr.com/life/films/the-legend-of-1900/</link><guid isPermaLink="true">https://guanqr.com/life/films/the-legend-of-1900/</guid><pubDate>Wed, 27 Nov 2019 23:31:14 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-post.jpg" alt="the-legend-of-1900-post.jpg">&lt;span class="caption">※ 《海上钢琴师》&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">前&lt;/span>段时间听说《海上钢琴师》的 4K 高清修复版在国内上映，我便毫不犹豫地去学校附近的一家电影院观看了这部电影，虽然那家电影院没有 4K 放映厅，不过，在普普通通的银幕前，我依然感受到了这部电影的非凡。&lt;/p>
&lt;p>主人公是一个出生在游轮上的孤儿，因为正赶上新世纪，起名为 1900。他是一个钢琴天才，一直在船上为乘客们演奏各种风格的乐曲。他不仅在舞厅里为贵宾们演奏，也为在普通船舱中的平民演奏。他生在船上，死也在船上，他从未踏上过陆地，他似乎从未来到这世间。&lt;/p>
&lt;p>这部电影是以钢琴师的好朋友小号手麦克斯为第一视角进行叙事的。麦克斯为了谋生来到船上，作为乐队的小号手，结交到了 1900。他与 1900 一起，经历了船上的各种各样的事件。那艘轮船就是一个社会，生活着上层贵族与下层贫贱之人，他们都希望来到美洲大陆，开启新的人生。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-america.jpg" alt="the-legend-of-1900-america.jpg">&lt;span class="caption">※ 船上的人们迎接着美洲大陆&lt;/span>&lt;/p>
&lt;p>那是他们向往的新希望。一个夜晚，1900 独自在钢琴前演奏，一个面容憔悴，十分忧郁的意大利老伯来到他身边，哭诉着自己的过往。他乘坐这艘船来美国不是因为美国，而是为了舍弃过去的一些。他只生活在自己小小的一块土地上，没有踏上过城市的大街，他只剩下一个心爱的女儿，为了女儿，他决定走出去。他向往大海的辽阔，大海的声音。而 1900 从来没有听到过大海的声音，因为它生在海上。老伯说，生活是无限的，不能局限于自己那一小块空间，所以他决定开启全新的生活。1900 似乎有所思考。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-the-girl.jpg" alt="the-legend-of-1900-the-girl.jpg">&lt;span class="caption">※ 那个姑娘&lt;/span>&lt;/p>
&lt;p>1900 曾爱上过一个姑娘，那次初识，他正在录制自己唯一的一张唱片，他把自己内心的朦胧的爱演奏出来，他想要把这张唱片送给那个姑娘。在船的甲板上，他知道了这位姑娘是那位意大利老伯的女儿，可是他太犹豫不决又十分羞涩，他不知道自己这么做是否是正确的选择，错失了一次又一次的机会。直到最后，船停靠在港口，姑娘下船之时，他只说了句「祝你好运」，姑娘亲吻了他的脸颊，可是，他仍然没有送出那张唱片。他把那张唱片毁掉了，那是他唯一的一份爱情，他把这段爱情永远的埋藏在了心里。麦克斯将唱片的碎片藏在了钢琴里，这才将这段故事唯一真实存在的证明保存了下来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-love.jpg" alt="the-legend-of-1900-love.jpg">&lt;span class="caption">※ 甲板上的两人&lt;/span>&lt;/p>
&lt;p>电影中最让我印象深刻的情节有两处，第一处就是斗琴。「爵士乐的创始人」莫顿听闻这艘轮船上有一位传奇钢琴师，便想要和他比试演奏的技艺。但是 1900 在斗琴的开始阶段并没有将这此对决放在心上，这让很多船上的工人感到失望——他们都希望 1900 能为他们增添光彩，他们押注 1900 能赢得这场对决。第一回合，1900 弹奏了一首轻松柔和的乐曲，周围的人们大失所望。第二回合，1900 「复制」了莫顿的即兴演奏乐曲，甚至还有所改进，但周围仍唏嘘不断，这两回合的对决，让莫顿觉得 1900 在羞辱他，于是在第三回合，他弹奏了一首节奏急促，很秀技能的乐曲，他以为自己能赢得这场比赛，可是 1900 却真正展示了自己的实力——在演奏结束后，他用发热的琴弦，点燃了香烟。这场斗琴，是视觉与听觉的盛宴。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-battle.jpg" alt="the-legend-of-1900-battle.jpg">&lt;span class="caption">※ 斗琴&lt;/span>&lt;/p>
&lt;p>第二处，就是电影的结尾，麦克斯在即将爆破的早已废弃生锈的轮船上找到了 1900，劝说他来到陆地，开启新的生活，但 1900 选择了死在船上。其实，在遇见那个姑娘之后，1900 考虑过到陆地上生活。他可以演奏自己喜欢的乐曲，赢得更多人的喝彩，赢得更高的名誉，赢得很多很多的钱，和自己爱的人结婚生子。他本来是那么坚定地想要下船，但他从船上走下来的那一刻，望着纽约高低起伏的大楼，他又犹豫了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-disembark.jpg" alt="the-legend-of-1900-disembark.jpg">&lt;span class="caption">※ 下船的那一刻&lt;/span>&lt;/p>
&lt;p>城市一望无际，没有开始，也没有终结。他是无法在这样的地方生活的。钢琴有始有终，有八十八个琴键，钢琴师有限的，人是无限的，所以人可以在琴键上演奏出无限的乐章。这是 1900 能接受的生活，但城市有无数条街道，就像是无数个琴键，没有尽头，这是上帝的琴键，在这样的地方，他无法创作任何乐曲。这么大的世界压在自己身上，他无法承担。1900 生在这艘船上，这艘船就是他的世界。他在这艘船上有自己的梦想，他愿意在这里死去，就像他从未来过这世上一样。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-legend-of-1900-street.jpg" alt="the-legend-of-1900-street.jpg">&lt;span class="caption">※ 无尽的城市&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/the-legend-of-1900/" target="_blank" rel="noopener">https://guanqr.com/life/films/the-legend-of-1900/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/death/">死亡</category><category domain="https://guanqr.com/tags/love/">爱</category><category domain="https://guanqr.com/tags/music/">音乐</category></item><item><title>
影视周边：十二寸兵人收藏</title><link>https://guanqr.com/life/hobbies/one-sixth-scale-figure/</link><guid isPermaLink="true">https://guanqr.com/life/hobbies/one-sixth-scale-figure/</guid><pubDate>Fri, 22 Nov 2019 23:29:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>比较喜欢收藏模型，不论是需要自己手工制作的高达模型、风帆战舰，还是一整套的影视兵人，我都有涉及。但我并没有接触到军事题材，因为我对军事题材不太感兴趣。我喜欢古代与未来器械，但不喜欢现代军事——每个人的欣赏角度不同；我也没有涉及手办这一纯树脂制造的产品，因为我基本不怎么看日漫追番。高达模型是我从小学就接触到的模型，当时学校附近的书店街有一家卖动漫游戏周边产品的小店，可谓是我梦幻般的天堂。到了高中的时候，我沉迷于风帆战舰的雄伟造型，胜利号、圣菲利普号、黑珍珠号，各类帆船的造型和雕刻的纹路都充满着艺术。在我攒钱买了圣菲利普号的零件后，我的同桌告诉我，他以为我买的是 Hot Toys 兵人，毕竟我也是一个漫威粉。那一次是我第一次听说 Hot Toys，回到家后我就在网上查阅了一系列 Hot Toys 生产制作的兵人，从此便进入了一个深深的巨坑。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hottoys.png" alt="hottoys.png">&lt;span class="caption">※ 我收藏的一些兵人&lt;/span>&lt;/p>
&lt;p>当时深深吸引我的一款兵人是《蝙蝠侠对超人：正义黎明》系列产品中的梦魇蝙蝠侠（Knightmare Batman）。这是当时 Hot Toys 限定发售的一款产品。不过由于当时我把我的积蓄都用来买风帆战舰了，所以很遗憾地错过了这款兵人。我喜欢它的原因有两点：第一，蝙蝠侠是我最喜欢的一个美漫角色，而由本·阿弗莱克版本的蝙蝠侠是我心目中最完美的银幕形象。第二，梦魇蝙蝠侠是电影中蝙蝠侠梦境——不义联盟的片段，蝙蝠侠在黄土末世中身着风衣，有一种独特的韵味，充满艺术感。&lt;/p>
&lt;p>后来我就关注了 Hot Toys 百度贴吧，在贴吧中了解到了很多关于兵人收藏和生产厂家的故事，也认识了很多兵人收藏达人。上了大学后，我也有了我的第一款收藏：《美国队长：内战》版本的美国队长。到现在为止，我前前后后也收藏了不少兵人，奇异博士、杰克船长、勇度、金刚狼，甚至还有美剧《行尸走肉》里的弩哥达里尔。这些兵人不只是出自 Hot Toys，还有其他的一些公司和第三方产品的组合。&lt;/p>
&lt;p>影视兵人、雕像之类的艺术品，之所以具有收藏价值，是因为有「限定」二字。每一批产品都需要顾客预订，提前交付一定金额的订金，即生产的数量是根据预订人数来确定的。如果你没有在预订时间内对某款产品进行预订，那么就只能通过更高的价格来追订或者购买现货。已经生产过的产品一般不会重新生产——工厂的流水线还要制作下一批产品，这就导致每一款产品的总量有限，喜欢收藏的人越多，价格就更昂贵。&lt;/p>
&lt;p>我在这几年混迹贴吧和欣赏达人藏品的过程中，找到了自己收藏的方向。我喜欢充满艺术感、充满层次感的兵人，也就是在兵人的服饰设计上，纹路复杂，层次分明。比如，像身着紧身胶衣的蜘蛛侠、黑豹这样的兵人，我都不喜欢，因为这类兵人的服装只有一层，过于简陋，不值得用如此高的价格购买，这样的兵人和普通的玩偶有什么区别呢。而像杰克船长、奇异博士这样的兵人，服装具有很多层，每一层的布料、纹路都有精心设计，各不相同，这才是真正值得收藏的艺术品。&lt;/p>
&lt;p>去年在贴吧中，我无意间看到了芋艿和希斯两位收藏达人展示的兵人，他们收藏了很多并非 Hot Toys 生产的冷门题材兵人。那时我才知道原来还有「定制」这一说法。国内外有一些手艺人，会生产自己制作的一些服饰和头雕，你可以购买这些手艺人的作品，自己进行组合，形成只属于自己的，独一无二的艺术品。因为这些手艺人的作品每一件都是手工制作，追求细节，所以数量稀少、价格昂贵，更具有收藏价值。不过这一类产品基本没有版权。像 Hot Toys 这一类用机器流水线生产并公开发售兵人的厂家一定会有人物角色的授权。我今年刚刚触到了第三方定制，但到目前为止仅仅只能用「接触」一词。因为定制往往会花费高昂的费用，而作为一名学生，没有经济收入，定制的费用是我无法承担的。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/some-collections-from-instagram.jpg" alt="some-collections-from-instagram.jpg">&lt;span class="caption">※ 一些定制的兵人&lt;/span>&lt;/p>
&lt;p>国内的手艺人比较少，大部分头雕师都是韩国的，就连 Hot Toys 官方的头雕师基本都是韩国的。如果你想要定制一些人物的头雕或者服饰的话，就需要通过一些国外的社交平台去联系他们，比如 Instagram、Facebook、Twitter。但有一点需要注意，这些手艺人不会单独接你自己的单子，因为制作成本很高，通常情况下，你需要先去集单，集够几十件单手艺人才会开始制作。国内外经常会有人集单，这就需要你多多关注社交平台中这些兵人爱好者们的消息了&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/hobbies/one-sixth-scale-figure/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>随着漫威热潮的过去，Hot Toys 应该会抓住最后的机会发售一批漫威的兵人来圈钱。然而，我虽然喜欢漫威英雄人物，但我对于漫威题材的兵人收藏已感到「审美疲劳」。我希望能收藏其他类型电影的兵人，比如前些时候的《神奇动物：格林德沃之罪》中的格林德沃和主角纽特的兵人就很不错，服饰偏向欧洲复古风格。另外，还有 Hot Toys 制作的《黑客帝国》中的尼奥，Eleven 与 Kai 联合制作的《浪客行》中的宫本武藏……&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>国外有一个大型的兵人收藏论坛：&lt;a href="http://customonesixth.com/index.php" target="_blank" rel="noopener">http://customonesixth.com/index.php&lt;/a>，许多国外玩家会在这里集单。&amp;#160;&lt;a href="https://guanqr.com/life/hobbies/one-sixth-scale-figure/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/hobbies/one-sixth-scale-figure/" target="_blank" rel="noopener">https://guanqr.com/life/hobbies/one-sixth-scale-figure/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/hobbies/">hobbies</category><category domain="https://guanqr.com/series/one-sixth-scale-figures/">人偶收藏</category><category domain="https://guanqr.com/tags/collection/">收藏</category><category domain="https://guanqr.com/tags/model/">模型</category></item><item><title>
回首过去，展望未来</title><link>https://guanqr.com/life/school/a-job-in-editorial-department/</link><guid isPermaLink="true">https://guanqr.com/life/school/a-job-in-editorial-department/</guid><pubDate>Mon, 18 Nov 2019 20:27:18 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>大学后，很多同学都会选择加入一些社团，不仅是成为社员，也想在其中当一名干事，亦或是加入某些学生组织，比如校级、院级学生会，社团联合会，求是潮等等。我想，加入社团或者组织的初衷，都是因为自己对某一事物的热爱，想要结交一些志同道合的朋友，锻炼自己交际与工作的能力。回想过去的两年，我多多少少也在一些社团、组织中担任过一些不起眼的角色，我的内心似乎有一个声音在询问，我付出了什么，我又收获了什么？&lt;/p>
&lt;p>大一，刚军训完的那一周，百团大战，我想要加入一个社团。那一年学校各大学生组织的纳新时间要比社团纳新时间提前一周，我之所以没有报名任何一个学生组织是因为，我认为自己能力不足，我不太会与人交流，我没有参与过面试，我觉得如果我报名某一学生组织的干事，和我一起竞争这一职位的必然是很多能说会道的人才，我必然会失败。所以我才考虑加入某个社团试一试自己的能力。我比较喜欢摄影、骑行，还有科幻。因为我把我攒的钱都去买山地车了，没有钱能再买一个单反，像我这种根本没碰过单反相机的人，加入摄影协会也发挥不了什么才能，而学校由于安全因素并没有成立骑行类的社团，所以我加入了「星弦科幻协会」。&lt;/p>
&lt;p>当时这个社团称得上是一个起死回生的社团，因为科幻圈实在是太小众了，我们没有办公室，没有资金，几十个人，因为热爱科幻聚集在一起，别的社团每一周还会开设精品课程，这个社团只有一年一度的科幻文学写作大赛，参与的人也寥寥无几。我担任的是宣传工作，官方称工作内容是运营微信公众号，制作海报等宣传品。但实际上，在这个社团工作的一年中，我过于「划水」，并没有碰过微信公众号的运营，只是做了一份写作大赛的宣传海报，甚至到最后，我连海报的印刷版都没有见到。当时的社团太冷清了，没有资金，谈何活动，这样冷清的氛围，冲淡了我的激情。我认为我无法再为这个职位贡献什么力量，大二，我退出了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/soliciting-articles-poster.png" alt="soliciting-articles-poster.png">&lt;span class="caption">※ 征文海报&lt;/span>&lt;/p>
&lt;p>大一下学期的时候，控制学院的团委书记杨老师找我，问我是否愿意参与浙大对天津的本科招生宣传工作，我同意了。杨老师也是我军训时的指导员，我第一次和他见面的时候，是在开学前的天津新生见面会上，他是天津人。杨老师说，他想要通过新媒体对高中生加大浙大的宣传，因为目前很多人对浙大的学校情况存在误解。我和几位同样来自天津的同学，还有一些那年即将毕业的建筑系大四学长一起，在本科招生办和办公室的老师开了个会，讨论了招生宣传的模式和计划。后来我们就做了个微信公众号，每周在学校的官网上查找资料，做推文。我很少登录公众号的后台，也不太清楚这个公众号的关注度有多少，但说真的，当初立定计划的时候有着远大宏伟的目标，但现实确实很残酷。尽管我们再怎么宣传，效果也无法明显的察觉到。毕业生们，该上清北的还是上清北，能上复交的还是会选择复交，最后还是「考败来浙」。虽说这份工作只做了一个学期，但我也算是在校本科招生办工作过的人了。&lt;/p>
&lt;p>大二，应该算是本科阶段最繁忙的一年了。和我比较熟的几个同学在院学生会工作，他们说他们比较缺人手，我就报名加入了。当时还有一场面试，其实就是走个形式，报名的人都会录用的，因为院学生会的人实在是太少了，他们肯定愿意你来义务劳动。我选择的是宣传部，团委下属的部门，主要负责的就是学院的各种宣传工作，包括运营「光小电」微信公众号。后来辅导员说，我们这些在宣传部的人最好报名参加学校的第三期写作培训，来提升自己的文笔，我当时想都没想就报名了。当时报名的时候还要提供一些以前写过的文章看看个人的水平，我之前哪写过什么文章，当时学校正在实施新的体育锻炼制度，我就交了篇对该事件的分析议论，我抱着被刷的心态，却意外被录取了。于是，整个大二期间，我都被写作培训和学生会宣传部的工作「折磨」地焦头烂额。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/2019-new-year-party.jpg" alt="2019-new-year-party.jpg">&lt;span class="caption">※ 2019 光电新晚&lt;/span>&lt;/p>
&lt;p>先来说说在宣传部的工作，主要就是两件事：写新闻稿、编写推文。甚至在人手不够的时候，替隔壁新媒体部的同学拍各种活动的照片，做海报。我毕竟没有多强的 PS 技术，替新媒体部做出来的东西也就凑活吧。一年下来编的推文也有十多篇，各种类型的都有。人物采访我倒是没有做过，因为我觉得太麻烦了，还要单独花费一天的时间约访谈对象，然后录音再转成文字稿。大二已经被物理，模电等等各种实验报告折磨得死去活来，能静下心来耗费一两个小时编推文，我觉得是我最大的限度了，其他乱七八糟的活，能「水」的就「水」过区吧，毕竟学业还是重中之重。&lt;/p>
&lt;p>大二上学期，组织部还是和我们宣传部在一起开例会，当时他们讨论创一个 SQTP（大学生素质训练计划）项目，是有关组织志愿活动的，需要起一个响亮的名字，当时我们讨论了一个晚上也没有讨论出结果，最后我闪出了一个想法，就告诉他们，叫「聚志融光」吧，这个名字就这么诞生了，那些参与这项 SQTP 的同学，获得了自己满意的成果，我却只是活动的组织者之一，没有得到任何回报。&lt;/p>
&lt;p>每一年，学生会最忙碌的时候，就是举办新年晚会的时候，学生会要和研究生会一起联合策划晚会的节目，拉赞助，租场地，布置场景。我们也被拉去当「苦力」。因为那是我住在紫金港，学院在玉泉，办各种活动都需要跨校区，耗时耗力，那天下午，在紫金港东区上完模电实验课，我就骑着山地车赶到了玉泉永谦剧场布置晚会的场地，铺红地毯，挂气球，看节目彩排。晚上观众入场的时候，我守在大门前检票。那天晚上很冷很冷，风也很大，因为我在大门处，没有空调，只能忍受这难耐的寒冷。&lt;/p>
&lt;p>大二下学期的时候，校学生会开了一个院校两级学生会权益服务交流的大会，我们学院没有权益部门，我就成为了口头组建的权益服务部部长参加了这项会议。在大会中，我听了很多其他院系学生会同学的工作分享，我觉得我们学院学生会还有很多欠缺的地方，需要我们一起努力改进才行，但是，我只是宣传部的一个不起眼的人，我找谁讲这些心里话呢？&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/exchange-meeting.jpg" alt="exchange-meeting.jpg">&lt;span class="caption">※ 权益服务交流会&lt;/span>&lt;/p>
&lt;p>写作培训的内容很充实，分为前期和后期两部分内容。因为培训时长为一学年，所以前期就是我的大二上学期，后期为大二下学期。前期的时候每周都会开展讲座。负责人会请来很多学校行政部门负责文字工作的领导传授给我们一些干货，虽然这些知识在我以后的生涯中可能不会再用到了吧，但我也把这些讲座的知识点作了总结。大二上学期的时候，迎来了硬核课程「电路与模拟电子技术」，相应课程的实验时间是周五的下午。然而这些讲座经常在周五下午开展，所以我请假了很多次，可能这也是我最后没有获得优秀学员的原因吧……不过说真的，前期的这些讲座让我了解了浙大传媒学院的一些课程设置，让我爱上了传媒。因为我喜欢艺术，喜欢设计，喜欢用镜头讲述故事，如果我没有选择工科，可能就会选择传媒专业了吧。&lt;/p>
&lt;p>后期的时候，我们分成了很多小组，到学校的一些部门进行实训，以及跟着导师做大项目，用来最后的结业考核。我选择了到学工部进行实训，大作业是为学校档案馆写一些浙大历史事件。实训的这一段时间，怎么说呢，我觉得写作培训负责人没有和相关部门的老师沟通好，没有形成完备的考核制度，以至于到最后大多数人都没有得到应有的实训。有些部门的老师将我们这些人当做「勤工助学」的人，帮他们跑腿；有的部门的老师甚至没有见过应道其部门进行实训的同学，甚至忘了这一件事。我的负责老师是学工部思政办公室的老师，也是求是潮的负责人，运营着「浙大微学工」微信公众号。我在每周五的下午到办公室进行值班，可谓是枯燥无味、孤独寂寞。我感觉实训并没有真正锻炼我的写作能力，因为老师并没有给我安排什么工作，这也算是忙里偷闲了吧。为校档案馆写文章的大作业，我写的是「&lt;a href="https://guanqr.com/life/school/the-establish-of-qiushi-college/">求是书院的创立&lt;/a>」和「混合班的创办」两个话题。通过这两篇写作，我对浙大的历史有了更深一步的认识，感受到了求实精神的传承。&lt;/p>
&lt;hr>
&lt;p>大三，我们信息学部的学生都&lt;a href="https://guanqr.com/life/school/move-to-yuquan/">搬到了玉泉&lt;/a>。我决心抛去一些学生工作，只留下在学生会的一个职务。因为大三要学习很多的专业课，如果我因为一些不得不做的学生工作而耽误了学习，得不偿失，虽然现在我的成绩已经很难看了。回想前两年，每周忙忙碌碌。课表上排满了电路、光学课程，但我回到宿舍后，最先完成的不是复习和作业，而是上级安排给我的任务。因为作业可以拖到最后期限再写，但是工作上的任务不能拖，越早完成越好。这就导致我每周在学业上花费的时间很少很少，我曾经也感到很无助，究竟怎样才能平衡工作和学业？我时常在晚上发泄自己的情绪，通过打游戏、或者是和朋友通电话聊天，可是后来，朋友的专业课有很多作业要完成，我们联系的次数就少了很多。我们学生会的主席，他们比我们普通的干事工作量更大，但是他们却依然能够保持学业成绩优异。我想，可能是我的能力有限吧。或许有人会建议我：你退出不就行了。我不想退出，因为这是我的选择。&lt;/p>
&lt;p>我始终是一个坚持追逐内心的人。我的每一个选择，都是我自己内心所向。这也是当初我为什么选择光学作为自己专业的原因，这也是高三的时候我为什么没有认真对待清华领军计划的原因。我认为，大学，是学校与社会之间的桥梁，多参与一些活动和工作，多认识一些人，这都是对自己能力的锻炼。既然我的头脑没有别人聪明，那就向别的方向发展。你是年级第一，受到学院老师和学生的仰慕；你也参与了很多竞赛，得到了很多证书；你大二就联系导师，去实验室进行科研，发表了很多论文。这或许是大部分人想要得到的，但这不是我想得到的。我不想有无形的压力束缚自己，而很多人却给自己套上了一层又一层的枷锁。&lt;/p>
&lt;p>还记得大二下学期的时候，学生会部门调整，宣传部被划分到了全媒体工作室。纳新的时候，很少会有人想进入全媒体工作室，因为写新闻稿、编推文什么的最累了。辅导员为了鼓励大家来到这里工作，说在全媒体工作室工作就有机会得到「浙报·阿里奖学金」。这才纳入了很多新成员，显然，大家都是有目的的，有的人是为了社会工作经历——这是入党积极分子必须要有的经历；有的人则是为了奖学金。前些日子刚刚评定了「浙报·阿里奖学金」，我们的主席和几个新人得到了这项奖学金。理论上讲，我如果参与评选，也会得到的，因为我和主席是同一期进入学生会的，我在背后默默做得贡献，总要比这几位刚入职一学期的新人多得多，他们没有经历过光电新晚，他们没有在运动会上追着运动员拍照……不过我还是没有参与评选，我觉得还是把这个机会让给别人吧，我并不追求这些奖项，奖学金不是我来到这里工作的原因。&lt;/p>
&lt;p>前些天回到紫金港，我参加了第四期写作培训的开班仪式，领到了结业证书，也参加了学院学生会的全员大会，领到了部长聘书，感觉这一年的努力和坚持并没有白白浪费。我希望大三这一学年能认真完成我的部长工作，因为这是我自己的选择。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/a-job-in-editorial-department/" target="_blank" rel="noopener">https://guanqr.com/life/school/a-job-in-editorial-department/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/wechat/">微信</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
ASAP 例程 Siren Light 分析</title><link>https://guanqr.com/tech/optics/asap-siren-light/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/asap-siren-light/</guid><pubDate>Wed, 06 Nov 2019 23:43:17 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-0.png" alt="asap-siren-light-0.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">警&lt;/span>示灯常用于维护道路安全，用于救护车、警车、消防车等，能够在大角度的范围内引起人体视觉系统的注意。为了适应道路复杂多变的情况，警示灯使用红色光源，并采用反射式绕轴旋转的结构，用「晃」的视觉效果使警示范围的人眼警觉性提高。该 Siren Light 例程对警示灯的主体结构进行了建模仿真，并对出射光的光强分布进行了分析。&lt;/p>
&lt;h2 id="具体结构">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#具体结构" class="anchor-link" aria-label="具体结构">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>具体结构&lt;/h2>
&lt;p>例程所给出的警示灯结构较为简单，灯罩为一个圆柱和一个半球的组合，光线可以完全透射，在灯罩的上方有一个曲面，该曲面为反光材质，可以将从光源上方发出的光反射到下方，灯罩的下方有一个倾角为 45 度的反光斜面，该斜面可随转轴转动，将上方的光线反射出灯罩，形成具有一定发散角的光束。经过这一光学系统，可将一近似点光源的光束转换成可控方向的、具有一定角度的光束。&lt;/p>
&lt;h2 id="代码详解">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#代码详解" class="anchor-link" aria-label="代码详解">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>代码详解&lt;/h2>
&lt;p>该例程的代码主要分为三部分内容，参数定义、模型构建和光线分析。这里对该例程的代码按以上分类进行研究与解读。&lt;/p>
&lt;h3 id="参数定义">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#参数定义" class="anchor-link" aria-label="参数定义">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>参数定义&lt;/h3>
&lt;pre tabindex="0">&lt;code>EPS=0.05 !! 定义epsilon变量数值
NRAYS=100000 !! 设定光线数
NPIXELS=45 !! 设定光线接收分辨率
LGT_MIR_DST=1 !! 灯顶反射镜与底部转镜之间的距离
LGT_SHD_HGT=20 !! 灯罩的内部总高度
LGT_SHD_WID=5 !! 灯罩的内部总宽度
LGT_SHD_THK=0.25 !! 灯罩的厚度
MOTOR_HGT=4 !! 底部电机的高度
MOTOR_AXLE_WID=1 !! 底部转轴宽度
FILA_OFFSET=(LGT_SHD_WID/4.0) !! 灯丝（光源）距反射镜原点的距离
FILA_HGT=0.5 !! 灯丝高度
FILA_THK=0.025 !! 灯丝厚度
FILA_RAD=0.2 !! 灯丝的转弯半径
&lt;/code>&lt;/pre>&lt;h3 id="模型构建">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#模型构建" class="anchor-link" aria-label="模型构建">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>模型构建&lt;/h3>
&lt;p>首先是定义波长和材料的折射率，以及光线吸收面、透射面和反射面。&lt;/p>
&lt;pre tabindex="0">&lt;code>SYSTEM NEW
UNITS INCHES
WAVELENGTHS 400 500 600 700 NANOMETERS
MEDIA
1.3 1.35 1.4 1.45 &amp;#39;SHADE_MAT&amp;#39;
COATING PROPERTIES
0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 &amp;#39;ABSORB&amp;#39;
0.0 1.0 0.0 1.0 0.0 1.0 0.0 1.0 &amp;#39;TRANSMIT&amp;#39;
1.0 0.0 1.0 0.0 1.0 0.0 1.0 0.0 &amp;#39;REFLECT&amp;#39;
&lt;/code>&lt;/pre>&lt;p>然后开始构建模型，这里先构建的是灯罩部分，根据设定的参数数值，灯罩高度和宽度，构建内外两层灯罩。顶部圆弧曲率直径与设定的灯罩宽度相
等，表面为光学透射面。&lt;/p>
&lt;pre tabindex="0">&lt;code>EDGE
ROUNDED Y 0 (LGT_SHD_HGT) (LGT_SHD_WID) (LGT_SHD_WID) 32 0 90
SWEEP AXIS 360 0 0 1 0 0 0
OBJECT; .1 &amp;#39;LIGHT.SHADE.INTERIOR&amp;#39;
INTERFACE COATING &amp;#34;TRANSMIT&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;SHADE_MAT&amp;#34;
FACETS 1 8
REDEFINE COLOR 20
EDGE
ROUNDED Y 0 (LGT_SHD_HGT+LGT_SHD_THK) (LGT_SHD_WID+LGT_SHD_THK) (LGT_SHD_WID+LGT_SHD_THK) 32 0 90
SWEEP AXIS 360 0 0 1 0 0 0
OBJECT; .1 &amp;#39;LIGHT.SHADE.EXTERIOR&amp;#39;
INTERFACE COATING &amp;#34;TRANSMIT&amp;#34; &amp;#34;SHADE_MAT&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 1 8
REDEFINE COLOR 20
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-1.png" alt="asap-siren-light-1.png">&lt;span class="caption">※ 构建灯罩&lt;/span>&lt;/p>
&lt;p>构建灯顶的弧形反射面。使用 &lt;code>REVOLUTION&lt;/code> 和 &lt;code>LOCAL&lt;/code> 指令确定弧形的弯曲程度，其参数变量根据构建的灯罩宽度进行限定。并设定曲面为反射面。&lt;/p>
&lt;pre tabindex="0">&lt;code>SURFACE
REVOLUTION Z 0 0 0 1 (1/LGT_SHD_WID) 0,
0 0 0 0 0
LOCAL -(LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) -(LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) -(LGT_SHD_WID-3*EPS) (EPS) Z 0
SHIFT Z (LGT_SHD_HGT-3*EPS)
OBJECT; .1 &amp;#39;LIGHT.REFLECTOR&amp;#39;
INTERFACE COATING &amp;#34;REFLECT&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 8 3
REDEFINE COLOR 1
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-2.png" alt="asap-siren-light-2.png">&lt;span class="caption">※ 构建弧形反射面&lt;/span>&lt;/p>
&lt;p>构建底部反射面 X-Z 面构建四十五度的斜面，斜面宽度等于灯罩内宽度 &lt;code>2*(LGT_SHD_WID)&lt;/code>。&lt;/p>
&lt;pre tabindex="0">&lt;code>SURFACE
PLANE NORMAL 1 0 1 0 0 0
LOCAL -(LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) -(LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) -(LGT_SHD_WID) (LGT_SHD_WID) Z 0
SHIFT Z (LGT_SHD_HGT-2*LGT_SHD_WID-LGT_MIR_DST)
OBJECT; .1 &amp;#39;LIGHT.ROTATING_MIRROR&amp;#39;
INTERFACE COATING &amp;#34;REFLECT&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 8 3
REDEFINE COLOR 1
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-3.png" alt="asap-siren-light-3.png">&lt;span class="caption">※ 构建底部反射面&lt;/span>&lt;/p>
&lt;p>构建圆柱形底座，首先建一个管状物。半径为 &lt;code>(LGT_SHD_WID-EPS)&lt;/code>，高度为 &lt;code>(MOTOR_HGT)&lt;/code>，该面为吸收面。然后构建圆柱形底座的顶面，同样为吸收光线面。&lt;/p>
&lt;pre tabindex="0">&lt;code>SURFACE
TUBE Z 0 (LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) (MOTOR_HGT) (LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) 0 0
OBJECT; .1 &amp;#39;LIGHT.MOTOR.SIDE&amp;#39;
INTERFACE COATING &amp;#34;ABSORB&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 8 3
REDEFINE COLOR 1
SURFACE
PLANE Z (MOTOR_HGT) ELLIPSE (LGT_SHD_WID-EPS) (LGT_SHD_WID-EPS) 0 0 0
OBJECT; .1 &amp;#39;LIGHT.MOTOR.TOP&amp;#39;
INTERFACE COATING &amp;#34;ABSORB&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 8 3
REDEFINE COLOR 1
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-4.png" alt="asap-siren-light-4.png">&lt;span class="caption">※ 构建底座&lt;/span>&lt;/p>
&lt;p>构建控制底部反光板的转轴，先建一个管，再建一个与底部反光板相同的斜面切除管。该面为光线吸收面。&lt;/p>
&lt;pre tabindex="0">&lt;code>SURFACE
TUBE Z (MOTOR_HGT) (MOTOR_AXLE_WID) (MOTOR_AXLE_WID) (LGT_SHD_HGT) (MOTOR_AXLE_WID) (MOTOR_AXLE_WID) 0 0
SURFACE
PLANE NORMAL 1 0 1 0 0 0
SHIFT Z (LGT_SHD_HGT-2*LGT_SHD_WID-LGT_MIR_DST)
OBJECT; .2 &amp;#39;LIGHT.MOTOR.AXLE&amp;#39;
BOUNDS -.1
INTERFACE COATING &amp;#34;ABSORB&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 8 3
REDEFINE COLOR 1
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-5.png" alt="asap-siren-light-5.png">&lt;span class="caption">※ 构建转轴&lt;/span>&lt;/p>
&lt;p>构建光线探测面，为一矩形平面，该面与 Z 轴垂直。&lt;/p>
&lt;pre tabindex="0">&lt;code>SURFACE
PLANE X (3*LGT_SHD_WID) RECTANGLE (2*LGT_SHD_WID) (2*LGT_SHD_WID) 0 0 0
SHIFT Z (LGT_SHD_HGT-2*LGT_SHD_WID-LGT_MIR_DST)
OBJECT; .1 &amp;#39;DETECTOR&amp;#39;
INTERFACE COATING &amp;#34;ABSORB&amp;#34; &amp;#34;AIR&amp;#34; &amp;#34;AIR&amp;#34;
FACETS 1 1
REDEFINE COLOR 8
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-6.png" alt="asap-siren-light-6.png">&lt;span class="caption">※ 构建探测面&lt;/span>&lt;/p>
&lt;p>最后定义光源，位置和光线数量。&lt;/p>
&lt;pre tabindex="0">&lt;code>RESET !! - clear out any existing sources or rays
WAVELENGTH 630 !! - assign wavelength for source (roughly red)
EMITTING HELIX Z 0 (FILA_HGT) 5 (FILA_RAD) (FILA_THK) (NRAYS)
SHIFT Z (LGT_SHD_HGT-FILA_OFFSET-0.5*FILA_HGT)
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-7.png" alt="asap-siren-light-7.png">&lt;span class="caption">※ 构建光源&lt;/span>&lt;/p>
&lt;h3 id="光线分析">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#光线分析" class="anchor-link" aria-label="光线分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>光线分析&lt;/h3>
&lt;p>对出射的光线进行光强分布等一系列分析。&lt;/p>
&lt;pre tabindex="0">&lt;code>WINDOW Z X
CONSIDER EXCEPT DETECTOR
PLOT FACETS OVERLAY !! 画出警示灯栅格图
SPOTS POSITION EVERY (NRAYS/1000) OVERLAY !! 用光线的一部分画出灯丝
CONSIDER ALL
MISSED ARROW (0.5*LGT_SHD_HGT) !! 设置未到探测器的光线的延长距离
ARROW 1.5
TRACE PLOT (NRAYS/70)
CONSIDER ONLY DETECTOR !! 只考虑探测器上的光线
WINDOW Z -Y !! 改变窗口坐标，适应探测器的方向
PIXELS (NPIXELS) !! 控制接下来光强分布计算的图窗大小
SPOTS POSITION ATTRIBUTE 0
DISPLAY
PICTURE !! 显示栅格图
PLOT3D !! 显示光强分布的 3D 图
CONTOUR 7 !! 做 7 条等光强线
WRITE OUTPUT.DIS
RETURN
$VIEW
&amp;amp;VIEW OUTPUT.DIS
&lt;/code>&lt;/pre>&lt;h2 id="测试结果">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#测试结果" class="anchor-link" aria-label="测试结果">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>测试结果&lt;/h2>
&lt;p>根据上述 ASAP 例程进行构建，运行代码，可以得到警示灯的模型样图以及光强分布的特性分析。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-8.png" alt="asap-siren-light-8.png">&lt;span class="caption">※ 3D 视图&lt;/span>&lt;/p>
&lt;p>程序输出的光强分布图如下图所示，由中心到边缘，光线强度逐渐增加再逐渐减小。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-9.png" alt="asap-siren-light-9.png">&lt;span class="caption">※ 光强分布图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-10.png" alt="asap-siren-light-10.png">&lt;span class="caption">※ 光强分布 3D 视图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/asap-siren-light-11.png" alt="asap-siren-light-11.png">&lt;span class="caption">※ 等光强线图&lt;/span>&lt;/p>
&lt;h2 id="谈谈这门课">&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/#谈谈这门课" class="anchor-link" aria-label="谈谈这门课">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>谈谈这门课&lt;/h2>
&lt;p>最后，我想谈谈我对这一门课的感受。&lt;/p>
&lt;p>在选课阶段开始之前，就听学长说过推荐选这一门课，因为课程作业量很少，作业当堂写完当堂检查，不会留课下作业。选课的时候，学院开设了两门建模课，这两门课并没有显示在默认的第一栏本学期推荐修读课程选课中，而是要在选课网站中的专业课程中才能找到，这也导致很多人并没有看到这门课程。说到建模，我相信大多数同专业的同学就会联想到两个暑假被光学建模支配的恐惧，不过这门课确实很简单，每一步操作课件上都有提示，只要按照课件的步骤来做，基本不会出问题。并且因为选这门课的人数比较少，有什么问题，老师也会一一解答。如果非要说这门课有什么缺点的话，那可能就是上课的时间有点长，要一整个下午。ASAP 软件的使用很简单，这也是光学器件建模中经常使用到的软件，多学一些技能，也对自身的专业素质提升有帮助。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/asap-siren-light/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/asap-siren-light/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/geometric-optics/">几何光学</category><category domain="https://guanqr.com/tags/modeling/">建模</category></item><item><title>
跨越时间的父爱，应试教育下的光芒</title><link>https://guanqr.com/life/films/looking-up/</link><guid isPermaLink="true">https://guanqr.com/life/films/looking-up/</guid><pubDate>Thu, 17 Oct 2019 15:52:32 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>部电影是在今年 7 月 18 日上映的，但我是在 7 月 25 日晚上去电影院看的，之所以没有在第一时间看这部电影是因为上映那天我看了《狮子王》。我在空间里看到了有的同学评价这部电影是「莫名其妙，荒谬绝伦」，这有些打我的脸，因为我在上映前就在空间里说，七月份去电影院最值得看的电影就是《银河补习班》。因为上映前我通过预告来看，这确实是在充斥着爆米花电影市场中难得的一部讲述教育和父爱的电影。说它荒谬，剧情中确实有很多不合理的地方，但我认为，一个故事，没有必要过于真实，多么贴近生活，只要能讲述出一个好故事，它也可以是一部浪漫的童话。这部电影的剧情，让我感触颇深。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/looking-up-0.png" alt="looking-up-0.png">&lt;span class="caption">※ 献给父亲 送给孩子&lt;/span>&lt;/p>
&lt;h2 id="剧情简介">&lt;a href="https://guanqr.com/life/films/looking-up/#剧情简介" class="anchor-link" aria-label="剧情简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>剧情简介&lt;/h2>
&lt;p>电影采用了插叙的手法，电影的开端，是主人公马飞即将乘火箭上太空，在记者面前，他开始回忆自己一路成长的历程。马飞的爸爸马皓文是个东沛市很有名的桥梁建筑师，按照他的设计修建的东沛大桥在亚运会火炬传递暨大桥开通仪式上突然坍塌，马皓文背了全部的黑锅，被关进了监狱，马飞也成为了别人嘲笑的对象。&lt;/p>
&lt;p>一个缺少父亲的家庭，对孩子的影响是很大的。马飞从小就不是一个听话的孩子，父亲留给他唯一的礼物就是大桥坍塌那天送他的那个用足球改成的地球仪，然而这份珍贵的礼物也被欺负他的同学毁坏了。马飞的脾气越来越倔强，在学校里成为了典型的「学渣」，在学校偷偷看小说，屡教不改。教导处主任决定开除他。在大会上，马飞见到了刚刚出狱的父亲，惊讶、喜悦却又有一些恨在其中。他恨他的父亲，恨他为什么不回家，这个家需要他。马皓文向主任求情，主任答应他，如果期末马飞考到年级前十，就不开除他的学籍。这种事，谁信呢？&lt;/p>
&lt;p>马飞的母亲和养父因工作出差，马皓文就把马飞接到了原来他们一家住的地方。那是曾经他所在单位的家属院，因为邻居们都把大桥坍塌的事故归罪于他，他不敢和邻居碰面，只能偷偷进到家里，他的家，早已成为一间库房。马皓文曾经的徒弟帮助他拿到了这间屋子的钥匙，作为回报，马皓文答应给他提供设计图纸。马皓文并没有让马飞刷题，而是用一种启发式的教育，引导马飞主动地学习，找到自己的爱好。马飞看到自己的父亲这么努力，自己也开始努力学习。他也逐渐找到自己的理想——当一个飞行员。&lt;/p>
&lt;p>临近期末考试，班主任担心马飞的学习情况，教导主任为了让学生们全身心地投入到复习当中，要求全校学生寄宿到学校。而马飞却想到另一个城市去看航展。马皓文就偷偷带着马飞溜了出来，带他进行了一次「说走就走」的旅行。在航展结束回家的途中，马飞和马皓文走散了，那天正好暴雨，又发生了特大洪水，马飞靠着马皓文平时教给他的生活技能，成功从困境中逃脱，而这些技能，是在课本中学不到的。&lt;/p>
&lt;p>期末，马飞本应能考进年级前十，但他的语文作文被教导主任打了零分，因为这篇作文充满了想象，主任认为这与当今的价值观不符。但其他的老师都认为，这才是当今学生们缺失的东西，他们认为这篇作文能满分。马飞留在了学校。马飞的成绩越来越好，成为了全年级的第一名，教导主任希望他能够在高考填报志愿的时候报清华北大，马飞却想当一名飞行员。&lt;/p>
&lt;p>高考后高三的学生都认为自己得到了「解放」，从教学楼上将自己的课本和练习册一页一页地撕下，扔到楼下，这也成为了这所学校的「传统」。在「书雨」中，有一个疯子在兴奋地舞动着自己的双臂。他是谁？他正是教导主任的儿子，一个在应试教育下诞生的失败产物。他本有着很好的未来，却被大学考试的一场失利与父亲的冷漠摧残。&lt;/p>
&lt;p>马飞当上了飞行员，又成为了一名宇航员。马皓文一直在为自己的那场冤案找证据。马飞的领导希望他的父亲不要追究这件事，因为一旦马飞成为了名人，过去任何一件事都会被无限放大。马飞把这件事告诉了父亲。父亲失望地说，他这辈子的教育是失败的。&lt;/p>
&lt;p>电影的故事线回到了主线，马飞乘坐的载人飞船出现了故障，无法正常返回。马飞凭借父亲曾经教给自己的生活技能，再一次从困境中脱险。回到地面上的时候，马皓文在这片黄土地上等着他回家。&lt;/p>
&lt;h2 id="电影简析">&lt;a href="https://guanqr.com/life/films/looking-up/#电影简析" class="anchor-link" aria-label="电影简析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>电影简析&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/looking-up-1.png" alt="looking-up-1.png">&lt;span class="caption">※ 马皓文在传递火炬&lt;/span>&lt;/p>
&lt;p>先来说说我对这部电影的第一印象。这部电影的名字很新颖，银河补习班，给我一种很宽广的感觉，难道是要在宇宙中给孩子补课吗，这难道是一部科幻电影吗？随着电影《流浪地球》的火爆，今年被称作「科幻元年」，很多电影可能会蹭一些科幻的热度，这部电影的标题也可能有这种「嫌疑」。然而，实际上这部电影虽然有火箭和太空的元素，并不算是科幻电影。「银河补习班」，是父亲马皓文对儿子马飞的期待与爱的寄托。&lt;/p>
&lt;p>演员方面，我之前在空间推荐这部电影的理由中也写了，因为这部电影是邓超主演的，而这又不是喜剧，那必然是一部好电影。这虽然是一句玩笑话，但也确实是这样。我认为邓超是一个很出色的演员，我第一次在银幕上看的他的电影是《狄仁杰之通天帝国》，他在那部电影里饰演的是一位患有白化病的人，因此给我留下很深的印象。后来我是在娱乐节目《奔跑吧，兄弟》里真正认识这位演员的。我相信一提起邓超，大部分人的印象也是《奔跑吧，兄弟》里那个充满幽默的形象。他拍了好几部喜剧电影，但口碑都不太好，都说他饰演的角色很尬很尬。然而，他在一些剧情片和文艺片中的角色饰演得十分出彩，就拿最近的一部电影，国师的《影》来说，他饰演了两个角色：沛国大都督子虞，以及子虞的替身境州，两个角色的性格独特鲜明，邓超能够将二人的性格诠释得很到位。在《银河补习班》中，我们又能看到这位完全沉浸在角色当中的邓超了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shadow.png" alt="shadow.png">&lt;span class="caption">※ 电影《影》&lt;/span>&lt;/p>
&lt;p>剧情上，网上的评价褒贬不一。有人说这是一部很出色的电影，充满温情，又批评了当今应试教育的现状，是一部绝佳的教育电影，适合一家人一同观看。有人说，这部电影充满「毒鸡汤」，过于煽情而显得「假大空」，一切都那么荒谬绝伦，马皓文的教育绝对称不上成功。&lt;/p>
&lt;p>这种类型的电影，口碑褒贬不一是很正常的。有些观众关注的是剧情的合理性，剧情在现实社会中的对照，有些观众更关心的是电影流露的一种情感。因为电影是一种艺术作品，艺术源于生活却又高于生活，我认为，一些不合理在电影中可以看做是合理的。我觉得这部电影想要表达的观点有以下几个方面。&lt;/p>
&lt;p>首先是家庭教育的重要性。主人公马飞从小缺失了父爱，父亲在一个孩子的成长过程中扮演着很重要的角色。父亲能够给孩子成长的信心与力量，而正因为马皓文入狱，马飞心目中父亲的光辉形象变得黯淡，他也因此受到同学的欺凌。这对一个孩子的心理和认知造成了很大的影响。马飞后来成为一个不爱学习又倔强的「学渣」是在意料之中的事。除了父亲对孩子成长的影响，当然还有母亲。在电影中，马飞的母亲与马皓文离婚后，嫁给了一位财大气粗的人，「有钱好办事」。我相信现实生活中大部分家长就是这样的人。不管自己孩子学习成绩的好坏，一定会挑市里的重点学校，出钱出力，找人托关系，一定要把自己的孩子送进去。他们总认为一个好的学校就能给孩子好的教育，却忽视了孩子最重要的教师就是自己。只顾着催自己的孩子完成作业，认真学习，不关注孩子内心真实的想法，这样的孩子能成为一个优秀的人吗。马皓文就是一个独特的人，走不同寻常的路线，「启发式」教学。他能让自己的孩子从内心真正的想去学习，而不是被逼迫地学习。如果孩子不想学，那就不学，最重要的是孩子能够找到自己内心真正寻求的东西——梦想。这也是为什么马飞想在考试前去看航展，马皓文万分支持他的原因，马飞心中有自己的理想，他知道自己要为什么努力，找到人生道路的方向，比盲目地学习更重要。&lt;/p>
&lt;p>其次是当今应试教育的不足之处。电影中最讽刺的一个片段就是，教导主任的办公室里的优秀毕业生的照片墙中缺了一张照片。从马皓文的口中我们得知，那是教导主任儿子的照片。当年，马皓文从主任儿子的手中接到了火炬。主任儿子因大学考试受挫，想要得到父亲的安慰，父亲却冷酷无情，似乎只有成绩才是最重要的，这样的精神打击最终将主任儿子变成了一个疯子。这样的情况在现实生活中不太常见，就算学习再怎么施加压力，也不至于将一个学生变成疯子，参加过高考的我们都是这样过来的，那些衡中毕业的学生，生活得也很快乐。不过我想，电影中这样的桥段正是想突出马皓文与教导主任两人教育理念的差异之大。教导主任所代表的正是老式守旧的传统教育，而马皓文代表的更像是一种超前的教育理念，目前我国的教育现状也算是有所前进，不能算是教导主任那一派的，不过在大的应试教育环境下，想要有所改革，实在是难。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/looking-up-2.png" alt="looking-up-2.png">&lt;span class="caption">※ 深夜学习&lt;/span>&lt;/p>
&lt;p>电影情节中一个较的争端在于，马皓文的做法到底是对是错。我想，在现实中，如果临近大考，你突然有一个奇特的想法，想要到某个地方旅游，然后你就去了，回来的时候，正好赶上第一门课的考试，就算你是全校的年级第一，这一次，成绩也不会太好看。不过在上文我也说了，电影毕竟是一种传达思想的工具，借助于镜头中的故事，而这种故事，可以有艺术性的加工，不合理并不等于荒谬绝伦。我在看电影的过程中流了眼泪，这算是我看过的为数不多的几部能让我感动的电影，我内心真真切切被马皓文的父爱感动了，这种对孩子无限的鼓励，无限的热情，无限希望的爱，只有父爱，才能称得上是「银河」吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/looking-up/" target="_blank" rel="noopener">https://guanqr.com/life/films/looking-up/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/education/">教育</category><category domain="https://guanqr.com/tags/family/">家庭</category><category domain="https://guanqr.com/tags/space/">太空</category></item><item><title>
博客通过 Netlify 实现持续集成</title><link>https://guanqr.com/tech/website/deploy-blog-to-netlify/</link><guid isPermaLink="true">https://guanqr.com/tech/website/deploy-blog-to-netlify/</guid><pubDate>Sat, 05 Oct 2019 00:04:30 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-0.jpg" alt="deploy-blog-to-netlify-0.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">一&lt;/span>般在部署 Hexo 或 Hugo 博客的时候，需要将写好的 Markdown 文件通过命令转化为 HTML 文件，然后将生成的 &lt;code>public&lt;/code> 文件夹部署到 GitHub Pages 上。这样的方法是比较简单的方法，我之前也是用的这种方法。但这样的部署方式有一个弊端：直接将生成的可以运行的实际代码（生产版）发布到 GitHub 上，而不是源码（开发版）。没有利用 GitHub 来对源码进行版本控制，这就不利于博客未来的维护、更新、开发，以及可能的开源开发。也就是说，如果你想要退回之前的某一版本是很困难的。有些博主似乎注意到了这样的问题，直接在 GitHub 上新建一个分支或者新建一个仓库来存放原始文件。这种方法需要你在每次部署的时候提交两次代码，很繁琐。&lt;/p>
&lt;p>直到后来，我在浏览 Next 主题的官方文档网站的时候，发现他们并没有将网站部署在 Github Pages 上，而是部署到了 Netlify 上面，他们只将源码存放在了一个仓库中。当你需要修改某些文章内容的时候，直接在仓库中编辑 Markdown 文件，随后网站会自动更新修改的内容。显而易见，这是再好不过的办法，实现博客的持续集成（Continuous Integration，CI）和自动部署，节省了自己操作的时间。&lt;/p>
&lt;h2 id="netlify-简介">&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/#netlify-简介" class="anchor-link" aria-label="netlify-简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Netlify 简介&lt;/h2>
&lt;p>&lt;a href="https://www.netlify.com/" target="_blank" rel="noopener">Netlify&lt;/a> 具有静态网站托管的功能，能够托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等静态网站。 自带 CI、支持自定义页面重定向、自定义插入代码、打包和压缩 JS 和 CSS、压缩图片、处理图片、CMS 等等功能。Netlify 也支持自定义域名免费 HTTPS，且是通配符证书 + TLS 1.3，提供了完整的 DNS 服务，有自动的 &lt;a href="https://www.netlify.com/docs/custom-domains/#domain-redirects" target="_blank" rel="noopener">www&lt;/a> 跳转，以及超简单的子域名配置界面。此外，Netlify 每月也有 &lt;a href="https://www.netlify.com/pricing/" target="_blank" rel="noopener">100GB&lt;/a> 的流量，也自带了全球的 &lt;a href="https://www.netlify.com/blog/2016/04/15/make-your-site-faster-with-netlifys-intelligent-cdn/" target="_blank" rel="noopener">CDN&lt;/a> 服务，还支持了 GitHub Pages 官方不支持的 &lt;a href="https://www.netlify.com/blog/2015/10/20/netlify-news-no.-6/" target="_blank" rel="noopener">HTTP/2&lt;/a>、&lt;a href="https://www.netlify.com/blog/2018/11/26/announcing-ipv6-support-on-the-netlify-application-delivery-network/" target="_blank" rel="noopener">IPv6&lt;/a> 。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-1.jpg" alt="deploy-blog-to-netlify-1.jpg">&lt;span class="caption">※ 通配符证书 &amp;#43; TLS 1.3&lt;/span>&lt;/p>
&lt;p>对于访问速度这一问题，和在 Github Pages 部署相比，我感觉并没有什么太大的差异，毕竟二者的服务器都不在国内。不过我使用校园网，再加上 Service Worker 缓存，感觉访问的时候并没有什么卡顿。&lt;/p>
&lt;h2 id="部署方法">&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/#部署方法" class="anchor-link" aria-label="部署方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>部署方法&lt;/h2>
&lt;p>首先，需要在 GitHub 上新建一个仓库，仓库名任意，用来存放博客的源码，这里我使用的仓库名是 &lt;code>guanqr.com&lt;/code>。&lt;/p>
&lt;p>回到本地，可以看到在你的博客源码存放的文件夹根目录下，有一个 &lt;code>.gitignore&lt;/code> 文件。这是你在安装 Hexo 的时候就已经存在的文件，作用是在你上传博客源码至仓库的时候，忽略上传某些特定的文件。在这个文件中，默认忽略上传的应该有：&lt;/p>
&lt;pre tabindex="0">&lt;code>.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
&lt;/code>&lt;/pre>&lt;p>这里面比较重要的就是 &lt;code>node_modules&lt;/code> 和 &lt;code>public&lt;/code> 这两个文件夹。前者存放的是你在执行 &lt;code>hexo g&lt;/code> 的时候所需的全部工具插件，后者即是需要部署的文件夹。那么为什么不需要上传这两个文件夹内的文件呢？&lt;/p>
&lt;p>对于 &lt;code>public&lt;/code> 文件夹，由于 Netlify 会在线执行 &lt;code>hexo g&lt;/code> 的命令，实现在线部署，所以不再需要它。对于 &lt;code>node_modules&lt;/code> 文件夹，在你的博客源码存放的文件夹根目录下，还有一个 &lt;code>package.json&lt;/code> 文件，每当你安装插件的时候，会执行一个命令：&lt;code>npm install xxx --save&lt;/code>，这样就将该插件的信息存放在了 &lt;code>package.json&lt;/code> 文件中。上传的时候就不需要将全部插件一同上传，节省了仓库的空间。而 Netlify 的持续集成服务会自动检查 &lt;code>package.json&lt;/code> 的改动并在它的容器上安装或移除相应模块。&lt;/p>
&lt;p>当然这里还需要说明一点，如果你在存放于 &lt;code>node_modules&lt;/code> 的任何插件中修改了代码，由于 Netlify 读取的是 &lt;code>package.json&lt;/code> 的信息，只会安装原插件的内容，并不知道你的修改内容，所以你需要将修改后的插件自行上传，然后再修改 &lt;code>package.json&lt;/code> 中该插件的路径到你的仓库。由于我并没有遇到这种问题，这里便不再赘述，如有任何问题还请自行谷歌。&lt;/p>
&lt;p>然后，进入你的主题文件夹中，这里面还有一个 &lt;code>.gitignore&lt;/code> 文件，打开后，修改其内容为：&lt;/p>
&lt;pre tabindex="0">&lt;code>.DS_Store
.idea/
*.log
*.iml
yarn.lock
package-lock.json
node_modules/
# Ignore optional external libraries
!source/lib/*
# Track internal libraries &amp;amp; Ignore unused verdors files
!source/lib/font-awesome/less/
!source/lib/font-awesome/scss/
!source/lib/font-awesome/
!source/lib/anime.min.js
!source/lib/velocity/
&lt;/code>&lt;/pre>&lt;p>这里原内容是禁止 &lt;code>lib&lt;/code> 中你额外安装的库的上传以及 &lt;code>/font-awesome/scss/&lt;/code> 和 &lt;code>/font-awesome/less/&lt;/code> 的上传。因为我安装了 PJAX 和 pace 两个额外的库，需要跟随主题一起上传，所以在此修改了内容。在这里还需要注意的是，除了根目录，任何文件夹内都不能出现 &lt;code>.git&lt;/code> 文件夹，这个文件夹是默认隐藏的，如果你将该文件夹上传，那么 GitHub 就会认为这个文件夹内的文件已经存在于其他的仓库中，你的这个文件夹就无法打开了。&lt;/p>
&lt;p>修改完成后，就可以将博客的源码全部上传至刚才新建的仓库之中。&lt;/p>
&lt;p>我还了解到其实主题文件夹也可不必上传，可以直接设定跟随原主题仓库的更新，即在根目录下添加 &lt;code>.gitmodules&lt;/code> 文件，设定 &lt;code>themes&lt;/code> 文件夹下的内容为子仓库，子仓库设定为 NexT 主题的仓库。即：&lt;/p>
&lt;pre tabindex="0">&lt;code>[submodule &amp;#34;themes/next&amp;#34;]
path = themes/next
url = https://github.com/theme-next/hexo-theme-next
&lt;/code>&lt;/pre>&lt;p>但因为我在原主题的代码中作了部分修改，不便于这种操作，就没有使用这种方法。&lt;/p>
&lt;p>现在 Github 仓库已经设置完成，接下来就是在 Netlify 上的操作。&lt;/p>
&lt;p>首先是在 Netlify 上注册账号，推荐直接使用 GitHub 账号注册。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-2.jpg" alt="deploy-blog-to-netlify-2.jpg">&lt;span class="caption">※ 注册界面&lt;/span>&lt;/p>
&lt;p>然后选择创建新的网站，选择要和 Netlify 相连的 GitHub 仓库，这里我要连的是我的博客仓库 &lt;code>guanqr/guanqr.com&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-3.jpg" alt="deploy-blog-to-netlify-3.jpg">&lt;span class="caption">※ 创建新网站&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-4.jpg" alt="deploy-blog-to-netlify-4.jpg">&lt;span class="caption">※ 选择仓库&lt;/span>&lt;/p>
&lt;p>这里会让你设定部署的一些详细信息，Netlify 会识别到你使用的是 Hexo，一般默认即可。但这里需要注意一点，「Build command」中默认的命令是：&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo generate
&lt;/code>&lt;/pre>&lt;p>而我设定的命令是：&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo clean &amp;amp;&amp;amp; hexo generate &amp;amp;&amp;amp; gulp build &amp;amp;&amp;amp; gulp
&lt;/code>&lt;/pre>&lt;p>因为我使用了 Gulp 进行了&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/">静态资源的压缩&lt;/a>以及&lt;a href="https://guanqr.com/tech/website/realize-pwa/">实现 PWA 功能&lt;/a>，需要额外的命令。所以具体的命令内容需要根据自己的情况进行设定。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-5.jpg" alt="deploy-blog-to-netlify-5.jpg">&lt;span class="caption">※ 设定详细信息&lt;/span>&lt;/p>
&lt;p>设定完成后，Netlify 就会对你的仓库进行第一次部署，如果出现部署错误，请根据提示内容进行修改。一般来说，如果本地浏览正常就不会出现错误。我第一次出现错误的原因就是，主题文件中的 &lt;code>lib&lt;/code> 没有上传。&lt;/p>
&lt;p>部署好之后，Netlify 会自动给你的网站分配一个域名。这个域名是随机生成的，可以进行更改，比如我的网站域名就改成了：&lt;a href="https://guanqr.netlify.com/" target="_blank" rel="noopener">https://guanqr.netlify.com/&lt;/a>，当然最开始的时候没有 HTTPS。这时候，你就可以选择自己设定个性域名。在「Deploy setting」中的「Domain managment」添加你要设定的域名。然后根据自己域名的解析服务商那里将该域名解析到 Netlify 上。这里我设定的域名即：&lt;code>www.guanqr.com&lt;/code>，需要将 &lt;code>guanqr.com&lt;/code> A 记录解析到 &lt;code>104.198.14.52&lt;/code>，再将 &lt;code>www.guanqr.com&lt;/code> CNAME 记录解析到那个原有的域名 &lt;code>guanqr.netlify.com&lt;/code> 中。具体的操作在你设定的时候会有提示。另外，Netlify 也提供了域名解析的服务，如果感兴趣的话可以自己进行尝试。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-6.jpg" alt="deploy-blog-to-netlify-6.jpg">&lt;span class="caption">※ 设定域名&lt;/span>&lt;/p>
&lt;p>域名设定完成后，在该页面的末尾即为设定 HTTPS，Netlify 会免费为你的网站提供 HTTPS 证书。如果你自己已经购买过证书，也可设定添加。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-7.jpg" alt="deploy-blog-to-netlify-7.jpg">&lt;span class="caption">※ 设定 HTTPS&lt;/span>&lt;/p>
&lt;p>这样，一个部署在 Netlify 上的具有持续集成功能的博客网站就完成了。&lt;/p>
&lt;h2 id="其他的一些操作">&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/#其他的一些操作" class="anchor-link" aria-label="其他的一些操作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>其他的一些操作&lt;/h2>
&lt;h3 id="实时编辑">&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/#实时编辑" class="anchor-link" aria-label="实时编辑">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>实时编辑&lt;/h3>
&lt;p>NexT 主题已经在主题配置文件中提供了在线编辑的功能。即：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">post_edit&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">url&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://github.com/guanqr/guanqr.com/edit/master/source/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这是我的设定，&lt;code>url&lt;/code> 后面填写的是你的仓库中存放文章的文件夹。设定完成后，可以看到在每一篇文章的右上角有一个「笔」的图标，点击后就可以跳转到你的仓库，进行实时编辑。&lt;/p>
&lt;h3 id="页面重定向">&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/#页面重定向" class="anchor-link" aria-label="页面重定向">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>页面重定向&lt;/h3>
&lt;p>Netlify 提供了自定义页面重定向的功能。如果你的域名或者文章结构发生了变化，可以借助重定向功能，将原来的文章 URL 重定向到现在的地址。这时候就需要 Netlify 网站中所说的 &lt;code>netlify.toml&lt;/code> 文件。&lt;/p>
&lt;p>新建一个 &lt;code>netlify.toml&lt;/code> 文件，存放在博客的根目录下。在里面添加以下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-toml" data-lang="toml">&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">redirects&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">from&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://原始域名/*&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">to&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;https://自定义域名/:splat&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">force&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c"># A redirect rule with all the supported properties&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">[[&lt;/span>&lt;span class="nx">redirects&lt;/span>&lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">from&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;/old-path&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">to&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="s2">&amp;#34;/new-path&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="https://guanqr.com/images/deploy-blog-to-netlify-8.jpg" alt="deploy-blog-to-netlify-8.jpg">&lt;span class="caption">※ 页面重定向&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/" target="_blank" rel="noopener">https://guanqr.com/tech/website/deploy-blog-to-netlify/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/netlify/">Netlify</category></item><item><title>
博客实现 PWA 功能</title><link>https://guanqr.com/tech/website/realize-pwa/</link><guid isPermaLink="true">https://guanqr.com/tech/website/realize-pwa/</guid><pubDate>Fri, 04 Oct 2019 07:15:43 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/pwa.png" alt="pwa.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">渐&lt;/span>进式网络应用程序（Progressive Web Apps，PWA）是一种运用现代的 Web API 以及传统的渐进式增强策略创建的跨平台 Web 应用程序。这种应用程序将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合，使其具有与原生应用相同的用户体验优势。&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>当你的网站实现了 PWA 功能后，使用 Google Chrome 浏览器访问时，就会发现浏览器地址栏右侧有一个 &lt;code>+&lt;/code> 号，并会提醒你安装此网页到桌面。当然，如果你是用手机访问的话，Chrome 就会在页面的底部提醒你安装。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>PWA 的特点：&lt;/p>
&lt;ol>
&lt;li>添加你的博客到电脑 / 手机的桌面，以原生应用般的方式浏览你的博客&lt;/li>
&lt;li>更快速地浏览你的博客&lt;/li>
&lt;li>离线浏览你的博客&lt;/li>
&lt;/ol>
&lt;p>第一点：对于读者，博客可一触即达，且无浏览器的地址栏、菜单栏等「无关」干扰；对于博客，非常有利于博客的用户留存率，也利于博客的品牌形象。第二点：可以利用 Service Worker 的缓存特点，极大地加速你的博客。第三点：能让你的博客更贴近 APP 的形象。&lt;/p>
&lt;p>PWA 有很多要求，比如：HTTPS、响应式布局等等，可参考这个 &lt;a href="https://developers.google.com/web/progressive-web-apps/checklist" target="_blank" rel="noopener">Checklist&lt;/a>，可用 &lt;a href="https://developers.google.com/web/tools/lighthouse" target="_blank" rel="noopener">Lighthouse&lt;/a>&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup> 检查你的网站是否满足 PWA 的所有要求。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lighthouse-pwa.png" alt="lighthouse-pwa.png">&lt;span class="caption">※ Lighthouse 检测结果&lt;/span>&lt;/p>
&lt;p>我在之前的文章《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》中提到过如何实现 PWA 功能。在那一篇文章中，我使用的是 Hexo 的一款插件 hexo-service-worker。但最近几个月，通过这款插件生成的 &lt;code>sw.js&lt;/code> 文件无法被浏览器识别，且网页停止自动更新，需要手动清理缓存才可以看到最新的内容。这显然是与我们的意愿相违背的。&lt;/p>
&lt;p>那么该如何改进呢，还有别的插件能提供这样的功能吗？&lt;/p>
&lt;p>目前和实现 PWA 相关的 Hexo 插件总共有三个：&lt;/p>
&lt;ol>
&lt;li>&lt;a href="https://github.com/zoumiaojiang/hexo-service-worker" target="_blank" rel="noopener">hexo-service-worker&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://github.com/JLHwung/hexo-offline" target="_blank" rel="noopener">hexo-offline&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://github.com/lavas-project/hexo-pwa" target="_blank" rel="noopener">hexo-pwa&lt;/a>&lt;/li>
&lt;/ol>
&lt;p>这三款插件是通过 sw-precache 实现文件的预缓存，都有各自的独特之处，但都不太完美。其实还可以使用 Gulp，利用 Workbox 实现 PWA，而且这种方法适用于各种静态博客，不仅限于 Hexo。&lt;/p>
&lt;h2 id="三款插件">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#三款插件" class="anchor-link" aria-label="三款插件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>三款插件&lt;/h2>
&lt;p>hexo-service-worker 和 hexo-offline 插件的设定方法几乎相同，hexo-service-worker 的作者也说他的这款插件是根据 hexo-offline 插件进行的一些魔改。多出来的一项功能就是，当你的博客更新后，网页上方会弹出一个提示，提醒你网站已经更新完成，请刷新网页。因此这两款插件的使用方法我不再做过多的讲解，直接参考我的文章《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》以及官方文档进行配置即可。&lt;/p>
&lt;p>这里还要特别提醒一点，上述两款插件在站点配置文件中的配置内容仅有一处不同：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">service_worker&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 这是 hexo-service-worker 的配置开头&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">offline&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 这是 hexo-offline 的配置开头&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>上文提到，我使用这两款插件的时候都遇到了问题，而且这个问题只是在最近才遇到的，我在别的网站进行测试，问题同样会发生。我不知道是什么原因，导致浏览器无法识别 &lt;code>sw.js&lt;/code>，所以才放弃了这两款插件，从而开始使用 hexo-pwa。&lt;/p>
&lt;p>下面我重点说明 hexo-pwa 插件的配置。&lt;/p>
&lt;p>这一款插件的特别之处在于，你可以直接在站点的配置文件中设定 &lt;code>manifest.json&lt;/code> 的内容，而无需额外设定。通过：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm install --save hexo-pwa
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>安装完成插件后，在站点配置文件中添加下述内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">pwa&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">manifest&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/manifest.json&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">body&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">hexo&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">short_name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">hexo&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">icons&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">src&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/images/android-chrome-192x192.png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">sizes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">192x192&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">type&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">image/png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">src&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/images/android-chrome-512x512.png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">sizes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">512x512&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">type&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">image/png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">start_url&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/index.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">theme_color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#ffffff&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">background_color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#ffffff&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">display&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">standalone&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">serviceWorker&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/sw.js&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">preload&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">urls&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">opts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">networkTimeoutSeconds&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">routes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">pattern&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="cp">!!js/regexp&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/hm.baidu.com/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">strategy&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">networkOnly&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">pattern&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="cp">!!js/regexp&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/.*\.(js|css|jpg|jpeg|png|gif)$/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">strategy&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">cacheFirst&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">pattern&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="cp">!!js/regexp&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/\//&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">strategy&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">networkFirst&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">priority&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>manifest:&lt;/code> 后面接的就是 &lt;code>manifest.json&lt;/code> 的设定，在此处对博客的名称、图标等进行设定，运行该插件后，可以直接在 &lt;code>public&lt;/code> 中生成 &lt;code>manifest.json&lt;/code> 文件。&lt;code>serviceWorker:&lt;/code> 后面接的就是你要设置的缓存内容。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">preload&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">urls&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这一部分是设置中的重点，&lt;code>posts:&lt;/code> 后面的数字就是你想要缓存的文章数量，注意这里只能够设置缓存文章。如果你想要缓存全部的文章，可以将该数字设置到超过你的文章总数。比如 &lt;code>200&lt;/code>。当然，特定的页面也可以进行缓存，在 &lt;code>url:&lt;/code> 的后面，你可以输入你想要缓存的特定页面。比如主页，就是输入 &lt;code>- /&lt;/code>，分类页面，输入的是 &lt;code>- /categories/&lt;/code>。这个插件的缺点就在于这里，如果你想要缓存博客的全部页面，那只能将所在目录一个一个输入进去。&lt;/p>
&lt;h2 id="workbox">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#workbox" class="anchor-link" aria-label="workbox">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Workbox&lt;/h2>
&lt;p>我目前采用的就是通过 Workbox 实现博客的 PWA，个人感觉效果要比使用上述三种插件要好很多。&lt;/p>
&lt;p>首先依然是设定你的 &lt;code>manifest.json&lt;/code> 文件，直接参考《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》中的「将博客添加至桌面」这一章节即可。&lt;/p>
&lt;p>由于需要使用 Node 的模块，因此我们的电脑必须安装 &lt;a href="https://nodejs.org/zh-cn/download/" target="_blank" rel="noopener">Node.js&lt;/a>。如果你使用的是 Hexo，那么是已经安装过的；如果你使用的并非基于 Node.js 的博客框架，比如 Hugo，那么请自行安装一下。然后，我们安装模块：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install workbox-build gulp gulp-uglify readable-stream uglify-es --save-dev
&lt;/code>&lt;/pre>&lt;p>这里 workbox-build 模块可以通过 Gulp 生成 &lt;code>sw.js&lt;/code> 文件。&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>除了使用 workbox-build 模块生成 &lt;code>sw.js&lt;/code> 外，还可以使用 Golang 程序生成 &lt;code>sw.js&lt;/code>，具体的方法在文章末尾。&lt;/p>&lt;/div>
&lt;blockquote>
&lt;p>如何将安装的模块更新到最新版本呢？&lt;/p>
&lt;pre tabindex="0">&lt;code>npm update
&lt;/code>&lt;/pre>&lt;p>如果不生效，可继续尝试（下方以 &lt;code>workbox-build&lt;/code> 为例）：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm outdated
Package Current Wanted Latest Location
workbox-build 4.3.1 4.3.1 5.0.0 blog
npm install workbox-build@latest
&lt;/code>&lt;/pre>&lt;/blockquote>
&lt;p>这里便需要依靠 Gulp 生成 &lt;code>sw.js&lt;/code> 文件。对于 Gulp 这一款工具的使用，也可以参考我的另一篇文章《&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/">使用 Gulp 压缩博客静态资源&lt;/a>》进行初步的了解。&lt;/p>
&lt;p>接下来，我们在博客站点根目录下新建一个 &lt;code>gulpfile.js&lt;/code> 文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">gulp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;gulp&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">workbox&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;workbox-build&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">uglifyes&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;uglify-es&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">composer&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp-uglify/composer&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">uglify&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">composer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">uglifyes&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">console&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">pipeline&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;readable-stream&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">pipeline&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;generate-service-worker&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">injectManifest&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">swSrc&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;./sw-template.js&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">swDest&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;./public/sw.js&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">globDirectory&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;./public&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">globPatterns&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;**/*.{html,css,js,json,woff2}&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">modifyURLPrefix&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;./&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;uglify&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">pipeline&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">src&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;./public/sw.js&amp;#34;&lt;/span>&lt;span class="p">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">uglify&lt;/span>&lt;span class="p">(),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dest&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;./public&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;build&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">series&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;generate-service-worker&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;uglify&amp;#34;&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，&lt;code>globPatterns&lt;/code> 就是生成的预缓存列表的文件匹配模式，在这里就是将所有的 &lt;code>html&lt;/code>、&lt;code>css&lt;/code>、&lt;code>js&lt;/code>、&lt;code>json&lt;/code>、&lt;code>woff2&lt;/code> 文件预缓存，即博客首次加载时，自动将这些文件缓存。&lt;/p>
&lt;p>如果你此前使用 Gulp 压缩了博客的源码，你的站点根目录下应该已经存在 &lt;code>gulpfile.js&lt;/code> 文件，那么可以直接在该文件中添加上述内容，重复的地方忽略即可。&lt;/p>
&lt;p>&lt;span id="sw-template">&lt;/span>然后，再在站点根目录下新建一个 &lt;code>sw-template.js&lt;/code> 文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">workboxVersion&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;5.0.0&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">importScripts&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sb">`https://storage.googleapis.com/workbox-cdn/releases/&lt;/span>&lt;span class="si">${&lt;/span>&lt;span class="nx">workboxVersion&lt;/span>&lt;span class="si">}&lt;/span>&lt;span class="sb">/workbox-sw.js`&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">core&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">setCacheNameDetails&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">prefix&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;Guanqr&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">core&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">skipWaiting&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">core&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">clientsClaim&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">precaching&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">precacheAndRoute&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">self&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">__WB_MANIFEST&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">precaching&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cleanupOutdatedCaches&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Images
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheFirst&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;images&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">plugins&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">expiration&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ExpirationPlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxEntries&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxAgeSeconds&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">30&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cacheableResponse&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheableResponsePlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">statuses&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Fonts
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/\.(?:eot|ttf|woff|woff2)$/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheFirst&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;fonts&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">plugins&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">expiration&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ExpirationPlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxEntries&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxAgeSeconds&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">30&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cacheableResponse&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheableResponsePlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">statuses&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Google Fonts
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/^https:\/\/fonts\.googleapis\.com/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">StaleWhileRevalidate&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;google-fonts-stylesheets&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/^https:\/\/fonts\.gstatic\.com/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheFirst&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;google-fonts-webfonts&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">plugins&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">expiration&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ExpirationPlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxEntries&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxAgeSeconds&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">30&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cacheableResponse&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheableResponsePlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">statuses&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Static Libraries
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/^https:\/\/cdn\.jsdelivr\.net/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheFirst&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;static-libs&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">plugins&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">expiration&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ExpirationPlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxEntries&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxAgeSeconds&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">30&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cacheableResponse&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheableResponsePlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">statuses&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// External Images
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">routing&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">registerRoute&lt;/span>&lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="sr">/^https:\/\/raw\.githubusercontent\.com\/reuixiy\/hugo-theme-meme\/master\/static\/icons\/.*/&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">strategies&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheFirst&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">cacheName&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;external-images&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">plugins&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">expiration&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">ExpirationPlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxEntries&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1000&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">maxAgeSeconds&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">60&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">24&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">30&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">new&lt;/span> &lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cacheableResponse&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">CacheableResponsePlugin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">statuses&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">200&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">workbox&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">googleAnalytics&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">initialize&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，请将 &lt;code>prefix&lt;/code> 修改为你博客的名字（英文），请查看 Workbox 的 &lt;a href="https://github.com/GoogleChrome/workbox/releases" target="_blank" rel="noopener">Releases&lt;/a> 页面并务必视&lt;em class="emphasis-point">版本说明&lt;/em>修改 &lt;code>workboxVersion&lt;/code> 为最新版，其它项也请务必结合你的情况自行修改。如果你想用其它缓存策略，请自行查看&lt;a href="https://developers.google.com/web/tools/workbox/modules/workbox-strategies" target="_blank" rel="noopener">相关文档&lt;/a>。同时，提醒一下，&lt;em class="emphasis-point">绝对不要&lt;/em>缓存视频或者预缓存图片。&lt;/p>
&lt;p>设置完成后，运行命令：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">hexo g &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> gulp build
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>即可在 &lt;code>public&lt;/code> 文件夹下生成一个 &lt;code>sw.js&lt;/code> 文件。&lt;/p>
&lt;p>最后，我们还需要在 HTML 页面中加入相关代码以注册 Service Worker，并添加页面更新后的提醒功能。在这里可能要编辑你的主题相关模板文件，把以下代码放在 &lt;code>&amp;lt;/body&amp;gt;&lt;/code> 的前面：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;app-refresh&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;app-refresh&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;app-refresh-wrap&amp;#34;&lt;/span> &lt;span class="na">onclick&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;location.reload()&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">label&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>已更新最新版本&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">label&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>点击刷新&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;serviceWorker&amp;#39;&lt;/span> &lt;span class="k">in&lt;/span> &lt;span class="nx">navigator&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">navigator&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">serviceWorker&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">controller&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">navigator&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">serviceWorker&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">addEventListener&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;controllerchange&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">showNotification&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">window&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">addEventListener&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;load&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">navigator&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">serviceWorker&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">register&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;/sw.js&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">function&lt;/span> &lt;span class="nx">showNotification&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">querySelector&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;meta[name=theme-color]&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">content&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;#000&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementById&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;app-refresh&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">className&lt;/span> &lt;span class="o">+=&lt;/span> &lt;span class="s1">&amp;#39; app-refresh-show&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果你使用的是 Hexo 的 NexT 主题，且主题版本在 v7.4.0 以上，请直接在 &lt;code>~/themes/next/layout/_layout.swig&lt;/code> 文件中的 &lt;code>&amp;lt;/body&amp;gt;&lt;/code> 前面添加上述内容，不要使用主题的 inject 注入功能，在 &lt;code>~/source/_data/body-end.swig/&lt;/code> 中添加。因为如果你启用了 PJAX 功能，在 &lt;code>body-end.swig&lt;/code> 中添加的内容会自动带上 PJAX 的标签，亲测在博客部署后会报错。&lt;/p>
&lt;p>然后再添加以下 CSS 样式到你的自定义样式文件中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">app-refresh&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">overflow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">fixed&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">all&lt;/span> &lt;span class="mf">.3&lt;/span>&lt;span class="kt">s&lt;/span> &lt;span class="kc">ease&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">app-refresh-wrap&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">app-refresh-wrap&lt;/span> &lt;span class="nt">label&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">flex&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">app-refresh-show&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果你完成了上述配置，将网站部署后，就可以实现 PWA 了。&lt;/p>
&lt;hr>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>&lt;strong>一种使用 Golang 程序生成 &lt;code>sw.js&lt;/code> 的方法&lt;/strong>&lt;/p>&lt;/div>
&lt;p>程序设计的思路和 workbox-build 模块相同，根据 &lt;code>sw-template.js&lt;/code> 模板，编写 Golang 程序，遍历根目录下的所有文件，生成 &lt;code>sw.js&lt;/code> 文件。&lt;/p>
&lt;p>&lt;code>sw-template.js&lt;/code> 模板与&lt;a href="https://guanqr.com/tech/website/realize-pwa/#sw-template">上文&lt;/a>中的模板一直，只需要将中间部分进行修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ workbox.precaching.precacheAndRoute([{{- range $index, $element := . -}}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{- if ne $index 0 -}},
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{- end -}}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {revision:&amp;#34;{{$element.Revision}}&amp;#34;,url:&amp;#34;./{{$element.Url}}&amp;#34;}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{- end -}}]);
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>Golang 程序如下&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;span class="lnt">84
&lt;/span>&lt;span class="lnt">85
&lt;/span>&lt;span class="lnt">86
&lt;/span>&lt;span class="lnt">87
&lt;/span>&lt;span class="lnt">88
&lt;/span>&lt;span class="lnt">89
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">package&lt;/span> &lt;span class="nx">main&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="p">(&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;crypto/md5&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;encoding/hex&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;flag&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;html/template&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;io&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;io/ioutil&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;log&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;os&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s">&amp;#34;path&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">type&lt;/span> &lt;span class="nx">Cache&lt;/span> &lt;span class="kd">struct&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">Url&lt;/span> &lt;span class="kt">string&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">Revision&lt;/span> &lt;span class="kt">string&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">func&lt;/span> &lt;span class="nf">GetCacheList&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">rootPath&lt;/span> &lt;span class="kt">string&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">dirPath&lt;/span> &lt;span class="kt">string&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">l&lt;/span> &lt;span class="p">[]&lt;/span>&lt;span class="nx">Cache&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="kt">error&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dir&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">ioutil&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">ReadDir&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">path&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">rootPath&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">dirPath&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="nx">_&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">fi&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="k">range&lt;/span> &lt;span class="nx">dir&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">relPath&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">dirPath&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">fi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Name&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">fi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">IsDir&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dirList&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nf">GetCacheList&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">rootPath&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">relPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="kc">nil&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">l&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">l&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">dirList&lt;/span>&lt;span class="o">...&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">ext&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Ext&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">fi&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Name&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">ext&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s">&amp;#34;.html&amp;#34;&lt;/span> &lt;span class="o">||&lt;/span> &lt;span class="nx">ext&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s">&amp;#34;.js&amp;#34;&lt;/span> &lt;span class="o">||&lt;/span> &lt;span class="nx">ext&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s">&amp;#34;.css&amp;#34;&lt;/span> &lt;span class="o">||&lt;/span> &lt;span class="nx">ext&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s">&amp;#34;.json&amp;#34;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">realPath&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">rootPath&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">relPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">revision&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nf">GetHash&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">realPath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="kc">nil&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">c&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">Cache&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">Url&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nx">relPath&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">Revision&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nx">revision&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">l&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nb">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">l&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">c&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">func&lt;/span> &lt;span class="nf">GetHash&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">filePath&lt;/span> &lt;span class="kt">string&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">hashString&lt;/span> &lt;span class="kt">string&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="kt">error&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">f&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">os&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">filePath&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">defer&lt;/span> &lt;span class="nx">f&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">h&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">md5&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">New&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">_&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nx">io&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Copy&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">h&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">f&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">hashBytes&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">h&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Sum&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kc">nil&lt;/span>&lt;span class="p">)[:&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">hashString&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nx">hex&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">EncodeToString&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">hashBytes&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">func&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">root&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">flag&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">String&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;r&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;./public&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;根目录&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">temp&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">flag&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">String&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;t&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;./workbox/sw-template-go.js&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;模板路径&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">flag&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Parse&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">l&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nf">GetCacheList&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nx">root&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">log&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Fatal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">err&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">t&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">template&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">ParseFiles&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nx">temp&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">log&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Fatal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">err&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">f&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">:=&lt;/span> &lt;span class="nx">os&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">OpenFile&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">path&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Join&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nx">root&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;sw.js&amp;#34;&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="nx">os&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">O_CREATE&lt;/span>&lt;span class="p">|&lt;/span>&lt;span class="nx">os&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">O_WRONLY&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mo">0755&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">log&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Fatal&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">err&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">err&lt;/span> &lt;span class="p">=&lt;/span> &lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Execute&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">f&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">l&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="nx">err&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="kc">nil&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">log&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nf">Println&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">err&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>运行该程序即可生成 &lt;code>sw.js&lt;/code>。不过为了压缩该文件大小，仍需要使用 Gulp 中的 uglify 组件。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考①：&lt;a href="https://zh.wikipedia.org/wiki/%E6%B8%90%E8%BF%9B%E5%BC%8F%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F" target="_blank" rel="noopener">渐进式网络应用程序 | 维基百科&lt;/a>&lt;br>参考②：&lt;a href="https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps" target="_blank" rel="noopener">渐进式 Web 应用（PWA） | MDN web docs&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>这里一个提供在线测试的网站：&lt;a href="https://www.webpagetest.org/lighthouse" target="_blank" rel="noopener">https://www.webpagetest.org/lighthouse&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>参考：&lt;a href="https://everness.me/tech/workbox-in-golang/" target="_blank" rel="noopener">使用 Golang 生成 Service Worker | EVERGARDEN&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/realize-pwa/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/realize-pwa/" target="_blank" rel="noopener">https://guanqr.com/tech/website/realize-pwa/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/gulp/">Gulp</category><category domain="https://guanqr.com/tags/hugo/">Hugo</category><category domain="https://guanqr.com/tags/meme/">MemE</category><category domain="https://guanqr.com/tags/next/">NexT</category><category domain="https://guanqr.com/tags/pwa/">PWA</category></item><item><title>
使用 Gulp 压缩博客静态资源</title><link>https://guanqr.com/tech/website/use-gulp-to-compress-source-code/</link><guid isPermaLink="true">https://guanqr.com/tech/website/use-gulp-to-compress-source-code/</guid><pubDate>Wed, 02 Oct 2019 13:24:25 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/gulp.jpg" alt="gulp.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">网&lt;/span>站的访问速度是影响网站阅读量的一个重要因素，因此加速网页的访问速度十分重要。对于加速博客访问速度的方法，可以使用将浏览器第一次加载的数据存入缓存，第二次访问时就能够节省很多时间，这一种方法以及所需的插件，可以参见我之前的文章《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》，在此不再赘述。在本文中，我主要讲述使用 Gulp 压缩网页源码的方法，这一种方法也可以提升一定的网站访问速度。&lt;/p>
&lt;h2 id="为什么要压缩源码">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#为什么要压缩源码" class="anchor-link" aria-label="为什么要压缩源码">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>为什么要压缩源码&lt;/h2>
&lt;p>我是采用 Hexo 博客框架搭建的博客，文章的书写是先写入 Markdown 文件，然后通过 Hexo 将 Markdown 文件转换成 HTML 文件。在转换后的 HTML 文件代码中，会留下大量的空白空间，毕竟计算机程序不如人的大脑那么灵活。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/use-gulp-to-compress-source-code.jpg" alt="use-gulp-to-compress-source-code.jpg">&lt;span class="caption">※ 代码中大量的空白&lt;/span>&lt;/p>
&lt;p>不只是 HTML 文件，网站中引入的 CSS、JavaScript 等文件中也会存在一定的空白。而这些空白在网页的载入的时候，浏览器并不会忽略掉，会消耗一定的时间。因此将这些空白的区域去除很重要。&lt;/p>
&lt;p>使用 Gulp 工具，能够很好地压缩静态资源，去除这些空白。&lt;/p>
&lt;h2 id="如何使用">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#如何使用" class="anchor-link" aria-label="如何使用">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>如何使用&lt;/h2>
&lt;p>目前在网上搜索相关的教程，大都是基于 Gulp v3 版本，而目前 Gulp 已经更新到了 v4，使用旧版本的方法会报错。在这里我提供 Gulp v4 版本的使用方法。&lt;/p>
&lt;h3 id="安装插件">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#安装插件" class="anchor-link" aria-label="安装插件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装插件&lt;/h3>
&lt;p>全局安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm install gulp -g
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后到站点文件夹的根目录安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在这里说明一下，使用该工具可以压缩 HTML、CSS、JavaScript 文件，但我并没有压缩 JavaScript 文件，因为有很大的概率会报错，实际也并不需要压缩，因为大部分 JavaScript 都已压缩过。&lt;/p>
&lt;p>如果你也考虑不压缩 JavaScript 文件，可以选择不安装 &lt;code>gulp-uglify&lt;/code>。&lt;/p>
&lt;h3 id="配置文件">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#配置文件" class="anchor-link" aria-label="配置文件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配置文件&lt;/h3>
&lt;p>在站点文件夹的根目录下，新建一个文件，命名为 &lt;code>gulpfile.js&lt;/code>，内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">gulp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// Plugins 模块获取
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">minifycss&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp-minify-css&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">uglify&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp-uglify&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">htmlmin&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp-htmlmin&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">htmlclean&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">require&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;gulp-htmlclean&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 压缩 css
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;minify-css&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">src&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;./public/**/*.css&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">minifycss&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dest&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;./public&amp;#39;&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 压缩 html
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;minify-html&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">src&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;./public/**/*.html&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">htmlclean&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">htmlmin&lt;/span>&lt;span class="p">({&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">removeComments&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">minifyJS&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">minifyCSS&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">minifyURLs&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dest&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;./public&amp;#39;&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 压缩 js 不压缩 min.js
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;minify-js&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">src&lt;/span>&lt;span class="p">([&lt;/span>&lt;span class="s1">&amp;#39;./public/**/*.js&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;!./public/**/*.min.js&amp;#39;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">uglify&lt;/span>&lt;span class="p">())&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nx">pipe&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dest&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;./public&amp;#39;&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 4.0 以前的写法
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// gulp.task(&amp;#39;default&amp;#39;, [
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">// &amp;#39;minify-html&amp;#39;, &amp;#39;minify-css&amp;#39;, &amp;#39;minify-js&amp;#39;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// ]);
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 4.0 以后的写法
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 执行 gulp 命令时执行的任务
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">task&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;default&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">gulp&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">parallel&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;minify-html&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;minify-css&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s1">&amp;#39;minify-js&amp;#39;&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果不压缩 JavaScript 文件，则将上述代码中有关 &lt;code>minify-js&lt;/code> 的代码删除即可。&lt;/p>
&lt;h3 id="执行命令">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#执行命令" class="anchor-link" aria-label="执行命令">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>执行命令&lt;/h3>
&lt;pre tabindex="0">&lt;code>hexo clean //先清理文件
hexo g //编译生成静态文件
gulp //Gulp 插件执行压缩任务
hexo s //开启服务
&lt;/code>&lt;/pre>&lt;p>正常运行后应该显示：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ gulp
[13:08:13] Using gulpfile G:\Hexo\gulpfile.js
[13:08:13] Starting &amp;#39;default&amp;#39;...
[13:08:13] Starting &amp;#39;minify-html&amp;#39;...
[13:08:13] Starting &amp;#39;minify-css&amp;#39;...
[13:08:15] Finished &amp;#39;minify-css&amp;#39; after 1.55 s
[13:08:18] Finished &amp;#39;minify-html&amp;#39; after 4.79 s
[13:08:18] Finished &amp;#39;default&amp;#39; after 4.79 s
&lt;/code>&lt;/pre>&lt;p>然后你就可以从站点中的 &lt;code>public&lt;/code> 文件夹中检查这些文件是否被压缩&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>除了上述方法外，Hexo 还有一个插件（&lt;a href="https://github.com/rozbo/hexo-neat" target="_blank" rel="noopener">hexo-neat&lt;/a>）能够压缩静态资源。不过我并没有使用过，如果你想要使用这个插件也可以试一试。另外，我还使用 Gulp 结合 workbox-build 实现了博客的 PWA 功能，具体的介绍可以看这篇&lt;a href="https://guanqr.com/tech/website/realize-pwa/">文章&lt;/a>。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>&lt;a href="https://blog.csdn.net/java_1996/article/details/86499625" target="_blank" rel="noopener">基于 Hexo 搭建个人博客优化（五）——压缩篇（gulp 4.0 压缩静态资源）| illusorycloud&lt;/a>。&amp;#160;&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/use-gulp-to-compress-source-code/" target="_blank" rel="noopener">https://guanqr.com/tech/website/use-gulp-to-compress-source-code/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/gulp/">Gulp</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category></item><item><title>
喜迎祖国七十华诞</title><link>https://guanqr.com/life/school/china-70th-anniversary/</link><guid isPermaLink="true">https://guanqr.com/life/school/china-70th-anniversary/</guid><pubDate>Tue, 01 Oct 2019 13:25:16 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">今&lt;/span>年是新中国成立七十周年，十月一日，国庆节，天安门广场上举办了隆重的阅兵、分列式、花车游行、放烟花等等大型活动。身在浙江杭州，不能赶到首都去感受这样热闹欢乐的氛围，实属遗憾。还记得高中时期，抗战胜利七十周年阅兵前的几个月，我总能在学校的上空看到那些要进行阅兵的飞行员在反复演练飞行队列（家在天津和北京的交界地带）。飞机的轰鸣声盖住了课堂上老师的讲话声，但我丝毫没有觉得这是一种噪音。&lt;/p>
&lt;p>国庆节期间上映了三部献礼片：《我和我的祖国》《攀登者》《中国机长》。我在第一时间观看了这三部电影，感触颇深，不记得流下来多少次泪水。身边有一些人，认为这一类的电影是无聊的，没有什么看头的，他们不会去看这些电影，我也无话可说，毕竟每个人的理念是不同的。我一直认为爱国是一种很自豪的事情，表达出来，更是一种内心的满足。因此我会在这三部电影八月初刚出预告的时候，反反复复地观看，刷弹幕和评论，看着那些满腔热血和充满期待的评论，内心就有一种满足感。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/china-70th-anniversary-0.jpg" alt="china-70th-anniversary-0.jpg">&lt;span class="caption">※ 三张电影票&lt;/span>&lt;/p>
&lt;p>早上六点半，我定的闹钟响了。我原本是要参加玉泉校区的国庆升旗仪式，但手机上收到了短信，因为大雨，升旗活动取消了。可能是学校怕有人淋雨感冒吧，对外通知活动取消了，实际上升旗还是照常进行的。毛泽东像前的草坪上，围着一群人，看着旗手缓缓将国旗升起。人群中有小孩，有青年，也有老人。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/china-70th-anniversary-1.jpg" alt="china-70th-anniversary-1.jpg">&lt;span class="caption">※ 永谦剧场门口&lt;/span>&lt;/p>
&lt;p>八点，我吃了在玉泉校区的第一顿早饭（以前为了睡懒觉主动放弃了早饭），然后就去永谦剧场看阅兵了。周一早上，同学问我，在寝室里看阅兵不是一样吗，我说，我想感受那种几百人一起看阅兵的氛围。在永谦剧场的门口，我领到了一枚纪念徽章。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/china-70th-anniversary-2.jpg" alt="china-70th-anniversary-2.jpg">&lt;span class="caption">※ 纪念徽章&lt;/span>&lt;/p>
&lt;p>阅兵开始前，永谦剧场已经坐满了人，甚至有人还为抢不到中间的座位而后悔自己没有早来一点。大家都是自发来到这里看阅兵的。在剧场中，有工作人员给我们发放了印有五星红旗的贴纸，我们把它贴到了自己的脸上还有胳膊上。&lt;/p>
&lt;p>阅兵开始的时候，随着总理「全体起立」的口令，全剧场的人都站了起来，我相信，在这一刻，全国全世界的中国人都站了起来，等待着仪仗队将国旗护送到升旗台前。礼炮声响彻云霄，军人们整齐的步伐也在触动着我的内心。那一刻，全场肃静，我热泪盈眶。我从未见过这样的场面，大家都怀着满腔的热血。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/china-70th-anniversary-3.jpg" alt="china-70th-anniversary-3.jpg">&lt;span class="caption">※ 剧场中座无虚席&lt;/span>&lt;/p>
&lt;p>上午的阅兵结束后，我从剧场门口出来，看到广场上还有很多站着观看的学生，广场上有一个大屏幕。我回到寝室，内心感触颇深。很多人说现在的九零后、零零后懒散，生活在富裕的生活中，不知道过去的劳动人民有多么艰苦。我想，我们知道，我们知道祖国的发展的艰辛历程，因此我们懂得珍惜。最近这几年，我们经历了很多挫折，但一提到中国，我就有一种很自豪的感觉。虽然现在外界还是存在很多对中国的质疑，但中国已经在国际上树立了自己坚定不动摇的形象。我相信，我们这一代人会将祖国建设地更加美好。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/china-70th-anniversary/" target="_blank" rel="noopener">https://guanqr.com/life/school/china-70th-anniversary/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
穷与富之间的分割与寄生</title><link>https://guanqr.com/life/films/gisaengchung/</link><guid isPermaLink="true">https://guanqr.com/life/films/gisaengchung/</guid><pubDate>Sat, 28 Sep 2019 08:41:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">前&lt;/span>段时间看到《寄生虫》这部来自韩国的电影获得了第 72 届戛纳国际电影节的最佳影片奖，我被这部电影的标题和海报深深地吸引住了。「寄生虫」，从字面意思来看，我以为讲述的是一个偏向恐怖题材的故事，海报中的所有人物的眼睛都是故意被遮住的，这更加给人一种诡异的气氛。我看过的韩国电影不多，印象中也就两三部吧，包括《雪国列车》这样的走国际路线的英文电影，我其实对于韩国电影并不太感兴趣，但最近一段时间，我在 b 站还有微信上看到很多媒体都在议论《寄生虫》，便趁着周末空闲时间观看了它。总的来说，这部电影有着一种对心灵的冲击与震撼。&lt;/p>
&lt;h2 id="海报与标题">&lt;a href="https://guanqr.com/life/films/gisaengchung/#海报与标题" class="anchor-link" aria-label="海报与标题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>海报与标题&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/gisaengchung-poster.jpg" alt="gisaengchung-poster.jpg">&lt;span class="caption">※ 电影海报&lt;/span>&lt;/p>
&lt;p>开篇还是先谈谈这部电影的海报吧。&lt;/p>
&lt;p>海报中所有的人物眼睛都被遮挡。人们常说眼睛是心灵的窗户，因此遮挡住眼睛，就会给人一种不舒服的感觉。我们经常在电视上看到一些审讯嫌犯的视频，那些嫌犯的眼睛都是打上马赛克的。看过电影的人就会发现，海报中的「富人」眼睛用白色打码，「穷人」眼睛用黑色打码，海报的左下角还有一个倒下的人露出的双腿，而在落地窗的后面，一个富人家的男孩正在默默注视着发生的一切。单单一个海报就营造出了无比压抑的氛围，着实令人佩服海报的设计者。如今大部分电影海报的设计都缺少了一种艺术感，都是电影主要人物的人头堆砌，人们看多了也就觉得平平无奇了，而这样一种海报让我眼前一亮。&lt;/p>
&lt;p>「寄生虫」，如果单独看电影的名字，我想到的就是某一个村庄发生了一个神秘事件，一只寄生虫寄生在了一个人的身上，发生了各种各样恐怖的事这样好莱坞常用的故事情节。然而并不是，「寄生虫」，讲的是主人公这样的「穷人」寄生在「富人」的家中的故事。&lt;/p>
&lt;h2 id="故事梗概">&lt;a href="https://guanqr.com/life/films/gisaengchung/#故事梗概" class="anchor-link" aria-label="故事梗概">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>故事梗概&lt;/h2>
&lt;p>主人公基宇一家住在一个巷子最深处的地下室中，家人都没有正式稳定的工作，他还有一个妹妹基婷。一天，基宇的同学上门拜访，他告诉基宇，自己在一个有钱人家里给他们的女儿做家教，太太是一个头脑简单出手又阔绰的女人，因为自己要出国留学，所以将家教的职位暂时转交给基宇。&lt;/p>
&lt;p>朴社长家是一个大别墅，家中平时只有太太、一个女儿和一个小儿子在。基婷帮助基宇伪造了一份高校身份证明。基宇以高校学生的身份来到了朴社长家中，并且见到了他的太太，成为了朴社长女儿的家教。基宇见到朴社长的儿子具有绘画天赋，就谎称自己认识一位艺术家，可以当其儿子的老师，将自己的妹妹基婷介绍了过来，再后来，他们一家精心策划了一场场的骗局，基宇的父母替代了朴社长家的司机和保姆的位置。一家人如同寄生虫一般的进入了朴社长家里工作。&lt;/p>
&lt;p>朴社长的儿子小时候经历了一场精神刺激，导致精神出现了一些异常，朴太太告诉基宇，他儿子说在家中看到过鬼出没，基宇并没有放在心上。其实，他儿子看到的不是鬼，而是一个人。&lt;/p>
&lt;p>其实，真正寄生的并不止他们一家，朴社长家有一个不为人知的地下室，连朴社长也不知道。前保姆的丈夫为了躲债常年居住在地下室中，靠前保姆的喂养生活。一次，朴社长一家人出去野营，基宇一家就放肆地住在了别墅中。前保姆半夜回来想去地下室看一看自己的丈夫是否被饿死，发现了基宇一家人的秘密。而基宇一家人也因此知道了前保姆一家人的秘密。他们都是「寄生虫」。&lt;/p>
&lt;p>前保姆明白是基宇一家害了她失去工作，她想要揭露真相，便和基宇一家发生了争执。最终，在冲动之下，前保姆的丈夫刺伤了基宇和基婷，朴社长杀死了前保姆的丈夫，基宇的父亲杀死了朴社长，永远躲藏在了别墅的地下室中。&lt;/p>
&lt;p>基宇伤好后，励志好好读书，将来能挣到足够多的钱，买到这栋别墅，拯救躲在地下室中的父亲。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gisaengchung-cut-0.jpg" alt="gisaengchung-cut-0.jpg">&lt;span class="caption">※ 寄生在富人家&lt;/span>&lt;/p>
&lt;h2 id="故事简评">&lt;a href="https://guanqr.com/life/films/gisaengchung/#故事简评" class="anchor-link" aria-label="故事简评">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>故事简评&lt;/h2>
&lt;p>整部电影剧情的发展很流畅，故事中出现了很多细微的事物，看似不起眼的东西，其实为后文的发展埋下了伏笔。比如说：这栋别墅的历史，儿子半夜看到鬼，摩尔斯电码等等。这些都成为了故事发展的必要线索。&lt;/p>
&lt;p>基宇一家人住在地下室中，没有工作。但他们都有着拿手的本领，基宇懂得如何做家教，让富人家的女儿爱上他，基婷也懂心理学和绘画，而基宇的父亲也是一个技术娴熟的司机。他们配得上这些工作，却得不到一个机遇。&lt;/p>
&lt;p>当他们一家人都寄生在了朴社长家的时候，他们必然会知道，早晚有一天，所有的秘密都会被揭露。因为他们看似毫无破绽的计划，其实存在很多的漏洞。比如他们一家人的气味，他们的生活习惯，都引起了朴社长家人的怀疑。&lt;/p>
&lt;p>朴社长一家人在故事中没有做错任何的事情。朴夫人是一个很单纯的人。我觉得她单纯地有一些不可思议。现实世界中，这么有钱的人，会这么天真无邪，相信一个陌生人的全部话语吗？但她就是这么相信了，接受了基宇的一家人（当然她并不知道她雇的这些人其实是一家人）。&lt;/p>
&lt;p>基宇一家人和朴社长一家形成了鲜明的对比。以往电影中的主人公经常给人一种「高大上」的正面形象，而基宇一家人却更像是「反派」，生活中充满了贪婪和谎言，寄生在一个原本和谐的家庭中，扰乱了他们的生活，赶走了原本工作很出色的司机和保姆。但他们却也有着令人同情的一面：生活不过如此，他们卑微的身份，为了生存，自然也就能作出这样的事情。&lt;/p>
&lt;p>电影中还有一些引人深思的细节。基宇一家人恶中有善，他们关心那个被他们赶走的前司机的去向，他们为躲藏在地下室中的前保姆一家送上吃的。而朴社长一家善却有一丝丝的伪善。朴夫人给基宇家教钱的时候却把钱抽掉了一部分。朴社长知道灯下发来的是求救的摩尔斯电码，但是他却一直保持沉默。基宇的父亲在车上问社长是真的爱夫人吗，社长却迟疑了……&lt;/p>
&lt;p>电影中还有很多很多细节值得我们关注和反思，一些细节在我看电影的时候并没有引起我的注意，我也是阅读了很多人的影评才恍然大悟的。比如那块其实是假的石头，带来了好运气，也成为了杀人利器；比如朴社长家的儿子所画的抽象画，其实画的是那天晚上看到的「鬼」——前保姆的丈夫。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/gisaengchung-cut-1.jpg" alt="gisaengchung-cut-1.jpg">&lt;span class="caption">※ 社长儿子的画作&lt;/span>&lt;/p>
&lt;p>沐浴庭院里的阳光就能进化成人，呼吸暗室里的空气只会走肉如鬼。抱上贫穷的石头终生无法脱手，染上廉价的气味永世不能消除。蜷缩地下的臭虫，用药剂开窗替自己杀菌；位居高处的宿主，用金钱雇人给自己消毒。富人吸着穷人的血高升，穷人寄在富人的屋苟活，人鬼同处一室分享食物，虫兽寄生一体发育恩仇。&lt;/p>
&lt;p>寄生虫，寄生在他人的身上，与宿主不可分割。&lt;/p>
&lt;p>当然，这部电影还有个引人深思的问题：富人寄生于穷人生产的商品和服务之上；穷人寄生于富人的权力和金钱之上。那么，到底谁才是「寄生虫」呢？&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/films/gisaengchung/" target="_blank" rel="noopener">https://guanqr.com/life/films/gisaengchung/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/films/">films</category><category domain="https://guanqr.com/tags/class-contradiction/">阶级矛盾</category><category domain="https://guanqr.com/tags/crime/">犯罪</category><category domain="https://guanqr.com/tags/family/">家庭</category></item><item><title>
从动物到上帝</title><link>https://guanqr.com/life/books/a-brief-history-of-humankind/</link><guid isPermaLink="true">https://guanqr.com/life/books/a-brief-history-of-humankind/</guid><pubDate>Sat, 07 Sep 2019 16:38:49 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="认知革命">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#认知革命" class="anchor-link" aria-label="认知革命">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#contents:认知革命" class="headings">认知革命&lt;/a>&lt;/h2>
&lt;h3 id="人类一种也没什么特别的动物">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#人类一种也没什么特别的动物" class="anchor-link" aria-label="人类一种也没什么特别的动物">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#contents:人类一种也没什么特别的动物" class="headings">人类：一种也没什么特别的动物&lt;/a>&lt;/h3>
&lt;p>作者将历史划分为三大革命：&lt;/p>
&lt;blockquote class="quote">
&lt;p>大约 7 万年前，「认知革命」让历史正式启动。大约 12000 年前，「农业革命」让历史加速发展，而到了大约不过 500 年前，「科学革命」可以说是让历史画下句号而另创新局。&lt;/p>&lt;/blockquote>
&lt;p>这本书也是分为这三大革命进行讲述的。&lt;/p>
&lt;p>初中学生物的时候，我们知道了界门纲目科属种的划分，也认识到了生殖隔离。生物的命名都是用拉丁文，每个名字都是由属名和种名两部分组成，比如人类，叫做 Homo sapiens，人属人种，又叫智人。我们经常说，人类的存在是一种奇迹，而现如今和人类基因最相近的动物，是黑猩猩。但二者的差异也是非常大的。不难想象，在很久以前，地球上存在更多人类的近亲，不仅仅是智人一种。&lt;/p>
&lt;p>作者将我们统称为智人，而人类则指的是人属的所有成员。由于地球各地区的气候不同，人类朝着不同的方向进化，欧洲和西亚的人类为尼安德特人，肌肉发达，身材魁梧，适应亚欧大陆冰河时期的寒冷气候，东亚则是直立人，印度尼西亚的爪哇岛上是梭罗人，很适应热带的生活环境，而在弗洛里斯岛上，则存在身材矮小的弗洛里斯人。当然还有其他地区的不同的人种，这里不再一一列举。总的来说，在当时，亚非欧地区，存在着各式各样的人种，这些人种并非是线性发展的，由某一种演化成为另一种，而是在同一时间就存在的。&lt;/p>
&lt;p>曾经我在科教频道上看过一期讲解人类进化的节目。人的大脑脑容量随着时间的推移越来越大，我们可以通过头颅的对比，发现现代人与曾经的人类的差异，头颅越来越大，而颚部越来越小。脑容量的增加是进化的趋势，人类懂得了制造和使用工具，直立行走，解放了前肢，一些器官也随之退化。记得几年前在网络上看过一张预测未来人类形态的图，人类的头颅变得更大，四肢变得更纤细，完全就是现在人们想象到的外星人的模样。另外，由于头颅变大，分娩死亡的风险也加大，人类只能将婴儿早产。人类产子的时间较其他哺乳动物都要短，这也导致了婴儿出生后还需要更为贴心的照顾才能成长。婴儿的可塑性也比其他哺乳动物强。&lt;/p>
&lt;p>曾经的人类处于食物链的中层，需要躲避猛兽，而从智人开始捕杀大型猛兽开始，人类站在了食物链的顶端。作者说这让生态系统猝不及防，人类自己也不知所措。人类不断的猎杀动物，改造身边的环境。但我觉得，一切的进化都属于自然发展的结果。人类站到了金字塔顶端也算是自然的一种安排。&lt;/p>
&lt;p>关于现代人类是由过去哪个人种发展而来的，有两种理论，一是混种繁衍理论，二是替代理论，前者表明现在的人类是过去智人与其他人种的混血，后者表示不同人种之间存在生殖隔离，只有一种人将另一种完全替代。最新的研究表明现代人的 DNA 中存在其他人种的基因，当然，研究仍在继续当中。那么为什么其他的人种现在都不存在了，只剩下我们这一种，成为了「天选之子」。可能是自然的演变，物竞天择，导致这些人种无法适应环境的发展，被自然淘汰，但也可能是因为智人的强大，对其他人种进行了屠杀。我自己比较认同屠杀这一种说法。因为任何生物的第一层面的追求是活着，是生存。就像人们学会了取火，开始大面积地放火烧林扩大自己的领域，当与另一类人种接触，人们开始感到威胁，因为对方和野兽不同，野兽不能像人类一样思考，但其他人种可以，不同人种之间开始抢夺资源，人们就会开始屠杀，只有将这一种威胁消灭，人们才会安稳地生活。这是绝对会发生的，因为当今文明社会，还会有不同种族之间的歧视与暴力冲突。&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/chauvet-cave.jpg" alt="chauvet-cave.jpg">&lt;span class="caption">※ 肖维岩洞岩画&lt;/span>&lt;/p>
&lt;h3 id="知善恶树">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#知善恶树" class="anchor-link" aria-label="知善恶树">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#contents:知善恶树" class="headings">知善恶树&lt;/a>&lt;/h3>
&lt;p>作者在第一章的末尾提出一个核心论点：&lt;/p>
&lt;blockquote class="quote">
&lt;p>智人之所以能征服世界，是因为有独特的语言。&lt;/p>&lt;/blockquote>
&lt;p>在某个特定时期，智人的认知能力有了革命性的发展，出现了新的思维和沟通方式，这就是所谓的认知革命。这是非常偶然的一次突变，用作者的话来说：&lt;/p>
&lt;blockquote class="quote">
&lt;p>几乎就像是吃了《圣经》里那颗知善恶树的果实一样。&lt;/p>&lt;/blockquote>
&lt;p>我们常说人会说话，而其他动物不会说话。如果说仅仅从发声交流这一层面来说，这样是不恰当的。因为很多动物都能够使用特定的声音、动作进行交流。准确地说，人类会说话，是会灵活地使用自己的发声器官。&lt;/p>
&lt;blockquote class="quote">
&lt;p>虽然我们只能发出有限的声音，但组合起来却能够产生无限多的句子，这些句子各有不同的含义。于是，我们就能吸收、储存和沟通惊人的信息量，并了解我们周遭的世界。&lt;/p>&lt;/blockquote>
&lt;p>作者先是举了狮子和野牛的例子，然后又提出，人类之间的语言交流最重要的信息不是关于野牛和狮子，而是关于人类自己。人类的语言是一种八卦的工具。第一次看到这种说法，觉得用「八卦」不太恰当，但仔细想一想，确实「八卦」是人与人之间交流最主要的部分。人们需要在自己生活的圈子里知道谁讨厌谁，谁在和谁交往，谁很诚实，谁又是骗子。这些内容，有助于自身在圈子当中的生存。&lt;/p>
&lt;p>除此之外，人类的语言交流还有一个特点，就是能够传达一些虚构的事物。如果说其他动物之间会进行交流，他们也只能交流一些实际存在的事物，比如在哪里存在实物，是否有威胁之类的。但人类因为认知的发展，能够谈论自己想象的事物，因此传说、神话、宗教之类的出现在生活中。人们能够通过语言，将自己想象的事物传达给他人，然后一群人就会一起编织出一个完整的体系，让人们能够合作。一个部落、一个社区、一个公司的形成都需要人与人之间的语言沟通，通过交流，熟悉彼此，进而维持了一个团体的稳定。人类的团体在 150 人以下的时候，通过彼此之间的交流就能够运作顺畅，一旦超过这个人数，就需要一定的阶层、规章制度。作者提出了智人之所以能够形成一个上亿人口的帝国，很可能就是依靠虚构的故事，例如宗教故事，让那些信奉同一宗教的人拥有相同的认知，彼此之间取得良好的信任。&lt;/p>
&lt;p>作者在这一章重点举了标致汽车的例子。然后延伸出了公司的领导与公司本身的性质。&lt;/p>
&lt;p>标致公司是我们的一个集体想象，我们无法明确指着它，因为它并不是一个实体对象，而是以一种法律实体的方式存在。在没有这种概念之前，如果你领导了一个小的团体，你的团体给别人造成了损失，你自身就会受到影响，你需要承担所有的责任。而标致公司则是有限公司，公司即是独立的个体，公司自身承担责任，而领导公司的人并不等于公司本身。所以公司能够在公司领导退出这个「舞台」时还能够存在。&lt;/p>
&lt;blockquote class="quote">
&lt;p>智人发明出了许许多多的想象现实，也因而发展出许许多多的行为模式，而这正是我们所谓「文化」的主要成分。等到文化出现，就再也无法停止改变和发展，这些无法阻挡的变化，就成了我们说的「历史」。&lt;/p>&lt;/blockquote>
&lt;p>&lt;sup style="float:right" id="fnref:2">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/adam-and-eve-theodore-de-bry.jpg" alt="adam-and-eve-theodore-de-bry.jpg">&lt;span class="caption">※ 知善恶树，亚当和夏娃&lt;/span>&lt;/p>
&lt;h3 id="亚当和夏娃的一天">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#亚当和夏娃的一天" class="anchor-link" aria-label="亚当和夏娃的一天">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#contents:亚当和夏娃的一天" class="headings">亚当和夏娃的一天&lt;/a>&lt;/h3>
&lt;p>这一章主要描绘了远古采集社会的生活容貌。作者通过历史资料加上自己的想象，描绘出人类原始生活的样子，繁殖、捕食、斗争等等。在这一章中，出现了一个关键名词：采集者。采集者指的就是狩猎采集的人类。&lt;/p>
&lt;p>作者首先以高热量食物作为例子。现在人们都知道高热量的食物对身体有害，但那些非常好吃诱人的食物往往都是高热量的食物。人们似乎无法放弃这一类「垃圾」。因为过去的采集者在草原或者森林中生活，高热量的食物非常罕见，如果发现这一类食物就一定会立刻吃下以防被其他动物抢夺。&lt;/p>
&lt;p>作者又提出古代社会并非一夫一妻制，一群人共同住在一起，女性可以和多名男性或女性发生性行为形成亲密关系，而成年人共同养育所有的孩子，对他们平等对待。我觉得在现在的社会，一夫一妻制是一种准则，已经成为我们心中认定的文明的一部分，还记得小时候我第一次听说在某些国家一个男人可以与多个女人共同生活的时候，感到非常的惊讶。现在的人们非常看重人与人之间的伦理关系，如果你的身份并不是所谓的正常身份，比如你是「小三」，比如你是一个「妓女的孩子」，那么别人会对你有一种一样的感觉。我认为这就是一种文明的发展。成年人共同养育所有的孩子这一点，虽说在当前的社会下不合适，但我比较支持将所有的孩子平等对待。「幼吾幼以及人之幼」，如果平等对待所有的孩子，摒除对别人家庭出身，社会地位的偏见，这样会减少很多不必要的竞争和人类内耗，孩子的成长道路会轻松很多。&lt;/p>
&lt;p>采集者随着季节的变化不断迁移以获得食物来源。如果在某个地区食物来源特别丰富，就很可能会定居在那里。作者在文中说：&lt;/p>
&lt;blockquote class="quote">
&lt;p>换句话说，采集者对于他们周遭环境的了解，会比现代人更深、更广也更多样。现代的工业社会中，就算不太了解自然环境也能顺利存活。比如如果你是个计算机工程师、保险推销员、历史老师或者工厂工人，你真的需要了解自然环境吗？现代人必须专精于自身小领域的知识，但对于其他生活中的必需，绝大多数都是靠着其他领域的专家，每个人懂的都限于自己的那一小方土地。就整体而言，现今人类所知远超过远古人类。但在个人层面上，远古的采集者则是有史以来最具备多样知识和技能的人类。&lt;/p>&lt;/blockquote>
&lt;p>或许采集者的知识储备确实比现代人类更广，因为为了生存，他们必须要学会更多的技能以提升自己的优势，赢得活着的权利。现代人类对于某一自己熟悉的领域研究地更为深入，更有深度。采集者们学会的知识讲求的应该是「实用」，他们不会研究其中的原理，而现在我们能够清楚的明白很多事物运转的原理。即是真的像作者所说的那样，每个人懂的都限于自己的那一小方土地，不如采集者的知识储备广泛，但现今人类所知远超过远古人类，讲求的是一种合作，一种知识的共享，我认为这也是一种文明程度的提升，更有利于社会的发展。同样，我也认为，现今人们的生活比采集者们更有意义。这一点与作者的观念相反。作者说现代的富裕社会，人们的劳动时间过长，承担过重的负担，这一点无可否认。农业社会确实恶化了人类营养和健康，这是不可避免的，也是发展的一种趋势，但在精神文化生活层面，难道能说采集者们更为富有吗？他们追求的是自身的存活，因此眼光不如现代人类这么长远，从而他们也就不会探索更多的未知领域，得不到丰富的精神文化生活。&lt;/p>
&lt;p>在这一章中也出现了「泛神论」这一名词。&lt;/p>
&lt;blockquote class="quote">
&lt;p>泛神论相信，几乎任何一个地点、任何一只动物、任何一株植物、任何一种自然现象，都有其意识和情感，并且能够与人类直接沟通。&lt;/p>&lt;/blockquote>
&lt;p>采集者普遍信奉泛神论的信仰。这让我联想到了《阿凡达》这一部电影。潘多拉星球上的纳美族信奉的就是自然的力量，自然孕育了万物，万物归于自然，他们可以通过自身的器官与其他生物相连，进行心灵的沟通。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/avatar.jpg" alt="avatar.jpg">&lt;span class="caption">※ 电影《阿凡达》&lt;/span>&lt;/p>
&lt;h3 id="毁天灭地的人类洪水">&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#毁天灭地的人类洪水" class="anchor-link" aria-label="毁天灭地的人类洪水">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#contents:毁天灭地的人类洪水" class="headings">毁天灭地的人类洪水&lt;/a>&lt;/h3>
&lt;p>毋庸置疑，人类的存在给自然界的其他生物带来了毁灭性的打击。人类曾经只生活在亚非大陆上，因此在亚非大陆上的各种生物会受到人类活动的影响，因为当时的技术受限，人类造不出一艘能够跨越大洋的船，因此尚未踏上地球的其他地区。同样，大洋隔开的还有别的生物。在美洲、澳洲还有一些与世隔绝的岛屿上，生长着各种奇特的生物，澳洲尤为明显。他们在独立的环境下生长，形成了一条条独特的食物链。假如将亚非大陆的生物带到这些地方，会造成泛滥成灾，比如现在澳洲的兔子。&lt;/p>
&lt;p>澳洲曾经的动物都有着像袋鼠一样的育儿袋，现在还有几种这样的生物存在呢？过去的人类虽有信奉神明这一说法，但他们并不尊重神明赋予他们的生活环境——大自然。人类总是妄想征服自然的一切，所到之地一片狼藉。当人类踏上澳洲的那一刻起，一场场浩劫开始发生。因为当地的动物没有见过人类，他们也就不会惧怕人类，甚至到死也没有意识到，人类是一种凶猛的动物。而且当地的大型动物繁殖非常缓慢，人类的猎杀超过自身的繁殖速度。除此之外，人类还会使用火这一种危险的东西，通过火耕技术将生物栖息的地方变成农田……一场场捕杀造成了很多生物的灭绝。&lt;/p>
&lt;p>有些学者试着为人类脱罪，把这些物种灭绝的责任推给气候变迁。这种说法很难让人接受，作者也给出了辩驳这类说法的理由：&lt;/p>
&lt;ol>
&lt;li>虽然澳洲气候确实在 45000 年前有一场改变，但规模幅度并不大，人类登陆澳洲的时候，澳洲超过 90% 的巨型动物都从历史上消失了；&lt;/li>
&lt;li>如果是气候变迁导致的物种大灭绝，海洋生物受到的冲击通常不亚于地球生物，但没有任何证据显示 45000 年前海洋生物有显著的灭绝情形；&lt;/li>
&lt;li>类似澳洲这类生物大灭绝的事情，在接下来的几千年还在不断上演，而时间点都在人类又再次移居外面世界的时候。&lt;/li>
&lt;/ol>
&lt;p>作者在这一章提到了大地懒、剑齿虎等等一些已经灭绝的生物。我联想到了《冰河世纪》系列电影，电影中有原始人、猛犸、剑齿虎等生物，还有那个一直寻找松果的小剑齿鼠。还想到了以前听说现代人吃猛犸肉的故事。如果这些生物能存活到现在，或许就会为自然界添加一笔绚丽的色彩。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ice-age.jpg" alt="ice-age.jpg">&lt;span class="caption">※ 电影《冰河世纪》&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/Chauvet_Cave" target="_blank" rel="noopener">Chauvet Cave | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>图源：&lt;a href="https://fineartamerica.com/featured/adam-and-eve-theodore-de-bry.html" target="_blank" rel="noopener">Adam And Eve | Fine Art America&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/a-brief-history-of-humankind/" target="_blank" rel="noopener">https://guanqr.com/life/books/a-brief-history-of-humankind/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/humankind/">人类</category></item><item><title>
玉泉校区上网指南</title><link>https://guanqr.com/tech/computer/internet-service-in-yuquan/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/internet-service-in-yuquan/</guid><pubDate>Wed, 04 Sep 2019 15:39:44 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">初&lt;/span>来玉泉校区，遇到的第一个问题就是，如何将计算机与有线网络相连？在紫金港的两年中，不论是笔记本电脑，手机还是平板，我大部分时间用的都是 ZJUWLAN 无线网络。虽然经常吐槽校园网的垃圾，但说实话，浙大的网络服务比大部分学校好多了。&lt;/p>
&lt;p>在紫金港经常用无线网络的原因有以下几点：第一，笔记本电脑连着网线后，只能将放在桌子上老老实实地操作，而连着无线网，就可以端着笔记本电脑到床上去看；第二，我上课的时候经常背着笔记本电脑，一直连着无线网络比在宿舍里来回插拔网线方便一些；第三，我的位置上的网线接口有一些毛病，接触不良，导致我如果连接网线的话，可能过一会就掉线了。&lt;/p>
&lt;p>既然来到了玉泉，老老实实用无线网络是不可能的，有线网络的优势还是足够吸引人，网线接口接触很好，而且网络支持 IPv6 协议，进入一些 404 网站不在话下。只要接入网线，网络速度起飞，下载内网资源的速度令人极度舒适。除此之外，听一些学长说，宿舍楼里的无线网信号很差，&lt;del>不过我现在还没遇到这样的问题&lt;/del>，实践证明，真的很差。所以，在玉泉，连接有线网络绝对是最佳选择。&lt;/p>
&lt;p>玉泉的有线网络连接，比紫金港稍微复杂了那么一点点。因为紫金港宿舍楼分配的是动态 IP 地址，直连就可以，而玉泉宿舍楼分配的是静态 IP 地址，需要自己去申请一个 IP 地址。目前我在 CC98 上搜索到的玉泉上网方法都是过时的版本，如今已经不能再用。下面就详细讲述一下目前在玉泉校区如何连接有线网络以及自建 VPN 的方法。&lt;/p>
&lt;h2 id="有线网络连接">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#有线网络连接" class="anchor-link" aria-label="有线网络连接">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:有线网络连接" class="headings">有线网络连接&lt;/a>&lt;/h2>
&lt;h3 id="查询网卡-mac-地址">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#查询网卡-mac-地址" class="anchor-link" aria-label="查询网卡-mac-地址">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:查询网卡-mac-地址" class="headings">查询网卡 MAC 地址&lt;/a>&lt;/h3>
&lt;h4 id="windows-10">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#windows-10" class="anchor-link" aria-label="windows-10">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:windows-10" class="headings">Windows 10&lt;/a>&lt;/h4>
&lt;p>目前 Windows 系统使用最多的是 Win10 版本的，因此这里我主要 Win10 系统的方法，如果你使用的是 Win7 也可参考，假如对网络设置一点也不懂，可以自行 Google。&lt;/p>
&lt;p>首先找到桌面右下角网络连接的图标，右键，进入「打开 “网络和 Internet” 设置」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-0.jpg" alt="internet-service-in-yuquan-0.jpg">&lt;/p>
&lt;p>然后点击「查看网络属性」，即可查询到网卡的 MAC 地址。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-1.jpg" alt="internet-service-in-yuquan-1.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-2.jpg" alt="internet-service-in-yuquan-2.jpg">&lt;/p>
&lt;h4 id="mac-os-x">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#mac-os-x" class="anchor-link" aria-label="mac-os-x">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:mac-os-x" class="headings">Mac OS X&lt;/a>&lt;/h4>
&lt;p>如果是 Macbook Pro 之类的没有 RJ45 网口的电脑，需要先插上带网口的扩展坞（以下用 Macbook Pro 作为示例）。&lt;/p>
&lt;p>打开 Terminal（终端命令行工具，可以直接在搜索栏内搜索打开），在插上扩展坞之前，运行：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ &lt;span class="nb">cd&lt;/span> ~/Desktop
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">$ ifconfig &amp;gt; mac-addr-none
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在插上 USB 扩展坞之后等待几秒钟：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ ifconfig &amp;gt; mac-addr
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">$ diff mac-addr mac-addr-none
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后删除临时文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ rm mac-addr*
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如下图所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-3.jpg" alt="internet-service-in-yuquan-3.jpg">&lt;/p>
&lt;h3 id="申请-ip-地址">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#申请-ip-地址" class="anchor-link" aria-label="申请-ip-地址">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:申请-ip-地址" class="headings">申请 IP 地址&lt;/a>&lt;/h3>
&lt;p>在老版本的教程中，说的是需要进入某个网站进行申请，目前该网站申请通道已经关闭，唯一的方法就是通过微信公众号进行申请。&lt;/p>
&lt;p>从「浙大学生公寓管理服务中心」微信公众号进入「iHome」，在「iHome」的公寓服务栏内进入「IP 地址申请」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-4.jpg" alt="internet-service-in-yuquan-4.jpg">&lt;/p>
&lt;p>进入「申请新 IP 地址」，填入你的网卡 MAC 地址和手机号码即可获取到一个 IP 地址。这里输入 MAC 地址的时候不需要输入冒号。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-5.jpg" alt="internet-service-in-yuquan-5.jpg">&lt;/p>
&lt;p>记下获取到的 IP 地址、网络掩码等相关数据。&lt;/p>
&lt;h3 id="网络属性设置">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#网络属性设置" class="anchor-link" aria-label="网络属性设置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:网络属性设置" class="headings">网络属性设置&lt;/a>&lt;/h3>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>由于我使用的是 Win10，下面的操作只适用于 Windows 系统，Mac OS X 请自行设定。&lt;/p>&lt;/div>
&lt;p>回到「“网络和 Internet” 设置」界面，进入「更改适配器选项」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-6.jpg" alt="internet-service-in-yuquan-6.jpg">&lt;/p>
&lt;p>右键点击以太网的「属性」选项。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-7.jpg" alt="internet-service-in-yuquan-7.jpg">&lt;/p>
&lt;p>双击如下图所示的内容，进入网络设定界面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-8.jpg" alt="internet-service-in-yuquan-8.jpg">&lt;/p>
&lt;p>选取「使用下面的 IP 地址」，输入之前申请 IP 时获取到的数据即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-9.jpg" alt="internet-service-in-yuquan-9.jpg">&lt;/p>
&lt;p>等待二十四小时之后就能够通过有线网络愉快地上网了。&lt;/p>
&lt;p>另外，上网的时候，还需要一个拨号上网的软件，学校提供了&lt;a href="http://itc.zju.edu.cn/2017/1207/c7936a728417/page.htm" target="_blank" rel="noopener">下载地址&lt;/a>，下载最新版本即可，新版本同样支持无线网 ZJUWLAN 的连接。如果你不想用学校提供的软件，也可以使用下面的方法，自建一个 VPN。&lt;/p>
&lt;h2 id="自建-vpn">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#自建-vpn" class="anchor-link" aria-label="自建-vpn">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#contents:自建-vpn" class="headings">自建 VPN&lt;/a>&lt;/h2>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>同样，这里仅给出的是 Win10 系统的设置方法。&lt;/p>&lt;/div>
&lt;p>依旧是「“网络和 Internet” 设置」界面，进入「网络和共享中心」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-10.jpg" alt="internet-service-in-yuquan-10.jpg">&lt;/p>
&lt;p>点击「设置新的连接或网络」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-11.jpg" alt="internet-service-in-yuquan-11.jpg">&lt;/p>
&lt;p>选择「连接到工作区」，创建新连接。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-12.jpg" alt="internet-service-in-yuquan-12.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-13.jpg" alt="internet-service-in-yuquan-13.jpg">&lt;/p>
&lt;p>选择「使用我的 Internet 连接 (VPN)」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-14.jpg" alt="internet-service-in-yuquan-14.jpg">&lt;/p>
&lt;p>在「Internet 地址」一栏输入 &lt;code>10.5.1.5&lt;/code>，「目标名称」任意填写。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-15.jpg" alt="internet-service-in-yuquan-15.jpg">&lt;/p>
&lt;p>然后进入「更改适配器选项」，右键你自定义名称的 VPN连接，进入属性设置。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-16.jpg" alt="internet-service-in-yuquan-16.jpg">&lt;/p>
&lt;p>在「安全」选项卡中，「VPN 类型」选用 IPsec 的第 2 层隧道协议。因为学校 VPN 的类型是 L2TP ，全程就是基于 IPsec 的第二层隧道协议之类。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-17.jpg" alt="internet-service-in-yuquan-17.jpg">&lt;/p>
&lt;p>「数据加密」确定为「可选加密」。因为学校没有开启加密。下面勾选「允许使用这些协议」，再勾选如图所示的选项，确认即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-18.jpg" alt="internet-service-in-yuquan-18.jpg">&lt;/p>
&lt;p>然后，你就可以在网络连接里输入用户名和密码进行连接了&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/internet-service-in-yuquan-19.jpg" alt="internet-service-in-yuquan-19.jpg">&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考①：&lt;a href="https://fenghe.us/yq-honor-wireless-router-tutorial/" target="_blank" rel="noopener">玉泉寝室无线路由器（荣耀路由）上网 | Fenghe's Blog&lt;/a>&lt;br>参考②：浙江大学 e 志者协会 ZJUVPN 自建教程 | Xero Essential&amp;#160;&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/internet-service-in-yuquan/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/internet-service-in-yuquan/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/google/">Google</category><category domain="https://guanqr.com/tags/network/">网络</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
新学期，微信公众号正式开启订阅</title><link>https://guanqr.com/life/ideas/wechat-subscription/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/wechat-subscription/</guid><pubDate>Wed, 28 Aug 2019 12:32:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">细&lt;/span>心的朋友可能早就发现，在我的博客的左下角，有一个微信的小图标，那里是我的微信公众号二维码，扫一扫，即可在微信平台订阅我的博客。其实在去年年初的时候，我就建立了一个微信公众号，而且推送了一些我自己写的文章。公众号的名字叫「啼鸟怨年华」，我还为这个公众号设计了一款水墨风的头像。&lt;/p>
&lt;p>建立这个公众号，除了写文章，还有一个目的，就是我想要尝试制作一个小型的课程分享平台，借助微信公众号，分享一些我在专业课程学习中收集到的学习资料。这个想法是受到了「学习帝」的启发。「学习帝」的开发者已经毕业，服务器缺少维护，经常挂掉。当然，以我目前的水平，没有能力开发出像「学习帝」一样的程序，我能做的，仅仅是借助微信公众平台进行资料分享而已。这个功能至今也没有做好。&lt;/p>
&lt;p>由于是个人的公众号，正处于测试当中，我没有进行宣传，而且在公众号的设置上，我设定的是无法通过名字查找该公众号，因此关注的人寥寥无几。当初发推文的时候，可能是想多发几篇，并没有追求文章的质量。在内容上，存在一些错别字或者排版的错误。因为微信公众号后台编辑的机制，无法再次修改。&lt;/p>
&lt;p>在大学生活的两年中，我承担了一些学校组织或者学院的公众号运营工作，虽说大多是时间还是在「划水」吧，但还是能锻炼一些个人的写作能力以及推文的排版技巧。有时候在我编辑完成一条推文之后，为了查看推文排版的效果，我会先在这个公众号上进行推送，然后再将内容转移到官方账号中。因此这个公众号的后台存放了很多「垃圾」，清理起来很麻烦。现在再来看一看我最初推送的一些文章，排版丑陋，以前在排版的时候，过于注重绚丽的图形组合，而忽视了最重要的的文字本身。这些文章不忍直视。把这些内容删除的话，后台还是存在删除的记录，这让我感到很不舒服。&lt;/p>
&lt;p>公众号毕竟是微信平台的产品，内容需要腾讯官方的审核，有一定的限制。当然，不是说我总要发布一些敏感的话题，而是文章内容受到限制让我有一种很不自在的感觉，所以诞生了这个博客网站，一是替代这个公众号成为我的文章发布的主要平台，二是顺便学习一些网页设计的内容。在建立这个博客网站之后，我把公众号上的文章搬运到了博客中，再也没有在公众号上推送文章，那个公众号就这么荒废掉了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wechat-subscription.jpg" alt="wechat-subscription.jpg">&lt;/p>
&lt;p>我在逛别人的博客网站的时候，看到一些博主把微信的二维码放在文章的末尾，扫一扫进行订阅，公众号里的文章与博客文章同步。我意识到，在这个信息碎片化的时代，能主动阅读你博客文章的人，已经很少很少了。微信公众号的文章，只需要点一点屏幕就能进行阅读，但是进入一个人的博客，还需要记住他的网址。&lt;/p>
&lt;p>微信公众号作为文章发布的平台，还是很重要的。我觉得可以将公众号作为自己文章发布的第二平台，在公众号推送的文章末尾，附加我的博客原文的链接，这样就能引流部分感兴趣的人进入我的博客网站。文章会首先发布在我的博客网站中，这样，如果愿意抢先阅读的人，自然会进入我的博客进行阅读。当然，这个目的的成功实现的前提是文章质量和排版足够的好。&lt;/p>
&lt;p>那么，一些都重新开始吧。我把之前那个试验性质的公众号注销了，重新申请了一个新的账号。名字和我的博客名字一样，叫「荷戟独彷徨」。维持公众号活力的重点是定期的高质量文章更新。写出一篇文章很容易，但坚持写文章就需要一定的毅力。优秀的文章才能够给一个不起眼的微信公众号注入鲜活的血液。加油吧！&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/wechat-subscription/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/wechat-subscription/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/wechat/">微信</category></item><item><title>
加速 Hexo 博客的方法及遇到的问题</title><link>https://guanqr.com/tech/website/speed-up-hexo/</link><guid isPermaLink="true">https://guanqr.com/tech/website/speed-up-hexo/</guid><pubDate>Tue, 20 Aug 2019 12:33:10 +0000</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/speed-up-hexo.png" alt="speed-up-hexo.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">由&lt;/span>于我的博客部署在 GitHub Pages 上面，在国内访问的话部分地区的加载速度比较慢。因此我在 6 月份的时候尝试使用 hexo-service-worker 与 hexo-filter-optimize 插件加速网站的访问速度。这两款插件确实对博客的加载速度有所帮助，但在当时我并没有留意是否出现了问题。直到最近，我在使用 Aplayer 音乐播放器的时候，一个很严重的 BUG 暴露了出来。通过对插件的逐个排查，终于找到了问题所在之处。&lt;/p>
&lt;h2 id="加速-hexo-博客">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#加速-hexo-博客" class="anchor-link" aria-label="加速-hexo-博客">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>加速 Hexo 博客&lt;/h2>
&lt;p>我在网上找到的方法是使用 &lt;a href="https://github.com/dieulot/instantclick/" target="_blank" rel="noopener">InstantClick&lt;/a> 和使用 Hexo 的两个插件 &lt;a href="https://github.com/zoumiaojiang/hexo-service-worker" target="_blank" rel="noopener">hexo-service-worker&lt;/a>、&lt;a href="https://github.com/theme-next/hexo-filter-optimize" target="_blank" rel="noopener">hexo-filter-optimize&lt;/a>。InstantClick 对网站的提速很明显，但它最大的问题就是会与 FancyBox、Google Analytics 等等不兼容，这些问题如果想解决的话肯定能解决的，网上应该可以找得到解决方法，但我目前没有太多精力去折腾。&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>InstantClick 使用的正是 pushState + Ajax 的技术，即 PJAX。最新版本的 NexT 主题已经支持 PJAX，因此你可以不再考虑使用 InstantClick。&lt;/p>&lt;/div>
&lt;p>下面主要说明如何配置 hexo-service-worker 和 hexo-filter-optimize 这两款插件&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;h3 id="插件的安装与配置">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#插件的安装与配置" class="anchor-link" aria-label="插件的安装与配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>插件的安装与配置&lt;/h3>
&lt;p>先在站点文件夹根目录安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">npm install hexo-service-worker hexo-filter-optimize --save
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在站点配置文件中配置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># offline config passed to sw-precache.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">service_worker&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">maximumFileSizeToCacheInBytes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5242880&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">staticFileGlobs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">public/about/index.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">public/favicon.ico&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="l">public/manifest.json&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">stripPrefix&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">public&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">verbose&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">runtimeCaching&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">urlPattern&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/**/*&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">handler&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">cacheFirst&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">options&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">origin&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">www.guanqr.com&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">filter_optimize&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># remove static resource query string&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># - like `?v=1.0.0`&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">remove_query_string&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># remove the surrounding comments in each of the bundled files&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">remove_comments&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">css&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># bundle loaded css file into the one&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">bundle&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># use a script block to load css elements dynamically&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">delivery&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># make specific css content inline into the html page&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># - only support the full path&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># - default is [&amp;#39;css/main.css&amp;#39;]&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">inlines&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">excludes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">js&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># bundle loaded js file into the one&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">bundle&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">excludes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># set the priority of this plugin,&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># lower means it will be executed first, default is 10&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">priority&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">12&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="配置说明">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#配置说明" class="anchor-link" aria-label="配置说明">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>配置说明&lt;/h3>
&lt;ol>
&lt;li>
&lt;p>&lt;code>staticFileGlobs&lt;/code> 是首次加载时主动缓存的文件，我给出的仅仅是个示例，请自行修改。怎么修改呢？ &lt;code>hexo g&lt;/code> 之后去 &lt;code>/public/&lt;/code> 目录下查看生成的文件，需要主动缓存则加上。当然，建议不要将博客的首页 &lt;code>/public/index.html&lt;/code> 加上去，这样如果以后想去除或想更新为 &lt;a href="https://developers.google.com/web/tools/workbox/" target="_blank" rel="noopener">Workbox&lt;/a> 才有可能，否则已访问过你的网站的用户可能永远都无法更新，除非他手动清除浏览器的缓存。需注意的是，如果不加上首页，可能会导致无法离线访问。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;code>origin&lt;/code> 修改为你的博客域名，更多说明请查看 GitHub 上的 README。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>要使用 Service Worker 博客必须 HTTPS。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="将博客添加至桌面">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#将博客添加至桌面" class="anchor-link" aria-label="将博客添加至桌面">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>将博客添加至桌面&lt;/h2>
&lt;p>既然已经使用了 Service Worker，具备了离线缓存功能，那么结合 &lt;code>manifest.json&lt;/code> 文件即可让你的博客启用 PWA，将博客添加至手机主屏或计算机桌面。&lt;code>manifest.json&lt;/code> 文件的结构很简单，可以通过&lt;a href="https://app-manifest.firebaseapp.com/" target="_blank" rel="noopener">这个&lt;/a>网站在线生成。你也可以参考我的 &lt;code>manifest.json&lt;/code> &lt;a href="https://guanqr.com/manifest.json" target="_blank">内容&lt;/a>。&lt;/p>
&lt;p>将 &lt;code>manifest.json&lt;/code> 文件放到 &lt;code>~/source/&lt;/code> 目录下，然后在你的博客 &lt;code>&amp;lt;head&amp;gt;&lt;/code> 中引入该文件，如果你使用的是 NexT 主题 v7.2.0+ 版本，可以在主题配置文件 &lt;code>_config.yml&lt;/code> 中引入自定义 &lt;code>head.swig&lt;/code> 文件，在 &lt;code>head.swig&lt;/code> 中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">link&lt;/span> &lt;span class="na">rel&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;manifest&amp;#34;&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/manifest.json&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果不知道如何引入自定义文件的话，可以参考我的文章《&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/">Hexo-NexT 主题个性优化&lt;/a>》的「网页样式布局」部分。&lt;/p>
&lt;p>部署完成后，在 Chrome 浏览器中按 &lt;code>F12&lt;/code> 进入元素审查界面，选择进入 &lt;code>Application&lt;/code> 一栏，即可看到你的 App Manifest 设定以及缓存文件的大小。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/speed-up-hexo-application.jpg" alt="speed-up-hexo-application.jpg">&lt;/p>
&lt;p>然后，就可以将你的博客添加至桌面了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/speed-up-hexo-add-to-desktop.jpg" alt="speed-up-hexo-add-to-desktop.jpg">&lt;/p>
&lt;h2 id="遇到的问题">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#遇到的问题" class="anchor-link" aria-label="遇到的问题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>遇到的问题&lt;/h2>
&lt;p>在这两款插件中，hexo-service-worker 并没有什么问题，但是 hexo-filter-optimize 却能引起部分文件的引用路径错乱。&lt;/p>
&lt;h3 id="font-awesome-图标">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#font-awesome-图标" class="anchor-link" aria-label="font-awesome-图标">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Font Awesome 图标&lt;/h3>
&lt;p>这是最明显的问题，在你使用该插件后，就可以发现，你网站中所有使用 Font Awesome 图标的地方，图标都无法显示。目前该插件的 &lt;a href="https://github.com/theme-next/hexo-filter-optimize/issues/2" target="_blank" rel="noopener">Issues&lt;/a> 中有很多人提出该问题，似乎作者也并没有给出一个完美的解决方案。我的解决方法是，选择使用 CDN 载入 Font Awesome 图标而不是使用本地的图标。&lt;/p>
&lt;p>即在主题配置文件 &lt;code>_config.yml&lt;/code> 中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"> # Internal version: 4.7.0
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> # Example:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> #fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- fontawesome:
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="文本居中引用标签">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#文本居中引用标签" class="anchor-link" aria-label="文本居中引用标签">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>文本居中引用标签&lt;/h3>
&lt;p>我在《&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/">Hexo-NexT 主题个性优化&lt;/a>》一文中所列举的「文本居中引用」中的样式：&lt;/p>
&lt;blockquote class="quote-center">
&lt;p>人生乃是一面镜子，&lt;br>
从镜子里认识自己，&lt;br>
我要称之为头等大事，&lt;br>
也只是我们追求的目的！&lt;/p>&lt;/blockquote>
&lt;p>上下边框的双引号，引用的是存放在 &lt;code>~/themes/next/sourse/images/&lt;/code> 当中的 &lt;code>quote-l.svg&lt;/code> 与 &lt;code>quote-r.svg&lt;/code> 两个矢量图片，即在部署网页后，引用的是根目录的 &lt;code>/sourse/images/&lt;/code> 中的图片。但在使用该插件后，图片引用的路径发生改变，引用的是你当前页面所在目录下的 &lt;code>/sourse/images/&lt;/code> 中的图片，而不是根目录的。&lt;/p>
&lt;p>我的解决方案是，在自定义 CSS 样式中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 修复文字居中图片显示 BUG */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">blockquote-center&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">before&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">page-home&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">post-type-quote&lt;/span> &lt;span class="nt">blockquote&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">before&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">page-post-detail&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">post-type-quote&lt;/span> &lt;span class="nt">blockquote&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-image&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">url&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sx">../../../../images/quote-l.svg&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">blockquote-center&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">after&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">page-home&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">post-type-quote&lt;/span> &lt;span class="nt">blockquote&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">after&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">page-post-detail&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">post-type-quote&lt;/span> &lt;span class="nt">blockquote&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">after&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-image&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">url&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sx">../../../../images/quote-r.svg&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>改变图片引用路径即可。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/speed-up-hexo-change-url.jpg" alt="speed-up-hexo-change-url.jpg">&lt;/p>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>[2020-04-10] 更新：目前 NexT 主题为了适配暗色主题，已经更改了居中引用标签的样式（参见 Commit &lt;a href="https://github.com/theme-next/hexo-theme-next/commit/b0bd2dde800c15980be74b05484d652215d9bf88" target="_blank" rel="noopener">&lt;code>b0bd2dd&lt;/code>&lt;/a>），取消使用引号矢量图，改为直接加载 Font Awesome 的引号图标，因此该问题已经无需考虑。&lt;/p>&lt;/div>
&lt;h3 id="aplayer-音乐播放器">&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#aplayer-音乐播放器" class="anchor-link" aria-label="aplayer-音乐播放器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Aplayer 音乐播放器&lt;/h3>
&lt;p>在这款音乐播放器的配置中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">aplayer&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">script_dir: js # Public 目录下脚本目录路径，默认&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;assets/js&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">style_dir: css # Public 目录下样式目录路径，默认&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;assets/css&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可以自行设定生成文件的存放目录。&lt;/p>
&lt;p>如果你使用了该插件后，无论你如何配置存放目录，音乐播放器的样式都无法加载出来，因为 &lt;code>Aplayer.min.css&lt;/code> 这一文件的引用路径是错误的。理论上来讲， 应该引用的是你在上述配置中设定目录下的文件，但实际上引用的依然是你在使用播放器时，当前页面目录下的文件。&lt;/p>
&lt;p>目前我的解决方案有些繁琐，举个例子。&lt;/p>
&lt;ol>
&lt;li>
&lt;p>首先 Aplayer 音乐播放器按照上述配置进行配置。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>比如你打算在 &lt;code>about&lt;/code> 页面插入音乐播放器，那么除了在内容中按照 Aplayer 官方给定的格式插入音乐播放器后，还需要在当前文件夹，即 &lt;code>~/sourse/about/&lt;/code> 下，创建 &lt;code>css&lt;/code> 文件夹，在该文件夹中放置需要引用的 &lt;code>Aplayer.min.css&lt;/code> 这一文件。这一文件在你第一次执行 &lt;code>hexo g&lt;/code> 命令后，生成在 &lt;code>~/public/css/&lt;/code> 下。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>此时还需要在博客配置文件 &lt;code>_config.yml&lt;/code> 中设置，排除对 &lt;code>aplayer.min.css&lt;/code> 文件的渲染。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- skip_render: [README.md]
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ skip_render: [README.md,about/css/APlayer.min.css]
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果你觉得这样设置繁琐的话，也可以采用 CDN。不过，由于这个 BUG 引发了太多的问题，我目前已经放弃使用这款插件了。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考①：&lt;a href="https://juejin.im/post/5b8ff410e51d450e7b16d7ba" target="_blank" rel="noopener">Hexo 博客简单支持 PWA | 木子星兮&lt;/a>&lt;br>参考②：&lt;a href="https://blog.rmiao.top/hexo-grup-pwa/" target="_blank" rel="noopener">Hexo 博客支持 PWA 和压缩博文 | Ryan Miao&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/" target="_blank" rel="noopener">https://guanqr.com/tech/website/speed-up-hexo/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category><category domain="https://guanqr.com/tags/pwa/">PWA</category></item><item><title>
记一次跨校区搬迁</title><link>https://guanqr.com/life/school/move-to-yuquan/</link><guid isPermaLink="true">https://guanqr.com/life/school/move-to-yuquan/</guid><pubDate>Thu, 01 Aug 2019 21:57:04 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>学期期末考试结束后，一年一度的跨校区搬迁开始了。由于每个学院都有自己的短学期，而短学期的课程时间长短不一，学校安排了几批统一搬迁。我们学院的小学期在 7 月 27 日结束，自然被分配到了最后一批搬迁。&lt;/p>
&lt;p>浙大新生入学都是住在紫金港校区的。因为学校比较重视学生的通识教育，在紫金港校区，不同学院不同专业的学生都需要修够一定的通识课学分。这里的通识课，不仅包括微积分、线性代数、概率论与数理统计、大学物理、大学英语这样的必修课，还有各学院面向其他学院学生开设的开拓思维普及知识的选修课，在课堂中，不同专业的学生组成一个研究小组对课程中的问题进行研究学习。上课的教室都在紫金港校区的东西区教学楼。只有极少数专业在这些教学楼中有自己专门的教室。&lt;/p>
&lt;p>在大二结束后，从理论上讲，学生的通识课学分已经修够，接下来就要深入学习专业课的知识。而不同学院所在校区不同，专业课的学习自然要到各自学院去。比如海洋学院的学生要搬到舟山校区，医学院的学生要搬到华家池校区，法学院的学生要搬到之江校区。我的专业是属于工科信息学部，自然要搬到玉泉校区。紫金港校区的大西区正在建设中，浙大的行政中心也早已从玉泉搬到了紫金港。以后别的校区的一些专业会陆陆续续搬回紫金港，但我想我们专业是不可能了，这辈子都不可能了，因为光电学院的根就在玉泉。早在搬迁前一个月，我们就已经知道被安排到了玉泉 7 舍。7 舍是始建于上世纪五十年代的老宿舍楼，所以内部结构可想而知，相对于紫金港的宿舍来说，不会很好。不过学长们都开玩笑说 7 舍地理位置极佳，是玉泉龙脉所在，有很多有趣的传说。就如某学长说的那样，&lt;/p>
&lt;blockquote>
&lt;p>在给别人介绍寝室楼的时候，我最常使用的便是监狱一词。隔音不好，窗户朝北，没有阳台，也没有二十四小时热水。在这些众多缺点的簇拥之下，七舍那得天独厚的地理位置，便是在荒芜之境中缓缓升起的明珠。北接食堂，南临大门，东望校外，西拥教三。快递与外卖唾手可得，学习同娱乐咫尺相依。&lt;/p>&lt;/blockquote>
&lt;p>我们专业同生仪学院的测控专业都是属于全校最后一批搬迁的，问其原因，自然是万恶的短学期，别人的短学期一周结束，我们有一个月。就这样，我看着同层宿舍楼的别的寝室，计算机学院的同学搬走了，控制学院的同学搬走了，信电学院的同学搬走了，到第三批搬迁后，整层楼就只剩几个寝室还有人。我们寝室四个人，三个光电的，一个计科的，计科原本是第一批搬迁，但这个同学参加了到新加坡国立大学的暑期交流活动，搬迁就推迟到了最后。&lt;/p>
&lt;p>我在《电子系统设计》课程结束后的下午，立马开始收拾东西。跨校区搬迁其实还是挺方便的，学校分批次进行搬迁，你只需要将自己要搬的东西收拾好，放到规定的库房（自行车车库）中，学校会安排专车进行搬迁。那如果东西丢了怎么办？学校有这么多年的搬迁经验，早就形成了一些规定。学校会向学生提供一些搬迁用的东西，比如纸箱、麻袋（需要花钱买，价格感人，实属神坑）。你将自己的东西放到纸箱中，再用麻袋套上，防止箱子在搬迁过程中挤压变形导致里面的东西散落，男生需要在麻袋上绑上红绳，女生绑上非红绳。在麻袋上，你需要写下你的姓名，学号，专业，行李件数，原校区寝室，搬迁校区寝室。将收拾好的行李搬到规定库房后，你就可以在新寝室等着行李送到你们班级的行李房了。&lt;/p>
&lt;p>上述流程是理想状况下的搬迁过程。事实上，我的搬迁并没有这么顺利，我在紫金港和玉泉之间往返了三次。我有一辆山地车，山地车肯定不能让学校搬过去，磕磕碰碰说不定会出什么差错，所以我在 7 月 28 日将自行车骑到了玉泉，想直接找楼长拿新寝室到钥匙，参观一下 7 舍独特的寝室。但 7 舍的楼长说，没住宿卡不能拿钥匙，住宿卡需要退掉原寝室的钥匙才能拿到。无奈之下，我只好将山地车停到停车区，向楼长借了钥匙，把我背来的一堆书放下，坐公交回紫金港了。&lt;/p>
&lt;p>因为我们是最后一批搬迁的，学校提供的箱子等搬迁用具已经严重不足，我用到了五个箱子，室友刚装好了两个箱子后，学校就已经没有箱子提供了，只好到菜鸟驿站购买了一些价格更坑的箱子。我们寝室原本计划在 30 日，也就是规定的搬迁日期进行搬迁，但我们寝室的空调居然在 28 日坏掉了，根本不制冷，排水也坏掉了。杭州 38 度的高温可不是闹着玩的。所以我们决定在 29 日先把床垫被子凉席行李箱等东西先搬到玉泉，晚上就在新寝室睡了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/bifeng3.jpg" alt="bifeng3.jpg">&lt;span class="caption">※ 我们的全部家当&lt;/span>&lt;/p>
&lt;p>室友租了一辆车，能装下我们装箱后剩下的所有东西。司机说要下午 3 点半到，但我们的箱子还没有搬到库房，如果这些箱子也装在这辆车中，显然是装不下了，所以还是让学校来搬这些箱子吧。我们只好晚上再回紫金港把这些箱子搬到库房，顺便再收拾收拾寝室，看看有什么东西落下。我先把钥匙退了，饮水机押金退了，拿到了我的住宿卡，室友没退钥匙，因为晚上还要回来。我们计划晚上再把钥匙全部退掉，把之前多交的热水费退掉。在这辆租的车中，我坐在装行李的车厢中，没有空调，很刺激。晚上回来后，我们开始搬箱子，最费劲的就是将箱子从我们的三楼（其实是四楼，一楼是车库）寝室搬下来，因为箱子里装的是书，巨沉。我们决定先把所有箱子搬到一楼，再从一楼搬到库房。我们借了一个小运输车，运输起来很方便。&lt;/p>
&lt;p>晚上我们打了辆车回到了玉泉，感受了一波 7 舍的厕所和浴室，还好吧，没有想象中的那么差。7 舍最大的一个缺点就是年代久远，墙壁虽然涂了白灰，看起来很干净，实际上用手碰一下白灰，这些白灰就会掉下来，露出墙内的木质结构。我看大多数寝室的墙上都贴着世界地图，这些地图后面的墙面……你懂得。其实 7 舍还算可以的，也算得上是全国大学宿舍楼中上等水平吧，很多人说 7 舍烂，那是因为浙大中比 7 舍高级的宿舍楼有很多。我们大学前两年住的宿舍楼称得上是数一数二的了，所以来到 7 舍自然会有一定的心理落差。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/yuquan7.jpg" alt="yuquan7.jpg">&lt;span class="caption">※ 玉泉 7 舍内部格局&lt;/span>&lt;/p>
&lt;p>30 日上午，我们的箱子到达玉泉，我们开始收拾房间整理个人物品，这个时候好多人已经回家了，我和室友 31 日还有苦逼的 SRTP 要和博士生学姐讨论。这一次搬迁的时候，由于我的大意，忘记了两个挂在我碧峰宿舍桌子上的挂饰，一个是在观看音乐剧《猫》的时候买的钥匙链，一个是在东京浅草寺买的护符，损失巨大……在玉泉的三天，我总共去了三个食堂吃饭：第一食堂、靓园、贻善堂。前两个食堂给我的感觉就是，如果说紫金港食堂的饭是「都市菜」，那么玉泉的饭就是「山村饭」。还好在贻善堂中，我感受到了能和紫金港休闲餐厅相比的饭菜了。暑假结束后就要正式在玉泉上课了，还是很期待全新的（养老）生活的。&lt;/p>
&lt;p style="text-align:right">——二〇一九年八月一日写于开往北京的绿皮火车上&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/move-to-yuquan/" target="_blank" rel="noopener">https://guanqr.com/life/school/move-to-yuquan/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
光电学院短学期结束</title><link>https://guanqr.com/tech/optics/opt-short-term-2019/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/opt-short-term-2019/</guid><pubDate>Mon, 29 Jul 2019 09:10:03 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">随&lt;/span>着课程答辩的完成，短学期课程正式结束。我们开始准备跨校区搬迁，从紫金港搬到玉泉。从刚结束数电考试的 7 月 4 日到 7 月 27 日，将近一个月的时间里，我们总共上了两门课程，分别是《光学系统设计》和《电子系统设计》。同信息类的其他专业早已结束课程开始搬迁，我们仍然在骄阳似火中设计着电路，看着一批又一批的外校学生来浙大夏令营。我们拥有全浙大最长的短学期，拥有最不水的短学期。在这里，我对今年短学期课程的成果做个总结。&lt;/p>
&lt;h2 id="光学系统设计">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#光学系统设计" class="anchor-link" aria-label="光学系统设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:光学系统设计" class="headings">光学系统设计&lt;/a>&lt;/h2>
&lt;p>这门课程相当于《应用光学》课程的后期实践课程，对几何光学、相差、光学设计进行系统性的掌握。在大一的时候，听一个学长说，这门课程「恶竞」严重，一个程序设计，最终能「恶竞」到添加 UI 界面，以至于现在一想起大二的暑假就想吐。当时听到这句话没有什么感触，现在看来，这个学长说的太对了。&lt;/p>
&lt;p>这门课程从 7 月 5 日上到 7 月 15 日。具体的教学安排如下。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-teaching-arrangement.jpg" alt="short-term-teaching-arrangement.jpg">&lt;span class="caption">※ 教学安排&lt;/span>&lt;/p>
&lt;p>可以看出这门课程主要分为三部分内容：程序设计、光学系统设计、绘制光学图纸。光学图纸不用说，就是画工图，还是用计算机画，设计好光学系统后，导出 SolidWorks 文件，经过简单几个操作就能画好，这一部分没什么难度。难点就在于程序设计和光学系统设计。&lt;/p>
&lt;p>在课程开始的第一天，老师要求我们每一组填写一个设计任务书。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-design-document.jpg" alt="short-term-design-document.jpg">&lt;span class="caption">※ 设计任务书&lt;/span>&lt;/p>
&lt;h3 id="技术指标和参数要求">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#技术指标和参数要求" class="anchor-link" aria-label="技术指标和参数要求">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:技术指标和参数要求" class="headings">技术指标和参数要求&lt;/a>&lt;/h3>
&lt;ol>
&lt;li>摄影物镜的技术指标：焦距：f'=50mm，相对孔径 D/f' 不小于 =1/3.5，图像传感器为全画幅 CCD，成像面大小 24mm×36mm。在可见光波段设计（取 d、F、C 三种色光，d 为主波长）。设计时考虑到机械误差因素，像高要预留 0.2mm 的余量。该镜头各面均为球面，不可含有非球面和其他特殊面形。&lt;/li>
&lt;li>根据第 1 项技术指标，检索相关资料并进行方案论证，确定初始结构。&lt;/li>
&lt;li>软件部分：要求能计算孔径光阑在最前面的或者已知入瞳位置大小的共轴球面系统的 f', l'，l&lt;sub>H&lt;/sub>'，l&lt;sub>p&lt;/sub>'，y&lt;sub>0&lt;/sub>'，y&lt;sub>0.7&lt;/sub>'，x&lt;sub>t&lt;/sub>'，x&lt;sub>s&lt;/sub>'，Δx&lt;sub>ts&lt;/sub>' （9 个数据）以及 F 光和 C 光的近轴像位置（2 个数据）；求出轴上点全孔径、0.7 孔径的 d/F/C 光实际像点位置（6 个数据）和球差（2 个数据）、全孔径、0.7 孔径和 0 孔径的位置色差（3 个数据）；全视场、0.7 视场的 ± 全孔径、±0.7 孔径、0 孔径（主光线）各条光线（具体哪些光线，根据以下要计算的数据决定），求出两个视场两个孔径下的子午彗差（4 个数据）、两个视场 d、F、C 光的实际像高（6 个数据）、绝对畸变和相对畸变（4 个数据）以及倍率色差（2 个数据）。此项工作，要求先用软件求出所需计算的入射光线的初始坐标（L, U），然后进行光线追迹，分别得到各条出射光线的坐标（L', U'），再按照公式计算上述诸光线高度和像差值。本软件要求具有文件存取功能，便于用户使用。并以以上计算的 38 个数据为依据进行自编软件的置信度评价，要求误差在 0.1% 以下的置信度在 91% 以上，误差在 2% 以下的置信度为 100%。&lt;/li>
&lt;li>按第3项要求用自编程序计算教材双胶合透镜例题的像差，计算时光阑和第一面重合，以 Zemax 软件核对之。&lt;/li>
&lt;li>对选定的初始结构（最多不超过 6 片），用 Zemax 软件进行优化设计，使摄影物镜达到第 6 项和第 7 项的指标，透镜形状满足工艺要求，各透镜玻璃的中心厚度和边缘厚度满足教材上的工艺要求，中心空气间隔不小于 0.1mm，边缘空气间隔不小于 0.15mm，光阑前后边缘空气间隔不小于 0.3mm。&lt;/li>
&lt;li>焦距 f'=50mm±0.1mm，F 数误差＜5%，视场按第 1 项要求，边缘视场拦光不超过 30%，0.707 视场以内的其他视场拦光不超过 10%，中心视场不允许拦光。整组调焦，最近摄影距离 1m，CCD 保护玻璃 K9 厚度 0.7mm，保护玻璃到感光面距离 0.5mm。在保护玻璃前有红外截止滤色片，可看成 0.7mm 厚的 K9 平板玻璃，其后面到 CCD 保护玻璃距离为 0.5mm，其前面到镜头最后一面的距离在 40mm 到 45mm。&lt;/li>
&lt;li>考察 10m、5m、1m 三个摄影距离时整体调焦后的成像质量，各视场弥散斑越小越好，并在 5m 摄影距离时需达到Ⅰ级照相镜头的 MTF 标准&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>，具体参数见下表。&lt;/li>
&lt;li>最大畸变＜2%。&lt;/li>
&lt;li>各面半径应尽可能多地采用浙大光仪厂样板，系统总长越短越好，尽量使用成都光明厂的环保玻璃（H- 开头），少采用高折射率高阿贝数的材料，以降低成本。&lt;/li>
&lt;/ol>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">&lt;/th>
&lt;th style="text-align: center">10 lp/mm&lt;/th>
&lt;th style="text-align: center">10 lp/mm&lt;/th>
&lt;th style="text-align: center">30 lp/mm&lt;/th>
&lt;th style="text-align: center">30 lp/mm&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">&lt;/td>
&lt;td style="text-align: center">轴上点&lt;/td>
&lt;td style="text-align: center">0.707 视场&lt;/td>
&lt;td style="text-align: center">轴上点&lt;/td>
&lt;td style="text-align: center">0.707 视场&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">全孔径&lt;/td>
&lt;td style="text-align: center">0.6&lt;/td>
&lt;td style="text-align: center">0.3&lt;/td>
&lt;td style="text-align: center">0.3&lt;/td>
&lt;td style="text-align: center">0.15&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">F8&lt;/td>
&lt;td style="text-align: center">0.75&lt;/td>
&lt;td style="text-align: center">0.4&lt;/td>
&lt;td style="text-align: center">0.4&lt;/td>
&lt;td style="text-align: center">0.2&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;h3 id="成果展示">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#成果展示" class="anchor-link" aria-label="成果展示">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:成果展示" class="headings">成果展示&lt;/a>&lt;/h3>
&lt;h4 id="程序设计">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#程序设计" class="anchor-link" aria-label="程序设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:程序设计" class="headings">程序设计&lt;/a>&lt;/h4>
&lt;p>相差计算方法如下图所示。&lt;/p>
&lt;div class="mermaid">
graph LR
A(各类相差计算) --> B[调用 DFC L' 与 I']
A --> C[调用 DFC yp' 与 y0']
A --> D[调用 xs' 与 xt']
A --> E[调用 kt']
B --> F[球差与位置色差]
C --> G[畸变与倍率色差]
D --> H[像散与场曲]
E --> I[子午彗差]
&lt;/div>
&lt;p>老师并没有强制要求我们用什么语言，但由于我们只系统地学习过 C，所以我们用 C 语言编写的这个程序，然后使用 Qt 编写图形用户界面。&lt;/p>
&lt;p>其实最开始我们并没有考虑添加图形用户界面，但在程序设计的要求中有一项「便于用户使用」，并且别的组已经考虑添加图形用户界面，为了在最后答辩的时候表现得不那么 low，才决定使用 Qt 编写的，而且是一天速成 Qt。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-graphical-user-interface.jpg" alt="short-term-graphical-user-interface.jpg">&lt;span class="caption">※ 图形用户界面&lt;/span>&lt;/p>
&lt;p>在这里我不再详细说明图形用户界面的设计过程，主要展示程序的核心计算部分的内容。&lt;/p>
&lt;p>主函数部分：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="kt">int&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">filename&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">123&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">k5&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">123&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">k6&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">123&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">k1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">FILE&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">fp&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">fp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">fopen&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;d:&lt;/span>&lt;span class="se">\\&lt;/span>&lt;span class="s">temp.txt&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;r&amp;#34;&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="nb">NULL&lt;/span> &lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">printf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;Open file failed!!&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">exit&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fscanf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;%s%le%le%le%le&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">strcpy&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k5&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">=-&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">c&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">xg&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">printf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;%s&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">read_data&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">123&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">123&lt;/span>&lt;span class="p">],&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">strcpy&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">filename&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">strcpy&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">GetFilename&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">strcpy&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;result.txt&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">replace_string&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">printf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;%s&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">printf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">&amp;#34;%s&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">q&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">FILE&lt;/span>&lt;span class="o">*&lt;/span> &lt;span class="n">fp1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">fopen&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">q&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s">&amp;#34;w&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;f&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_f1&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;D l&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;C l&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_l1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;F l&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_l1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;D L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;C L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;F L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a D L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a C L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a F L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;l_H&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_f1&lt;/span>&lt;span class="p">());&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;l_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_lp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;y_0&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w y_0&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\delta L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a \delta L&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\delta l_ch&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_ls1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a \delta l_ch&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_ls1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_ls1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0a \delta l_ch&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_l1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_l1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;X_t&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_xt1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;X_s&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_xs1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\Delta X&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_xt1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_xs1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;D y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;C y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;F y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w D y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w C y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w F y_p&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\delta y&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\delta y&amp;#39;/y_0&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,(&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w \delta y&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w \delta y&amp;#39;/y_0&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,(&lt;/span>&lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;\delta y_ch&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_yp1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w \delta y_ch&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_yp1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nf">get_yp1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;K_t&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_Ks&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7w K_t&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_Ks&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a K_t&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_Ks&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">km&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">ka&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mf">0.7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">fprintf&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">fp1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;0.7a 0.7w K_t&amp;#39;:%le&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s">&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nf">get_Ks&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">));&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其功能为读取文件，调用各项函数计算，输出结果到文件。&lt;/p>
&lt;p>在计算中，我们将光从光源出射，经过的每一个透镜面的面曲率半径、该面后方的折射率、该面到前方一面的距离、阿贝数、该面的口径大小存放在一个结构体中。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="k">struct&lt;/span> &lt;span class="n">GLASS&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">name&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c1">// 镜片编号
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">r&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//曲率半径
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//后面折射率
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">d&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//到前面距离
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">Vd&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//阿贝数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//镜片直径
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">struct&lt;/span> &lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">next&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//下一镜片
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>为了方便计算，还定义了一些结构体存放主光线、第一近轴光线、第二近轴光线、轴上点边缘光线相关参数。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="k">struct&lt;/span> &lt;span class="n">FACE&lt;/span> &lt;span class="c1">//储存主光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">name&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c1">//镜片编号
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">U&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">L&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物距
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">U1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//像方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">L1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">n1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">I&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">I1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">PA&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">s1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">t&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">t1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">struct&lt;/span> &lt;span class="n">FACE&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">next&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//下一镜片
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">struct&lt;/span> &lt;span class="n">FACE1&lt;/span> &lt;span class="c1">//储存第二近轴光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">name&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c1">// 镜片编号
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">u&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">l&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物距
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">u1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//像方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">l1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">n1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">struct&lt;/span> &lt;span class="n">FACE1&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">next&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//下一镜片
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">struct&lt;/span> &lt;span class="n">FACE2&lt;/span> &lt;span class="c1">//储存第一近轴光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">name&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c1">// 镜片编号
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">u&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">l&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物距
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">u1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//像方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">l1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">n1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">struct&lt;/span> &lt;span class="n">FACE2&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">next&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//下一镜片
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">struct&lt;/span> &lt;span class="n">FACE3&lt;/span> &lt;span class="c1">//储存轴上点边缘光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">name&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">];&lt;/span> &lt;span class="c1">// 镜片编号
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">U&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">L&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//物距
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">U1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//像方孔径角
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="kt">double&lt;/span> &lt;span class="n">L1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">double&lt;/span> &lt;span class="n">n1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">struct&lt;/span> &lt;span class="n">FACE3&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">next&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//下一镜片
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>为了方便计算各类相差，定义如下函数。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">read_data&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="n">r&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="n">d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="n">Vd&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="nf">Search&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">current&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//查找镜片所在链表位置
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">FACE&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="nf">Search1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">current&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">FACE1&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="nf">Search2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">current&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">FACE2&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="nf">Search3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">current&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">wirte_result&lt;/span>&lt;span class="p">();&lt;/span> &lt;span class="c1">//将计算结果输出到txt文档
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">save1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">save2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">save3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">save4&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">calculat_U1l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">si&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算像方参数及下一面物方
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">calculat1_U1l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">si&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算轴上点边缘光线像物参数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">calculat_u1l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">si&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算第二近轴光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">calculat1_u1l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">si&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算第一近轴光线
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">xs_calculat&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">GLASS&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">si&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">get_head1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//得到轴外点实际光线各像物距数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">get_head2&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//得到第二近轴光线各像物距数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">get_head3&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//得到第一近轴光线各像物距数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">get_head4&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//得到轴上点实际光线各像物距数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_f1&lt;/span>&lt;span class="p">();&lt;/span> &lt;span class="c1">//焦距f1
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_l1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//理想像距l’
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_ls1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//实际像位置
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_yp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//实际像高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_xt1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//子午场曲计算
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_xs1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//弧矢场曲计算
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_lp1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//出瞳距计算
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_y0&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算理想像高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_Ks&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算慧差
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_yp1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算C光实际像高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_yp1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//计算F光实际像高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_l1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//C光理想像距离
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_l1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//F光理想像距离
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_ls1_c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//C光实际像距离
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">double&lt;/span> &lt;span class="nf">get_ls1_f&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">//F光实际像距离
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="nf">GetFilename&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">replace_string&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">source_str&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="n">targ_str&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="kt">char&lt;/span> &lt;span class="o">*&lt;/span>&lt;span class="n">val&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这些函数直接套用书上计算相差的公式就 OK 啦。由于程序代码过长，不方便在这里展示，需要的朋友可以在这里下载（暂不提供图形用户界面的代码）：&lt;a href="https://guanqr.com/uploads/optical-system.zip">optical-system.zip&lt;/a>。&lt;/p>
&lt;p>另外，该程序读取的文件内容书写也有一定的格式，与上文所说存放透镜参数的结构体数据顺序一致。&lt;/p>
&lt;pre tabindex="0">&lt;code>a1 62.5 1.51679695 500 64.2124 10
a2 -43.65 1.67270157 4 32.1789 10
a3 -124.35 1 2.5 0 10
&lt;/code>&lt;/pre>&lt;p>那么这个程序计算的结果精准程度如何呢？&lt;/p>
&lt;p>下图为使用 Zemax 仿真与使用自编程序各项参数的计算结果，可以看出精确度还是很高的，达到了设计要求。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-calculation-results.jpg" alt="short-term-calculation-results.jpg">&lt;span class="caption">※ 计算结果汇总&lt;/span>&lt;/p>
&lt;p>其中位置色差与像散的结算结果误差较大，其他小组的计算结果也出现了这种问题，或许是 Zemax 软件使用的算法与我们不同。&lt;/p>
&lt;h4 id="光学系统设计-1">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#光学系统设计-1" class="anchor-link" aria-label="光学系统设计-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:光学系统设计-1" class="headings">光学系统设计&lt;/a>&lt;/h4>
&lt;p>光学系统设计用到的软件是 Zemax，我是第一次使用这个软件，操作界面很不友好，需要设置很多的参数，我摸索了很长时间才掌握了其基本操作。对于光学系统的初始结构，我找了很多文献资料，最后做出来的结果都不怎么理想。这个设计的评分原则是，所用透镜的个数越少越好，MTF 曲线越高越好，当然，透镜越少，校正像差的效果就越困难，设计的难度更高。有的小组设计的四个透镜组成的系统效果很棒，我们组还是很稳地使用了六个透镜的组合。&lt;/p>
&lt;p>下面是我们组设计的光学系统的具体内容。&lt;/p>
&lt;p>参数设定：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-optical-parameter-setting.jpg" alt="short-term-optical-parameter-setting.jpg">&lt;span class="caption">※ 光学参数设定&lt;/span>&lt;/p>
&lt;p>系统焦距为 50.0794mm。&lt;/p>
&lt;p>平面图如下图所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-optical-system-plane-figure.jpg" alt="short-term-optical-system-plane-figure.jpg">&lt;span class="caption">※ 光学系统平面图&lt;/span>&lt;/p>
&lt;p>拦光情况如下所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-light-fov.jpg" alt="short-term-light-fov.jpg">&lt;span class="caption">※ 系统光线视场&lt;/span>&lt;/p>
&lt;p>MTF 曲线如下所示：&lt;/p>
&lt;p>F=3.5 时：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-light-mtf-f35.jpg" alt="short-term-light-mtf-f35.jpg">&lt;span class="caption">※ MTF 曲线&lt;/span>&lt;/p>
&lt;p>F=8 时：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-light-mtf-f8.jpg" alt="short-term-light-mtf-f8.jpg">&lt;span class="caption">※ MTF 曲线&lt;/span>&lt;/p>
&lt;p>最大畸变达到 1.8446%，各项参数均达到设计要求。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-field-curvature.jpg" alt="short-term-field-curvature.jpg">&lt;span class="caption">※ 场曲/畸变&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-distortion.jpg" alt="short-term-distortion.jpg">&lt;span class="caption">※ 畸变&lt;/span>&lt;/p>
&lt;p>在光学图纸的绘制，我们总共绘制了九张图纸，六片透镜的、两个双胶合透镜的、一个整体系统的。这里展示一下系统的图纸，其他的不一一展示了。在绘制光学图纸的时候，需要注意生产要求的标注。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-optical-drawing.jpg" alt="short-term-optical-drawing.jpg">&lt;span class="caption">※ 光学图纸&lt;/span>&lt;/p>
&lt;h3 id="课程感想">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#课程感想" class="anchor-link" aria-label="课程感想">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:课程感想" class="headings">课程感想&lt;/a>&lt;/h3>
&lt;p>这门课程总结一下一个字就能概括，那就是「肝」。前面程序设计部分，只要各项相差的算法能熟练掌握，基本不成问题。但在设计光学系统的时候，为了设计出达标的光学系统，我从早上六点多起来，开始调整参数，在屏幕前一坐就是一天，中间就吃了一点面包。在课程期间我还得了肠胃炎，感觉「生不如死」。这门课程的工作量巨大，在有限的时间内，要求你实现无限的可能。虽然说有竞争就很可能出现奇迹，但真的很累很累。和这门课程相比，后面这门《电子系统设计》简直就是养老课程。&lt;/p>
&lt;h2 id="电子系统设计">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#电子系统设计" class="anchor-link" aria-label="电子系统设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:电子系统设计" class="headings">电子系统设计&lt;/a>&lt;/h2>
&lt;p>这门课程是《微机原理与接口技术》课程的后续实践课程，对 PCB 板的绘制，单片机的编程进行系统学习与综合实践，趣味十足，在《光学系统设计》课程中，每天需要「肝」到凌晨，但这门课，下课后基本没有什么任务。这门课程也比较重要，对大三暑期的光电设计竞赛打下基础（我现在并没有想好明年暑假是参加光电设计竞赛还是去实习）。&lt;/p>
&lt;p>这门课程从 7 月 17 日上到 7 月 27 日，主要分为三部分内容：电路原理图与 PCB 板的绘制、电路焊接与调试、微机程序设计。在以前的课程中，还有印刷电路板这一项，将你设计好的 PCB 板制作出来。但是由于我们使用的电路比以往要复杂很多，学校提供的仪器精度不够，所以就取消了。&lt;/p>
&lt;p>在微机程序设计部分，今年有两组套件可以选择，一是无弦琴、二是出租车计价器。我选的是无弦琴，因为出租车计价器里有一些模块，在我上《微机原理与接口技术》这门课程的时候给我留下了一些阴影，让我觉得出租车计价器的程序编写起来一定很坑，当然，无弦琴和音乐有关，这也是我喜欢的部分。&lt;/p>
&lt;h3 id="设计要求">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#设计要求" class="anchor-link" aria-label="设计要求">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:设计要求" class="headings">设计要求&lt;/a>&lt;/h3>
&lt;ul>
&lt;li>PCB 板：
&lt;ul>
&lt;li>线宽：信号线 ≥0.254ｍｍ、电源线 ≥0.508ｍm、地线通过辅铜连接。&lt;/li>
&lt;li>过孔直径 ≥0.381ｍｍ。&lt;/li>
&lt;li>安全间距 ≥0.254ｍｍ。&lt;/li>
&lt;li>采用双面板，双层布线。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>弹奏功能：7 个激光对管实现中高低 21 个音符的实时弹奏，在 LCD 上显示乐谱。&lt;/li>
&lt;li>录音功能：录制所弹奏的音符，包括每个音符持续时间及相邻音符的间隔时间。录制完后可回放及在 LCD 上显示乐谱。&lt;/li>
&lt;li>娱乐功能：设计一款音乐游戏。例如：看谱学习弹奏，对所弹乐谱和标准乐谱比较及评价。&lt;/li>
&lt;/ul>
&lt;h3 id="成果展示-1">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#成果展示-1" class="anchor-link" aria-label="成果展示-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:成果展示-1" class="headings">成果展示&lt;/a>&lt;/h3>
&lt;p>先来看看我的无弦琴外观图。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-no-stringed-qin.jpg" alt="short-term-no-stringed-qin.jpg">&lt;span class="caption">※ 无弦琴&lt;/span>&lt;/p>
&lt;h4 id="电路原理图与-pcb-设计">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#电路原理图与-pcb-设计" class="anchor-link" aria-label="电路原理图与-pcb-设计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:电路原理图与-pcb-设计" class="headings">电路原理图与 PCB 设计&lt;/a>&lt;/h4>
&lt;p>这门课使用到了 Altium Designer 这一款软件，通过这个软件绘制电路原理图和 PCB 板。我们在这门课程中只是接触到了这款软件的「皮毛」部分，其实还有很多需要课外下功夫学习的地方。&lt;/p>
&lt;p>我绘制的电路原理图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-schematic-0.jpg" alt="short-term-schematic-0.jpg">&lt;span class="caption">※ 电路原理图 1&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-schematic-1.jpg" alt="short-term-schematic-1.jpg">&lt;span class="caption">※ 电路原理图 2&lt;/span>&lt;/p>
&lt;p>分为电源模块、LCD模块、喇叭模块、蜂鸣器模块、LED显示模块、激光接收管IS0103模块、按键模块、激光发射管模块。&lt;/p>
&lt;p>无弦琴的芯片采用 STC15F2K60S2，有三个定时器：定时器 0、定时器 1 和定时器 2，有两个硬件串口（UART1 和 UART2），有 SPI（只可用作主模式,从模式不可用），有 3 路 PCA/PWM/CCP（可用作 DAC），有 8 通道 10 位精度的 A/D。&lt;/p>
&lt;p>LCD 液晶显示模块是 128×64 点阵的汉字图形型液晶显示模块。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-lcd.jpg" alt="short-term-lcd.jpg">&lt;span class="caption">※ LCD 液晶显示器&lt;/span>&lt;/p>
&lt;p>PCB 图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-pcb-part1-0.jpg" alt="short-term-pcb-part1-0.jpg">&lt;span class="caption">※ 主控制板正面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-pcb-part1-1.jpg" alt="short-term-pcb-part1-1.jpg">&lt;span class="caption">※ 主控制板背面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-pcb-part2-0.jpg" alt="short-term-pcb-part2-0.jpg">&lt;span class="caption">※ 激光发射板正面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-pcb-part2-1.jpg" alt="short-term-pcb-part2-1.jpg">&lt;span class="caption">※ 激光发射板正面&lt;/span>&lt;/p>
&lt;p>在设计中遇到的问题：&lt;/p>
&lt;ol>
&lt;li>添加元器件库：绘制原理图需要添加不同的元器件，有一些元器件在软件自带的库中包含，但还有一些特殊的元器件需要自己绘制并添加到库中。老师给我们提供了部分元器件的库，但仍有几个元件需要自己绘制。我绘制了三个元件图，并添加在库中。分别为 DLED、NCP1117-3.3、SN74HC21。&lt;/li>
&lt;li>放置元器件并添加电气连接：在这里每一个元器件管脚的 Designator，需要注意标号的顺序一定要正确，否则会在后面绘制PCB板的时候出现问题。在管脚处还需要添加网络标签，建立不同元器件之间的电气连接。最初绘制的时候，对每一个元器件的管脚处并没有添加网络标签，只是进行了文字的注释。这样会导致在编译检查错误的时候，本应相连的两个元器件之间并没有任何连接。&lt;/li>
&lt;li>元器件封装：封装的时候，有几个元件没有现成的封装库，需要自己设计，我自行设计了 RM065、IS0103 等元件的封装。这里需要通过查找资料获得元器件的尺寸等相关参数进行设计。在这里要注意焊盘的大小。&lt;/li>
&lt;li>布线：首先使用软件自动布线的功能，可以显著地减小工作量，但是自动布线有一些地方不够美观。因此我决定先进行手动布线，在基本布线完成后，固定已有布线，进行自动布线。一方面充分发挥了自动布线的功能，另一方面经过手动调整之后整体的布线更加美观、合理。&lt;/li>
&lt;/ol>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-dled-npc1117-sn74hc21.jpg" alt="short-term-dled-npc1117-sn74hc21.jpg">&lt;span class="caption">※ 绘制的元件&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-designator.jpg" alt="short-term-designator.jpg">&lt;span class="caption">※ Designator&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-package.jpg" alt="short-term-package.jpg">&lt;span class="caption">※ 封装设计&lt;/span>&lt;/p>
&lt;h4 id="电路焊接">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#电路焊接" class="anchor-link" aria-label="电路焊接">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:电路焊接" class="headings">电路焊接&lt;/a>&lt;/h4>
&lt;p>其实在大一、大二的一些课程中已经练习了很多次焊接了，焊接中最难的部分就是贴片元件的焊接。上一次焊接贴片还是在大一的电子工程训练中，到现在隔了很长时间没有练习，有一些生疏。焊接的时候很难控制贴片元件的方向和位置，导致焊接速度很慢，焊点的美观程度也有待提高。我最终采用的焊接方法是，先对其中一个焊盘上锡，接着拿镊子夹持元件到安装位置，右手持烙铁靠近以镀锡的焊盘并熔化焊锡，将一个引脚焊好，固定完一个脚之后再焊接另一个脚。&lt;/p>
&lt;p>在焊接 LED 的时候，套件自带的两个蓝光 LED 在焊接过程中外壳被镊子意外夹碎，因此更换了两个红光 LED。为了实现无弦琴的正常工作，必须保证所有的激光发射器和激光接收管精准对齐。最开始焊接时，我们将所有激光接收管都拔高，使得其高度与激光发射器相同，但是在实际使用时发现很难将所有激光对管同时对准，或者对准之后很容易受到干扰。最终决定重新焊接到底部，并将激光发射器所在的 PCB 板垫高，从而更容易实现激光对管的对准。&lt;/p>
&lt;p>在老师发的无弦琴套件中，高低音选择模块的电路有一些问题，因此没有焊接该模块，直接采用矩阵键盘控制高低音选择。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-weld-0.jpg" alt="short-term-weld-0.jpg">&lt;span class="caption">※ 电路焊接背面&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-weld-1.jpg" alt="short-term-weld-1.jpg">&lt;span class="caption">※ 电路焊接正面&lt;/span>&lt;/p>
&lt;h4 id="程序设计-1">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#程序设计-1" class="anchor-link" aria-label="程序设计-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:程序设计-1" class="headings">程序设计&lt;/a>&lt;/h4>
&lt;p>整体结构：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-program-function-structure.jpg" alt="short-term-program-function-structure.jpg">&lt;span class="caption">※ 程序功能结构&lt;/span>&lt;/p>
&lt;p>程序功能流程图由于篇幅所限，不再展示。&lt;/p>
&lt;p>在老师所给的示例程序中，控制音调的部分，发音不太准确，而且将乐谱转换为数组存放在程序中较为繁琐。我在网上搜索到一个更好的控制发音的方法。定义一个二维数组控制发音，能够实现4个8度的 48 个音调的发音。包括七个音符与升降调的发音。并且在输入乐谱的时候，只需要输入音符与发音长短即可。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">T&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">49&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">//0低
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mh">0xF8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x8B&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xF8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xF2&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xF9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5B&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xF9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xB7&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFA&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x14&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFA&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFA&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xB9&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFB&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x03&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFB&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4A&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFB&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x8F&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFB&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xCF&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFC&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x0B&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">//12中
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mh">0xFC&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x43&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFC&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x78&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFC&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xAB&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFC&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xDB&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x08&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x33&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5B&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x81&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xA5&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xC7&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFD&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xE7&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x05&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">//24高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x21&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x3C&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x55&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6D&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x84&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x99&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xAD&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xC0&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x02&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xE3&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFE&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xF3&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x02&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">//36再高
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x10&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x1D&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x2A&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x36&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x42&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4C&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x56&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x60&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x69&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x71&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x79&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x81&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 1(1) 1#(2) 2(3) 2#(4) 3(5) 4(6) 4#(7) 5(8) 5#(9) 6(10) 6#(11) 7(12)
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">music1&lt;/span>&lt;span class="p">[][&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">15&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">17&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">};&lt;/span>&lt;span class="c1">//歌曲1
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最初为了使前后两个相同音符发声时有间断，在音乐播放函数中增加了下面的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="k">else&lt;/span> &lt;span class="nf">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="n">music&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">pause&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>但在录音中，由于录音无法准确控制音的长短，存放在数组中的时候，同一个音很可能存放在好几个数中，所以播放录音的时候会出现停顿，最后考虑将这一代码删去。&lt;/p>
&lt;p>最初设想增加一个函数，单独显示乐谱，但由于在音乐播放时无法同时启用另一个函数实时显示乐谱并实现翻页，最后将显示乐谱的功能增加到了音乐播放函数中。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="k">switch&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;1&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;2&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;3&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;4&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;5&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;6&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;7&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>程序基本要求为能弹奏高中低部的音，由于电路板中高低音选择模块没有添加进去，为了控制高低音，需要控制矩阵键盘的输入状态。因此我们采用，基本发声为中音部 12 个音（包括升降音），定义一变量 &lt;code>tune&lt;/code>，当某一按键按下，事件为高音，&lt;code>tune=1&lt;/code>，则发出的声音此声音 &lt;code>+12tune&lt;/code>。当某一按键按下，事件为低音，&lt;code>tune=-1&lt;/code>，则发出的声音此声音 &lt;code>-12tune&lt;/code>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="n">OPT_CHECK&lt;/span>&lt;span class="o">!=&lt;/span>&lt;span class="mh">0xff&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">switch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key_tune&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">41&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;high &amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">tune&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">case&lt;/span> &lt;span class="mi">42&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;low &amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">tune&lt;/span>&lt;span class="o">=-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">default&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;middle&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="n">tune&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">OPT_CHECK&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">Disp&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s">&amp;#34;音调：1&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">m&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">13&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">tune&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在录音功能中，除了上述声音间断的问题，还有的问题是，开启录音后会立即录音，录音完成后，如果激光发射管与接收管没有对齐，会一直发出声音。我们定义了一个空数组存放录音。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">idata&lt;/span> &lt;span class="n">music6&lt;/span>&lt;span class="p">[][&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},{&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">}};&lt;/span> &lt;span class="c1">// 录音
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>但由于数组长度固定，如果只是播放所录的音，并且录的声音过短的话，数组后面会空下很多空的数，那么在乐谱显示中会一直显示 0。最终我们的解决方法是，开启录音后，判断音符是否为 0，如果不是 0 才开启录音，因此数组存放的第一个音不会是 0，即空音。在录音结束后，在最后一个音后插入终端 &lt;code>{0xFF,0xFF}&lt;/code>，这样就不会显示后面的空音 0。&lt;/p>
&lt;p>为了显示我们想要的图像，需要将图像的像素调整到 128*64，这也是显示屏的像素。然后使用取模的软件，将图像转换为数组存放，存放的数据为 16 进制，转化为 2 进制为 8 位，因此长度为 16。我们使用的 LCD 显示屏是由两块屏拼接而成，显示图像的函数定义为上下两块屏同时刷新显示。因此高度 64 需要拆成 2 个 32。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">clong&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">hight&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">hight&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">32&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">clong&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nf">Ini_Lcd&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="c1">//液晶初始化子程序
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="nf">WRGDRAM&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">clong&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">hight&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">gImage_1&lt;/span>&lt;span class="p">);&lt;/span> &lt;span class="c1">// 开机图片
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在编写程序的过程中，我们发现有一些特定的汉字无法显示，会出现乱码。比如我们有一个娱乐功能是数独游戏，「数独」这两个字就无法显示。最终我们采用显示英文的方法避开了这个问题。&lt;/p>
&lt;p>程序的完整代码可以在这里下载：&lt;a href="https://guanqr.com/uploads/wu-xian-qin.zip">wu-xian-qin.zip&lt;/a>。&lt;/p>
&lt;p>功能展示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-no-stringed-qin-function-0.jpg" alt="short-term-no-stringed-qin-function-0.jpg">&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/short-term-no-stringed-qin-function-1.jpg" alt="short-term-no-stringed-qin-function-1.jpg">&lt;/p>
&lt;h3 id="课程建议">&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#课程建议" class="anchor-link" aria-label="课程建议">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#contents:课程建议" class="headings">课程建议&lt;/a>&lt;/h3>
&lt;p>这门课程用一句话总结：收获颇多，趣味十足。看到美妙的乐曲从自己制作的无弦琴中演奏出来，内心充满喜悦。但我还想提一些建议。&lt;/p>
&lt;ol>
&lt;li>
&lt;p>在答辩过程中，有同学提到，课程内容时长设计不太合理，说前面的 Altium Designer 软件的使用应该缩减时间，要花更多的时间在程序设计上。这一点我并不认可。我觉得 AD 软件的使用是基础操作的训练，在软件的学习中，肯定有一些同学还没有掌握软件的基础操作。因此我觉得，可以在原有教学时长不变的情况下，在 AD 软件使用部分增加一些内容，加深印象。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>关于课程开设的时间，我们都希望能在不那么热的时候上课。因为大二学生要从紫金港搬到玉泉，如果将课程改到开学前进行，那只能将该课程改到玉泉上，这也是一件很麻烦的事。所以我想，可以考虑在晚上进行课程，比如一天的开课时间为 8:30-11:30，18:30-21:30，避开下午上课。但这样的话需要老师更辛苦一些。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>关于套件的原理，在答辩中，可以看到大多数同学并没有深入了解无弦琴的工作原理，对于老师的一些问题并没有思考过。所以我觉得可以考虑增加部分套件电路原理的学习。在我们组答辩的时候，老师问我们用没用到万用变示波器之类的仪器检测焊接并调试，我们没有使用。我觉得，可以在以后的课程中，对套件中的一些元件，不硬性规定参数，举个例子，比如发射管模块的电阻，不规定电阻的阻值，让同学们自己摸索出适合的阻值进行焊接，这样设计出的电路就更加灵活。在这期间可能会焊接错误的阻值，这样的话无弦琴的工作状态肯定就不理想，这样的话，学生们就一定需要调试电路，对无弦琴工作原理的理解就加深了。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>由于我们上课所用的教室不经常用，设备也会出现一些问题，比如我们上课时投影仪的颜色就出现了问题，这对于课程教学有一定的影响。希望能经常检查设备的工作状况。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>低频的 MTF 一般应高于高频的 MTF，如有降低，则降低处比高频最高的 MTF 值低 20% 以内。&amp;#160;&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/opt-short-term-2019/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/opt-short-term-2019/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/geometric-optics/">几何光学</category><category domain="https://guanqr.com/tags/microcontroller/">单片机</category><category domain="https://guanqr.com/tags/modeling/">建模</category><category domain="https://guanqr.com/tags/solidworks/">SolidWorks</category><category domain="https://guanqr.com/tags/zemax/">Zemax</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
使用 GitBook 制作电子书</title><link>https://guanqr.com/tech/computer/start-using-gitbook/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/start-using-gitbook/</guid><pubDate>Mon, 22 Jul 2019 10:05:12 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/gitbook-logo.png" alt="gitbook-logo.png">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>上个月的期末考试周前，我正使用 Chris Wu 的 &lt;a href="https://github.com/wklchris/Note-by-LaTeX" target="_blank" rel="noopener">Note-by-LaTeX 手册&lt;/a>对 LaTeX 排版进行系统性的学习，无意间瞥见其使用 GitBook 编写的电子书项目，便点进去一探究竟。Chris Wu 将其学习的课程笔记很有条理地记录在 GitBook 中，每一章节的结构在左侧显示，清晰明了。你还可以调整阅读的字体、文字大小、背景的亮暗主题。GitBook 还支持很多的插件使用，你可以在文章中优雅地插入数学公式、图表等等。当然，GitBook 的书写也离不开 Markdown。&lt;/p>
&lt;p>我意识到，这是一个记录课程笔记再好不过的工具，不同于将课程笔记记录在纸质笔记本或者 iPad 或者 OneNote 中，使用 GitBook，你可以在网络上在线阅读你的笔记，将你的笔记分享给其他有需要的人。所以我在考试周前作大死花了一天的时间学习了如何使用 GitBook，写出来了一个半成品。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/my-first-gitbook.png" alt="my-first-gitbook.png">&lt;span class="caption">※ 我的第一本 GitBook 电子书&lt;/span>&lt;/p>
&lt;h2 id="gitbook-简介">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-简介" class="anchor-link" aria-label="gitbook-简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>GitBook 简介&lt;/h2>
&lt;p>&lt;a href="https://www.gitbook.com/" target="_blank" rel="noopener">GitBook&lt;/a> 是一个基于 Node.js 的命令行工具，支持 Markdown 语法格式，可以输出 HTML、PDF、eBook 等格式的电子书。&lt;/p>
&lt;p>GitBook 支持的特性：&lt;/p>
&lt;ul>
&lt;li>目录分级与链接。&lt;/li>
&lt;li>多语言文档支持。&lt;/li>
&lt;li>术语自动索引。&lt;/li>
&lt;li>对 LaTeX 数学公式的支持。&lt;/li>
&lt;li>网页端强大的自定义样式。&lt;/li>
&lt;li>多种成书格式选择。&lt;/li>
&lt;/ul>
&lt;h2 id="安装与使用">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#安装与使用" class="anchor-link" aria-label="安装与使用">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>安装与使用&lt;/h2>
&lt;h3 id="nodejs-的安装">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#nodejs-的安装" class="anchor-link" aria-label="nodejs-的安装">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Node.js 的安装&lt;/h3>
&lt;p>在官方网站&lt;a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener">首页&lt;/a>就提供了 &lt;code>Node.js&lt;/code> 的下载链接。我推荐下载长期支持的版本。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/download-nodejs.png" alt="download-nodejs.png">&lt;span class="caption">※ 下载 Node.js&lt;/span>&lt;/p>
&lt;p>预设的情况下，会下载 &lt;code>.msi&lt;/code> 格式的安装包，如果你想要使用其他不同形式的安装文件，可以从其官网&lt;a href="https://nodejs.org/zh-cn/download/" target="_blank" rel="noopener">下载地址页面&lt;/a>下载安装。Windows 的安装包除了 &lt;code>.exe&lt;/code> 与 &lt;code>.msi&lt;/code> 两种格式外，还分为 32-bit 与 64-bit 两种，请读者根据自己的计算机配置选择合适的安装包进行安装。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/choose-nodejs-version.png" alt="choose-nodejs-version.png">&lt;span class="caption">※ 选择 Node.js 版本&lt;/span>&lt;/p>
&lt;p>安装完成这后，你可以在终端模式下检验一下：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ node -v
v0.10.28
&lt;/code>&lt;/pre>&lt;p>看到这些提示，就表示你已成功安装上了 &lt;code>Node.js&lt;/code>。&lt;/p>
&lt;h3 id="gitbook-的安装">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-的安装" class="anchor-link" aria-label="gitbook-的安装">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>GitBook 的安装&lt;/h3>
&lt;p>你需要在安装完成 &lt;code>Node.js&lt;/code> 后，再利用命令行安装 GitBook。&lt;/p>
&lt;p>在命令行中输入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ npm install gitbook-cli -g
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>新建一个存放你的 GitBook书籍的文件夹，在该文件夹处打开 Git 命令行：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ gitbook init
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>安装完成，可以输入 &lt;code>-V&lt;/code> 命令查看 GitBook 版本号，以确定成功安装：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ gitbook -V
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">CLI version: 2.3.2
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">GitBook version: 3.2.3
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在该文件夹中，会生成两个文件，分别是 &lt;code>README.md&lt;/code> 和 &lt;code>SUMMARY.md&lt;/code>，这是两个必要文件。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ tree book/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">book/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">├── README.md
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">└── SUMMARY.md
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="m">0&lt;/span> directories, &lt;span class="m">2&lt;/span> files
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>README.md&lt;/code> 是对书籍的简单介绍：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">$ cat book/README.md
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gh"># README
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gh">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">This is a book powered by [&lt;span class="nt">GitBook&lt;/span>](&lt;span class="na">https://github.com/GitbookIO/gitbook&lt;/span>).
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>SUMMARY.md&lt;/code> 是书籍的目录结构。内容如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">$ cat book/SUMMARY.md
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gh"># SUMMARY
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gh">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Chapter1&lt;/span>](&lt;span class="na">chapter1/README.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">*&lt;/span> [&lt;span class="nt">Section1.1&lt;/span>](&lt;span class="na">chapter1/section1.1.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">*&lt;/span> [&lt;span class="nt">Section1.2&lt;/span>](&lt;span class="na">chapter1/section1.2.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Chapter2&lt;/span>](&lt;span class="na">chapter2/README.md&lt;/span>)
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们可以通过使用「标题」或者「水平分割线」标志将 GitBook 分为几个不同的部分：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">&lt;span class="gh"># Summary
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gh">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gu">### Part I
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gu">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Introduction&lt;/span>](&lt;span class="na">README.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Writing is nice&lt;/span>](&lt;span class="na">part1/writing.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">GitBook is nice&lt;/span>](&lt;span class="na">part1/gitbook.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gu">### Part II
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gu">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">We love feedback&lt;/span>](&lt;span class="na">part2/feedback_please.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Better tools for authors&lt;/span>](&lt;span class="na">part2/better_tools.md&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">----
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">*&lt;/span> [&lt;span class="nt">Last part without title&lt;/span>](&lt;span class="na">part3/title.md&lt;/span>)
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="readme-的书写格式">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#readme-的书写格式" class="anchor-link" aria-label="readme-的书写格式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>README 的书写格式&lt;/h3>
&lt;p>在 &lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-%e7%9a%84%e5%ae%89%e8%a3%85">GitBook 的安装&lt;/a> 这一章节中已经提到，&lt;code>README.md&lt;/code> 是对书籍的简单介绍。&lt;/p>
&lt;h3 id="summary-的书写格式">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#summary-的书写格式" class="anchor-link" aria-label="summary-的书写格式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>SUMMARY 的书写格式&lt;/h3>
&lt;p>这个文件是一本书的目录结构，在 &lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-%e7%9a%84%e5%ae%89%e8%a3%85">GitBook 的安装&lt;/a>这一章节中已经提到，比如：&lt;/p>
&lt;pre tabindex="0">&lt;code>* [GitBook 学习笔记](README.md)
* [安装与使用](install/README.md)
* [Node.js 的安装](install/Nodejsinstall.md)
* [GitBook 的安装](install/gitbookinstall.md)
* [README.md 与 SUMMARY 的编写](install/file.md)
* [book.json 的内容](install/bookjson.md)
* [GitBook 命令行速览](install/gitbookcli.md)
* [GitBook 插件](plugin/README.md)
* [默认插件](plugin/default.md)
* [插件的安装与加载](plugin/install.md)
* [输出与发布](publish/README.md)
* [输出为静态网页](publish/outfile.md)
* [输出为PDF](publish/pdffile.md)
* [发布到 Github Pages](publish/gitpages.md)
&lt;/code>&lt;/pre>&lt;p>列表加链接，链接中可以使用目录，也可以不使用。&lt;/p>
&lt;h3 id="bookjson-的内容">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#bookjson-的内容" class="anchor-link" aria-label="bookjson-的内容">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>book.json 的内容&lt;/h3>
&lt;p>&lt;code>book.json&lt;/code> 文件包含了你编写的这本书中的基本信息。需要将此文件放置在你所编书籍的根目录中。&lt;/p>
&lt;p>其主要的字段有：&lt;/p>
&lt;ul>
&lt;li>&lt;code>title&lt;/code>：书籍名称&lt;/li>
&lt;li>&lt;code>author&lt;/code>：作者&lt;/li>
&lt;li>&lt;code>description&lt;/code>：书籍描述&lt;/li>
&lt;li>&lt;code>language&lt;/code>：当前书籍语言&lt;/li>
&lt;li>&lt;code>gitbook&lt;/code>：欲调用的 GitBook 版本号&lt;/li>
&lt;li>&lt;code>links&lt;/code>：设置主页链接，显示在侧栏&lt;/li>
&lt;li>&lt;code>styles&lt;/code>：页面 CSS 样式。&lt;/li>
&lt;li>&lt;code>structure&lt;/code>：关键文件位置。&lt;/li>
&lt;li>&lt;code>plugins&lt;/code>：插件加载。&lt;/li>
&lt;li>&lt;code>pluginsConfig&lt;/code>：插件参数。&lt;/li>
&lt;/ul>
&lt;p>比如：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;span class="lnt">84
&lt;/span>&lt;span class="lnt">85
&lt;/span>&lt;span class="lnt">86
&lt;/span>&lt;span class="lnt">87
&lt;/span>&lt;span class="lnt">88
&lt;/span>&lt;span class="lnt">89
&lt;/span>&lt;span class="lnt">90
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;GitBook-Learning&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;啼鸟怨年华&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;介绍如何使用 GitBook。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;language&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;zh-hans&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;gitbook&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;3.2.3&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;links&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;sidebar&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;返回我的主页&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://blog.guanqr.com&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;styles&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;website&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;./styles/website.css&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;structure&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;readme&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;README.md&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;-sharing&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;sharing-plus&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;highlight&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;-lunr&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;-search&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;search-pro&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;splitter&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;collapsible-menu&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;katex&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;code&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;github&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;github-buttons&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;tbfed-pagefooter&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;back-to-top-button&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;anchors&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;rss&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;theme-default&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;showLevel&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;sharing&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;douban&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;facebook&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;google&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;hatenaBookmark&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;instapaper&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;line&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;linkedin&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;messenger&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pocket&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;qq&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;qzone&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;stumbleupon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;twitter&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;viber&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;vk&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;weibo&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;whatsapp&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;all&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;douban&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;qzone&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;weibo&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;facebook&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;google&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;twitter&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;github&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://github.com/guanqr&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;github-buttons&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;buttons&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;user&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;guanqr&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;repo&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;gitbook&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;type&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;star&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;size&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;small&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;count&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tbfed-pagefooter&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;copyright&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;&amp;amp;copy 啼鸟怨年华&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;modify_label&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;最后修改于：&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;modify_format&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;YYYY-MM-DD&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;rss&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;GitBook 学习笔记&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;介绍如何使用 GitBook。&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;啼鸟怨年华&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;feed_url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://blog.guanqr.com/gitbook/how-to-use-gitbook/rss&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;site_url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://blog.guanqr.com/gitbook/how-to-use-gitbook/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;managingEditor&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;guanqirui@zju.edu.cn&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;webMaster&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;guanqirui@zju.edu.cn&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;categories&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;gitbook&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="gitbook-命令行速览">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-命令行速览" class="anchor-link" aria-label="gitbook-命令行速览">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>GitBook 命令行速览&lt;/h3>
&lt;h4 id="一些常用的命令">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#一些常用的命令" class="anchor-link" aria-label="一些常用的命令">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>一些常用的命令&lt;/h4>
&lt;pre tabindex="0">&lt;code>gitbook init //初始化目录文件
gitbook help //列出gitbook所有的命令
gitbook --help //输出gitbook-cli的帮助信息
gitbook build //生成静态网页
gitbook serve //生成静态网页并运行服务器
gitbook build --gitbook=2.0.1 //生成时指定gitbook的版本, 本地没有会先下载
gitbook ls //列出本地所有的gitbook版本
gitbook ls-remote //列出远程可用的gitbook版本
gitbook fetch 标签/版本号 //安装对应的gitbook版本
gitbook update //更新到gitbook的最新版本
gitbook uninstall 2.0.1 //卸载对应的gitbook版本
gitbook build --log=debug //指定log的级别
gitbook builid --debug //输出错误信息
&lt;/code>&lt;/pre>&lt;h4 id="gitbook">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook" class="anchor-link" aria-label="gitbook">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>gitbook&lt;/h4>
&lt;pre tabindex="0">&lt;code>$ gitbook
Usage: gitbook [options] [command]
Commands:
ls List versions installed locally
current Display currently activated version
ls-remote List remote versions available for install
fetch [version] Download and install a &amp;lt;version&amp;gt;
alias [folder] [version] Set an alias named &amp;lt;version&amp;gt; pointing to &amp;lt;folder&amp;gt;
uninstall [version] Uninstall a version
update [tag] Update to the latest version of GitBook
help List commands for GitBook
* run a command with a specific gitbook version
Options:
-h, --help output usage information
-v, --gitbook [version] specify GitBook version to use
-d, --debug enable verbose error
-V, --version Display running versions of gitbook and gitbook-cli
&lt;/code>&lt;/pre>&lt;h4 id="gitbook-ls">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-ls" class="anchor-link" aria-label="gitbook-ls">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>gitbook ls&lt;/h4>
&lt;pre tabindex="0">&lt;code>$ gitbook ls
GitBook Versions Installed:
* 3.2.3
Run &amp;#34;gitbook update&amp;#34; to update to the latest version.
&lt;/code>&lt;/pre>&lt;h4 id="gitbook-ls-remote">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-ls-remote" class="anchor-link" aria-label="gitbook-ls-remote">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>gitbook ls-remote&lt;/h4>
&lt;pre tabindex="0">&lt;code>$ gitbook ls-remote
Available GitBook Versions:
4.0.0-alpha.6, 4.0.0-alpha.5, 4.0.0-alpha.4, 4.0.0-alpha.3, 4.0.0-alpha.2, 4.0.0-alpha.1, 3.2.3, 3.2.2, 3.2.1, 3.2.0, 3.2.0-pre.1, 3.2.0-pre.0, 3.1.1, 3.1.0, 3.0.3, 3.0.2, 3.0.1, 3.0.0, 3.0.0-pre.15, 3.0.0-pre.14, 3.0.0-pre.13, 3.0.0-pre.12, 3.0.0-pre.11, 3.0.0-pre.10, 3.0.0-pre.9, 3.0.0-pre.8, 3.0.0-pre.7, 3.0.0-pre.6, 3.0.0-pre.5, 3.0.0-pre.4, 3.0.0-pre.3, 3.0.0-pre.2, 3.0.0-pre.1, 2.6.9, 2.6.8, 2.6.7, 2.6.6, 2.6.5, 2.6.4, 2.6.3, 2.6.2, 2.6.1, 2.6.0, 2.5.2, 2.5.1, 2.5.0, 2.5.0-beta.7, 2.5.0-beta.6, 2.5.0-beta.5, 2.5.0-beta.4, 2.5.0-beta.3, 2.5.0-beta.2, 2.5.0-beta.1, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.3, 2.3.2, 2.3.1, 2.3.0, 2.2.0, 2.1.0, 2.0.4, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 2.0.0-beta.5, 2.0.0-beta.4, 2.0.0-beta.3, 2.0.0-beta.2, 2.0.0-beta.1, 2.0.0-alpha.9, 2.0.0-alpha.8, 2.0.0-alpha.7, 2.0.0-alpha.6, 2.0.0-alpha.5, 2.0.0-alpha.4, 2.0.0-alpha.3, 2.0.0-alpha.2, 2.0.0-alpha.1
Tags:
latest : 2.6.9
pre : 4.0.0-alpha.6
&lt;/code>&lt;/pre>&lt;p>注意：&lt;code>gitbook serve&lt;/code> 命令长久以来被发现不稳定，时常产生 ENOENT 错误。解决办法是，前往 &lt;code>/lib/output/website/&lt;/code> 文件夹，将 &lt;code>copyPluginAssets.js&lt;/code> 文件最后一个 &lt;code>fs.copyDir&lt;/code> 中的 &lt;code>confirm&lt;/code> 项的值由 &lt;code>true&lt;/code> 改为 &lt;code>false&lt;/code>。在 Windows 上，该文件的路径通常形如：&lt;code>C:/Users/[你的用户名]/.gitbook/versions/[你的 Gitbook 版本号]/lib/output/website&lt;/code>。&lt;/p>
&lt;h2 id="gitbook-插件">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#gitbook-插件" class="anchor-link" aria-label="gitbook-插件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>GitBook 插件&lt;/h2>
&lt;p>部分工作借助插件可以很好地完成，不需要再手动去修改默认的 CSS 等文件。&lt;/p>
&lt;h3 id="插件的安装与加载">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#插件的安装与加载" class="anchor-link" aria-label="插件的安装与加载">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>插件的安装与加载&lt;/h3>
&lt;p>在 &lt;code>book.json&lt;/code> 文件中的 &lt;code>plugins&lt;/code> 项，可以进行插件加载的管理．在每次运行预览命令 &lt;code>gitbook serve&lt;/code> 或构建命令 &lt;code>gitbook build&lt;/code> 前，如果新增了加载的插件，则需要插入新的一句命令：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ gitbook install ./
&lt;/code>&lt;/pre>&lt;p>该命令的作用是安装对应的插件．之后再预览或构建，插件就能正常加载了。&lt;/p>
&lt;h3 id="默认加载插件">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#默认加载插件" class="anchor-link" aria-label="默认加载插件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>默认加载插件&lt;/h3>
&lt;p>Gitbook 默认自带了 5 个插件：&lt;/p>
&lt;ul>
&lt;li>fontsettings：字体插件。&lt;/li>
&lt;li>highlight：代码高亮插件，一般使用 prism 代替。&lt;/li>
&lt;li>search 与 lunr：搜索插件．由于不能搜索中文，建议用 search-pro 替换。&lt;/li>
&lt;li>sharing：分享插件．对本土化的支持有限，可改用 sharing-plus。&lt;/li>
&lt;/ul>
&lt;p>如果想要禁用默认插件，在 &lt;code>plugins&lt;/code> 指明并前缀符号 &lt;code>-&lt;/code> 即可，例如：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;-sharing&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;-highlight&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;prism&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>上例中，第一行表示禁用 &lt;code>sharing&lt;/code> 插件，第二行表示禁用 &lt;code>highlight&lt;/code> 插件并启用 &lt;code>prism&lt;/code> 插件。JSON 格式没有换行格式要求，我这样书写是为了清楚地展现插件功能之间的联系。&lt;/p>
&lt;h3 id="插件汇总">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#插件汇总" class="anchor-link" aria-label="插件汇总">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>插件汇总&lt;/h3>
&lt;p>记录一些实用的插件, 如果要指定插件的版本可以使用 &lt;code>plugin@0.3.1&lt;/code>。下面的插件在 GitBook 的 &lt;code>3.2.3&lt;/code> 版本中可以正常工作，因为一些插件可能不会随着 GitBook 版本的升级而升级，即下面的插件可能不适用高版本的 GitBook，所以这里指定了 GitBook 的版本。这里只是列举了一部分插件。&lt;/p>
&lt;h4 id="disqus">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#disqus" class="anchor-link" aria-label="disqus">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Disqus&lt;/h4>
&lt;p>添加 disqus 评论。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;disqus&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;disqus&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;shortName&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;gitbookuse&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="search-plus">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#search-plus" class="anchor-link" aria-label="search-plus">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Search Plus&lt;/h4>
&lt;p>支持中文搜索, 需要将默认的 &lt;code>search&lt;/code> 和 &lt;code>lunr&lt;/code> 插件去掉。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;-lunr&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;-search&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;search-plus&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="prism">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#prism" class="anchor-link" aria-label="prism">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Prism&lt;/h4>
&lt;p>使用 Prism.js 为语法添加高亮显示，需要将 &lt;code>highlight&lt;/code> 插件去掉。该插件自带的主题样式较少，可以再安装 &lt;code>prism-themes&lt;/code> 插件，里面多提供了几种样式，具体的样式可以参考&lt;a href="https://github.com/PrismJS/prism-themes" target="_blank" rel="noopener">这里&lt;/a>，在设置样式时要注意设置 CSS 文件名，而不是样式名。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;prism&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;-highlight&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;prism&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;css&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;prism-themes/themes/prism-base16-ateliersulphurpool.light.css&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果需要修改背景色、字体大小等，可以在 &lt;code>website.css&lt;/code> 定义 &lt;code>pre[class*=&amp;quot;language-&amp;quot;]&lt;/code> 类来修改，下面是一个示例：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">pre&lt;/span>&lt;span class="o">[&lt;/span>&lt;span class="nt">class&lt;/span>&lt;span class="o">*=&lt;/span>&lt;span class="s2">&amp;#34;language-&amp;#34;&lt;/span>&lt;span class="o">]&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#f7f7f7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">1.2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="advanced-emoji">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#advanced-emoji" class="anchor-link" aria-label="advanced-emoji">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Advanced Emoji&lt;/h4>
&lt;p>支持 &lt;a href="http://www.emoji-cheat-sheet.com/" target="_blank" rel="noopener">emoji 表情&lt;/a>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;advanced-emoji&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="github">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#github" class="anchor-link" aria-label="github">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Github&lt;/h4>
&lt;p>添加 GitHub 图标。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;github&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;github&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://github.com/zhangjikai&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="github-buttons">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#github-buttons" class="anchor-link" aria-label="github-buttons">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Github Buttons&lt;/h4>
&lt;p>添加项目在 GitHub 上的 star、watch、fork 情况。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;github-buttons&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;github-buttons&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;repo&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;zhangjikai/gitbook-use&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;types&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;star&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;watch&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;fork&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;size&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;small&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="ace-plugin">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#ace-plugin" class="anchor-link" aria-label="ace-plugin">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Ace Plugin&lt;/h4>
&lt;p>使 GitBook 支持 ace 。默认情况下，&lt;code>line-height&lt;/code> 为 &lt;code>1&lt;/code>，会使代码显得比较挤，而作者好像没提供修改行高的选项，如果需要修改行高，可以到 &lt;code>node_modules -&amp;gt; github-plugin-ace -&amp;gt; assets -&amp;gt; ace.js&lt;/code> 中加入下面两行代码 (30 行左右的位置)：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-js" data-lang="js">&lt;span class="line">&lt;span class="cl">&lt;span class="nx">editor&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">container&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">style&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">lineHeight&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mf">1.25&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">editor&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">renderer&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">updateFontSize&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>不过上面的做法有个问题就是，每次使用 &lt;code>gitbook install&lt;/code> 安装新的插件之后，代码又会重置为原来的样子。另外可以在 &lt;code>website.css&lt;/code> 中加入下面的 CSS 代码来指定 ace 字体的大小&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">aceCode&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">14&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>使用插件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;ace&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="emphasize">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#emphasize" class="anchor-link" aria-label="emphasize">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Emphasize&lt;/h4>
&lt;p>为文字加上底色。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;emphasize&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="katex">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#katex" class="anchor-link" aria-label="katex">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>KaTeX&lt;/h4>
&lt;p>为了支持数学公式, 我们可以使用 KaTeX 和 MathJax 插件, KaTeX 的渲染速度要快于 MathJax，但 MathJax 支持的语法更多。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;katex&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="include-codeblock">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#include-codeblock" class="anchor-link" aria-label="include-codeblock">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Include Codeblock&lt;/h4>
&lt;p>使用代码块的格式显示所包含文件的内容. 该文件必须存在。插件提供了一些配置，可以区插件官网查看。如果同时使用 ace 和本插件，本插件要在 ace 插件前面加载。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;include-codeblock&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;include-codeblock&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;template&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;ace&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;unindent&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;true&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;theme&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;monokai&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="splitter">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#splitter" class="anchor-link" aria-label="splitter">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Splitter&lt;/h4>
&lt;p>使侧边栏的宽度可以自由调节。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;splitter&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="mermaid-gb3">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#mermaid-gb3" class="anchor-link" aria-label="mermaid-gb3">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Mermaid-gb3&lt;/h4>
&lt;p>支持渲染 &lt;a href="https://github.com/knsv/mermaid" target="_blank" rel="noopener">Mermaid&lt;/a> 图表。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;mermaid-gb3&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="puml">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#puml" class="anchor-link" aria-label="puml">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Puml&lt;/h4>
&lt;p>使用 &lt;a href="http://plantuml.com/" target="_blank" rel="noopener">PlantUML&lt;/a> 展示 uml 图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;puml&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="graph">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#graph" class="anchor-link" aria-label="graph">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Graph&lt;/h4>
&lt;p>使用 &lt;a href="https://mauriciopoppe.github.io/function-plot/" target="_blank" rel="noopener">function-plot&lt;/a> 绘制数学函数图。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;graph&amp;#34;&lt;/span> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="chart">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#chart" class="anchor-link" aria-label="chart">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Chart&lt;/h4>
&lt;p>使用 &lt;a href="https://github.com/c3js/c3" target="_blank" rel="noopener">C3.js&lt;/a> 或者 &lt;a href="https://github.com/highcharts/highcharts" target="_blank" rel="noopener">Highcharts&lt;/a> 绘制图形。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;chart&amp;#34;&lt;/span> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;chart&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;type&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;c3&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>type 可以是 &lt;code>c3&lt;/code> 或者 &lt;code>highcharts&lt;/code>, 默认是 &lt;code>c3&lt;/code>。&lt;/p>
&lt;h4 id="sharing-plus">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#sharing-plus" class="anchor-link" aria-label="sharing-plus">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Sharing-plus&lt;/h4>
&lt;p>分享当前页面，比默认的 sharing 插件多了一些分享方式。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;-sharing&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;sharing-plus&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>配置:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;sharing&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;douban&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;facebook&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;google&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;hatenaBookmark&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;instapaper&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;line&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;linkedin&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;messenger&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pocket&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;qq&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;qzone&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;stumbleupon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;twitter&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;viber&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;vk&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;weibo&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;whatsapp&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;all&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;facebook&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;google&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;twitter&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;weibo&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;instapaper&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;linkedin&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;pocket&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;stumbleupon&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="tbfed-pagefooter">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#tbfed-pagefooter" class="anchor-link" aria-label="tbfed-pagefooter">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Tbfed-pagefooter&lt;/h4>
&lt;p>为页面添加页脚。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;tbfed-pagefooter&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tbfed-pagefooter&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;copyright&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;Copyright &amp;amp;copy zhangjikai.com 2017&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;modify_label&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;该文件修订时间：&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;modify_format&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;YYYY-MM-DD HH:mm:ss&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="expandable-chapters-small">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#expandable-chapters-small" class="anchor-link" aria-label="expandable-chapters-small">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Expandable-chapters-small&lt;/h4>
&lt;p>使左侧的章节目录可以折叠。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;expandable-chapters-small&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="sectionx">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#sectionx" class="anchor-link" aria-label="sectionx">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Sectionx&lt;/h4>
&lt;p>将页面分块显示，标签的 tag 最好是使用 b 标签，如果使用 h1-h6 可能会和其他插件冲突。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;sectionx&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;sectionx&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tag&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;b&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="ga">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#ga" class="anchor-link" aria-label="ga">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>GA&lt;/h4>
&lt;p>Google 统计。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;ga&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;ga&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;token&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;UA-XXXX-Y&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="3-ba">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#3-ba" class="anchor-link" aria-label="3-ba">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>3-ba&lt;/h4>
&lt;p>百度统计。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;3-ba&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;3-ba&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;token&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;xxxxxxxx&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="donate">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#donate" class="anchor-link" aria-label="donate">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Donate&lt;/h4>
&lt;p>打赏插件。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;donate&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;donate&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;wechat&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite/resource/weixin.png&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;alipay&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite/resource/alipay.png&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;button&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;赏&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;alipayText&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;支付宝打赏&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;wechatText&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;微信打赏&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="local-video">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#local-video" class="anchor-link" aria-label="local-video">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Local Video&lt;/h4>
&lt;p>使用 Video.js 播放本地视频。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;local-video&amp;#34;&lt;/span> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>为了使视频可以自适应，指定视频的 &lt;code>width&lt;/code> 为100%，并设置宽高比为 &lt;code>16:9&lt;/code>，如下面所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">{% raw %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">video&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;my-video&amp;#34;&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;video-js&amp;#34;&lt;/span> &lt;span class="na">controls&lt;/span> &lt;span class="na">preload&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;auto&amp;#34;&lt;/span> &lt;span class="na">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;100%&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="na">poster&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://yourimage.jpg&amp;#34;&lt;/span> &lt;span class="na">data-setup&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;{&amp;#34;aspectRatio&amp;#34;:&amp;#34;16:9&amp;#34;}&amp;#39;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">source&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://yourvideo.mp4&amp;#34;&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#39;video/mp4&amp;#39;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">p&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;vjs-no-js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> To view this video please enable JavaScript, and consider upgrading to a web browser that
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;http://videojs.com/html5-video-support/&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>supports HTML5 video&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">p&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">video&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endraw %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>另外还要再配置下 CSS，即在 &lt;code>website.css&lt;/code> 中加入：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">video-js&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="simple-page-toc">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#simple-page-toc" class="anchor-link" aria-label="simple-page-toc">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Simple-page-toc&lt;/h4>
&lt;p>自动生成本页的目录结构。另外 GitBook 在处理重复的标题时有些问题，所以尽量不适用重复的标题。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span> &lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;simple-page-toc&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;simple-page-toc&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;maxDepth&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;skipFirstH1&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>使用方法: 在需要生成目录的地方加上 &lt;code>&amp;lt;!-- toc --&amp;gt;&lt;/code>。&lt;/p>
&lt;h4 id="anchors">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#anchors" class="anchor-link" aria-label="anchors">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Anchors&lt;/h4>
&lt;p>添加 GitHub 风格的锚点样式。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span> &lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;anchors&amp;#34;&lt;/span> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="anchor-navigation-ex">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#anchor-navigation-ex" class="anchor-link" aria-label="anchor-navigation-ex">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Anchor-navigation-ex&lt;/h4>
&lt;p>添加 TOC 到侧边悬浮导航以及回到顶部按钮。需要注意以下两点：&lt;/p>
&lt;ul>
&lt;li>本插件只会提取 h[1-3] 标签作为悬浮导航&lt;/li>
&lt;li>只有按照以下顺序嵌套才会被提取&lt;/li>
&lt;/ul>
&lt;pre tabindex="0">&lt;code># h1
## h2
### h3
必须要以 h1 开始，直接写 h2 不会被提取
## h2
&lt;/code>&lt;/pre>&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;anchor-navigation-ex&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;anchor-navigation-ex&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;isRewritePageTitle&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;isShowTocTitleIcon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tocLevel1Icon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;fa fa-hand-o-right&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tocLevel2Icon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;fa fa-hand-o-right&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;tocLevel3Icon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;fa fa-hand-o-right&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="edit-link">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#edit-link" class="anchor-link" aria-label="edit-link">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Edit Link&lt;/h4>
&lt;p>如果将 GitBook 的源文件保存到 GitHub 或者其他的仓库上，使用该插件可以链接到当前页的源文件上。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;edit-link&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;edit-link&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;base&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://github.com/USER/REPO/edit/BRANCH&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;label&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;Edit This Page&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="sitemap-general">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#sitemap-general" class="anchor-link" aria-label="sitemap-general">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Sitemap-general&lt;/h4>
&lt;p>生成 sitemap。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;sitemap-general&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;sitemap-general&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;prefix&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;http://gitbook.zhangjikai.com&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="favicon">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#favicon" class="anchor-link" aria-label="favicon">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Favicon&lt;/h4>
&lt;p>更改网站的 favicon.ico。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;favicon&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;favicon&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;shortcut&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;assets/images/favicon.ico&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;bookmark&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;assets/images/favicon.ico&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;appleTouch&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;assets/images/apple-touch-icon.png&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;appleTouchMore&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;120x120&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;assets/images/apple-touch-icon-120x120.png&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;180x180&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;assets/images/apple-touch-icon-180x180.png&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="todo">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#todo" class="anchor-link" aria-label="todo">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Todo&lt;/h4>
&lt;p>添加 Todo 功能。默认的 checkbox 会向右偏移 2em，如果不希望偏移，可以在 &lt;code>website.css&lt;/code> 里加上下面的代码:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">input&lt;/span>&lt;span class="o">[&lt;/span>&lt;span class="nt">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nt">checkbox&lt;/span>&lt;span class="o">]&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;todo&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="terminal">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#terminal" class="anchor-link" aria-label="terminal">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Terminal&lt;/h4>
&lt;p>模拟终端显示，主要用于显示命令以及多行输出，不过写起来有些麻烦。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;terminal&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;terminal&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;copyButtons&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;fade&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;style&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;flat&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>现在支持 6 种标签：&lt;/p>
&lt;ul>
&lt;li>command: Command &amp;quot;executed&amp;quot; in the terminal.&lt;/li>
&lt;li>delimiter: Sequence of characters between the prompt and the command.&lt;/li>
&lt;li>error: Error message.&lt;/li>
&lt;li>path: Directory path shown in the prompt.&lt;/li>
&lt;li>prompt: Prompt of the user.&lt;/li>
&lt;li>warning: Warning message.&lt;/li>
&lt;/ul>
&lt;p>标签的使用格式如下所示：&lt;/p>
&lt;pre tabindex="0">&lt;code>**[&amp;lt;tag_name&amp;gt; 内容]
&lt;/code>&lt;/pre>&lt;p>为了使标签正常工作，需要在代码块的第一行加入&lt;code>**[termial]&lt;/code>标记，下面是一个使用示例：&lt;/p>
&lt;pre tabindex="0">&lt;code>**[terminal]
**[prompt foo@joe]**[path ~]**[delimiter $ ]**[command ./myscript]
Normal output line. Nothing special here...
But...
You can add some colors. What about a warning message?
**[warning [WARNING] The color depends on the theme. Could look normal too]
What about an error message?
**[error [ERROR] This is not the error you are looking for]
&lt;/code>&lt;/pre>&lt;p>terminal 支持下面 5 种样式，如果需要更换样式，在 pluginsConfig 里配置即可。&lt;/p>
&lt;ul>
&lt;li>black: Just that good old black terminal everybody loves.&lt;/li>
&lt;li>classic: Looking for green color font over a black background? This is for you.&lt;/li>
&lt;li>flat: Oh, flat colors. I love flat colors. Everything looks modern with them.&lt;/li>
&lt;li>ubuntu: Admit it or not, but Ubuntu have a good looking terminal.&lt;/li>
&lt;li>white: Make your terminal to blend in with your GitBook.&lt;/li>
&lt;/ul>
&lt;h4 id="copy-code-button">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#copy-code-button" class="anchor-link" aria-label="copy-code-button">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Copy-code-button&lt;/h4>
&lt;p>为代码块添加复制的按钮。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;copy-code-button&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="alerts">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#alerts" class="anchor-link" aria-label="alerts">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Alerts&lt;/h4>
&lt;p>添加不同 alerts 样式的 blockquotes，目前包含 info, warning, danger 和 success 四种样式。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;alerts&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下面是使用示例：&lt;/p>
&lt;pre tabindex="0">&lt;code>Info styling
&amp;gt; **[info] For info**
&amp;gt;
&amp;gt; Use this for infomation messages.
Warning styling
&amp;gt; **[warning] For warning**
&amp;gt;
&amp;gt; Use this for warning messages.
Danger styling
&amp;gt; **[danger] For danger**
&amp;gt;
&amp;gt; Use this for danger messages.
Success styling
&amp;gt; **[success] For info**
&amp;gt;
&amp;gt; Use this for success messages.
&lt;/code>&lt;/pre>&lt;h4 id="klipse">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#klipse" class="anchor-link" aria-label="klipse">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Klipse&lt;/h4>
&lt;p>集成 &lt;a href="https://github.com/viebel/klipse" target="_blank" rel="noopener">Klipse&lt;/a> (online code evaluator)。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;klipse&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>Klipse 目前支持下面的语言：&lt;/p>
&lt;ul>
&lt;li>javascript: evaluation is done with the javascript function eval and pretty printing of the result is done with pretty-format&lt;/li>
&lt;li>clojure[script]: evaluation is done with Self-Hosted Clojurescript&lt;/li>
&lt;li>ruby: evaluation is done with Opal&lt;/li>
&lt;li>C++: evaluation is done with JSCPP&lt;/li>
&lt;li>python: evaluation is done with Skulpt&lt;/li>
&lt;li>scheme: evaluation is done with BiwasScheme&lt;/li>
&lt;li>PHP: evaluation is done with Uniter&lt;/li>
&lt;li>BrainFuck&lt;/li>
&lt;li>JSX&lt;/li>
&lt;li>EcmaScript2017&lt;/li>
&lt;li>Google Charts: See Interactive Business Report with Google Charts.&lt;/li>
&lt;/ul>
&lt;h4 id="versions-select">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#versions-select" class="anchor-link" aria-label="versions-select">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Versions-select&lt;/h4>
&lt;p>添加版本选择的下拉菜单，针对文档有多个版本的情况。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;versions-select&amp;#34;&lt;/span> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;versions&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;options&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;value&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;text&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;v3.2.2&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;value&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite/v2/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;text&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;v2.6.4&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们可以自定义 CSS 来修改 select 的显示样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">versions-select&lt;/span> &lt;span class="nt">select&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#efefef&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="rss">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#rss" class="anchor-link" aria-label="rss">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>RSS&lt;/h4>
&lt;p>添加 RSS 订阅功能。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;plugins&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span> &lt;span class="s2">&amp;#34;rss&amp;#34;&lt;/span> &lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;pluginsConfig&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;rss&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;feed_url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite/rss&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;site_url&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;https://yourwebsite/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;managingEditor&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;webMaster&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;categories&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;~&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="输出与发布">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#输出与发布" class="anchor-link" aria-label="输出与发布">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>输出与发布&lt;/h2>
&lt;p>GitBook 支持多种输出格式，这里主要讲述如何将 GitBook 发布在 GitHub Pages 上。&lt;/p>
&lt;h3 id="输出为静态网页">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#输出为静态网页" class="anchor-link" aria-label="输出为静态网页">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>输出为静态网页&lt;/h3>
&lt;p>你有以下两种方式输出一个静态网站。&lt;/p>
&lt;h4 id="本地预览时自动生成">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#本地预览时自动生成" class="anchor-link" aria-label="本地预览时自动生成">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>本地预览时自动生成&lt;/h4>
&lt;p>当你在自己的电脑上编辑好图书之后，你可以使用 GitBook 的命令行进行本地预览：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ gitbook serve
&lt;/code>&lt;/pre>&lt;p>这里会启动一个端口为 &lt;code>4000&lt;/code> 用于预览的服务器：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ gitbook serve
Press CTRL+C to quit ...
Starting build ...
Successfuly built !
Starting server ...
Serving book on http://localhost:4000
&lt;/code>&lt;/pre>&lt;p>你可以你的浏览器中打开这个网址：&lt;a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000&lt;/a>。&lt;/p>
&lt;p>这里你会发现，你在你的图书项目的目录中多了一个名为 &lt;code>_book&lt;/code> 的文件目录，而这个目录中的文件，即是生成的静态网站内容。&lt;/p>
&lt;h4 id="使用-build-参数生成到指定目录">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#使用-build-参数生成到指定目录" class="anchor-link" aria-label="使用-build-参数生成到指定目录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>使用 build 参数生成到指定目录&lt;/h4>
&lt;p>与直接预览生成的静态网站文件不一样的是，使用这个命令，你可以将内容输入到你所想要的目录中去：&lt;/p>
&lt;pre tabindex="0">&lt;code>$ mkdir /tmp/gitbook
$ gitbook build --output=/tmp/gitbook
Starting build ...
Successfuly built !
$ ls /tmp/gitbook/
LICENSE howtouse manifest.appcache search_index.json
book imgs output
gitbook index.html publish
&lt;/code>&lt;/pre>&lt;h3 id="发布到-github-pages">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#发布到-github-pages" class="anchor-link" aria-label="发布到-github-pages">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>发布到 GitHub Pages&lt;/h3>
&lt;p>将编写好的格式为 &lt;code>.md&lt;/code> 的文件通过 GitBook 处理，然后再发布到 GitHub Gages 上去。上文提到，输出静态网页后会在当前 GitBook 文件夹中生成一个名为 &lt;code>_book&lt;/code> 的文件目录，此文件夹中的所有内容即为你需要发布到 GitHub Pages 上的内容。&lt;/p>
&lt;h4 id="创建仓库与分支">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#创建仓库与分支" class="anchor-link" aria-label="创建仓库与分支">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>创建仓库与分支&lt;/h4>
&lt;ul>
&lt;li>登录到 GitHub，创建一个新的仓库，名称我们就命令为 &lt;code>book&lt;/code>，这样我就就得到了一个 &lt;code>book&lt;/code> 的空仓库。&lt;/li>
&lt;li>克隆仓库到本地：&lt;code>git clone git@github.com:USER_NAME/book.git&lt;/code>。&lt;/li>
&lt;li>创建一个新分支：&lt;code>git checkout -b gh-pages&lt;/code>，注意，分支名必须为 &lt;code>gh-pages&lt;/code>。&lt;/li>
&lt;li>将分支 push 到仓库：&lt;code>git push -u origin gh-pages&lt;/code>。&lt;/li>
&lt;li>切换到主分支: &lt;code>git checkout master&lt;/code>。&lt;/li>
&lt;/ul>
&lt;p>经过这一步处理，我们已经创建好 &lt;code>gh-pages&lt;/code> 分支了，有了这个分支，GitHub会自动为你分配一个访问网址：&lt;/p>
&lt;blockquote>
&lt;p>&lt;a href="http://username.github.io/book" target="_blank" rel="noopener">http://USERNAME.github.io/book&lt;/a>&lt;/p>&lt;/blockquote>
&lt;h4 id="上传文件到分支">&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/#上传文件到分支" class="anchor-link" aria-label="上传文件到分支">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>上传文件到分支&lt;/h4>
&lt;ul>
&lt;li>将 &lt;code>gh-pages&lt;/code> 分支 clone 到本地：&lt;/li>
&lt;/ul>
&lt;pre tabindex="0">&lt;code>git clone -b gh-pages git@github.com:USERNAME/book.git book-end
&lt;/code>&lt;/pre>&lt;ul>
&lt;li>将 &lt;code>_book&lt;/code> 文件夹内容全部复制到 clone 到本地的文件夹 &lt;code>book-end&lt;/code> 中。&lt;/li>
&lt;li>将 &lt;code>book-end&lt;/code> 文件夹 push 到仓库。&lt;/li>
&lt;/ul>
&lt;p>这样，你的一本 GitBook 电子书就诞生了。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/start-using-gitbook/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/start-using-gitbook/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/git/">Git</category><category domain="https://guanqr.com/tags/markdown/">Markdown</category></item><item><title>
赛博朋克：一个独特的科幻世界</title><link>https://guanqr.com/life/ideas/cyberpunk/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/cyberpunk/</guid><pubDate>Tue, 16 Jul 2019 16:17:15 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/cyberpunk2077.jpg" alt="cyberpunk2077.jpg">&lt;span class="caption">※ 游戏《赛博朋克 2077》 基努·里维斯&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>前段时间举办的 E3 2019 发布会上，大型游戏《赛博朋克 2077》发布了最新的游戏宣传视频，在视频的最后，这款游戏的核心人物第一次露出了他的真面目——基努·里维斯！「杀神」的出现将这款游戏的期待程度提升到了一个全新的高度，引发了全球游戏迷、影迷、科幻迷全体的高潮。这款游戏的火爆，让更多的人接触到了「赛博朋克」这一名词。&lt;/p>
&lt;h2 id="何为赛博朋克">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#何为赛博朋克" class="anchor-link" aria-label="何为赛博朋克">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>何为赛博朋克&lt;/h2>
&lt;p>作为一个科幻迷，我看过的科幻小说和科幻电影很多很多，科幻游戏玩的比较少（如果你真的要把「王者荣耀」这类游戏称为科幻游戏那我也无话可说）。我相信大部分人由于工作、学习，很少会静下心来读一本长篇小说，更何况是一本科幻长篇小说。相对于小说，影视类作品称得上是科幻文化推广的一个重要媒介。说到科幻电影，你能想到什么电影名字？&lt;/p>
&lt;p>《阿凡达》、《星际穿越》、《异形》、《黑客帝国》、《银翼杀手》、《攻壳机动队》？&lt;/p>
&lt;p>你认为什么样的科幻电影是赛博朋克题材的电影？&lt;/p>
&lt;p>我们先来看看一些科幻类影视作品中的画面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ghost-in-the-shell.jpg" alt="ghost-in-the-shell.jpg">&lt;span class="caption">※ 电影《攻壳机动队》&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/altered-carbon.jpg" alt="altered-carbon.jpg">&lt;span class="caption">※ 美剧《副本》&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/blade-runner.jpg" alt="blade-runner.jpg">&lt;span class="caption">※ 电影《银翼杀手》&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/blade-runner-2049.jpg" alt="blade-runner-2049.jpg">&lt;span class="caption">※ 电影《银翼杀手 2049》&lt;/span>&lt;/p>
&lt;p>这些城市有什么特点？&lt;/p>
&lt;blockquote>
&lt;p>直入云霄的高楼，肮脏的街道，遍布街头的霓虹灯、中文和日文混杂的标识，全息投影广告，严重的雾霾，永远下不完的雨。&lt;/p>&lt;/blockquote>
&lt;p>当你看到一个作品中出现了以上这些元素，那么这部作品很可能就是我们所说的赛博朋克。当然，这些作品的共同点远远不止这些。&lt;/p>
&lt;p>赛博朋克（Cyberpunk）是「控制论」（Cybernetics）与「朋克」（Punk）的结合词。其背景大都建立于「高等科技与低端生活的结合」，通常拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；其情节经常关于，社会秩序受到政府或财团或暗中势力的高度控制，而角色利用其中的漏洞做出了某种突破。&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造。&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>在赛博朋克的世界中，常见元素有：&lt;/p>
&lt;blockquote>
&lt;p>黑客（Hacker）、信息空间（Cyberspace）、虚拟现实（Virtual reality）、人工智能（Artificial Intelligence）、控制论（Cybernetics）、仿生人（Androids）、半机器人（Cyborg）、都市扩张（Urban Expansion）、贫民窟（Ghetto）、反英雄（Anti-Hero）、大型企业（Mega Enterprise）、基因工程（Genetic Engineering）、生物工程（Bio-engineering）、人类增强（Human Augmentation）、恐怖主义（Terrorism）。&lt;/p>&lt;/blockquote>
&lt;p>这就是为什么很多人在看过《攻壳机动队》后再来看《银翼杀手 2049》，发现二者构建的世界体系很相似的原因。&lt;/p>
&lt;h2 id="赛博朋克的发展">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#赛博朋克的发展" class="anchor-link" aria-label="赛博朋克的发展">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>赛博朋克的发展&lt;/h2>
&lt;p>目前大多数人都认为，美国科幻小说家菲利普·K·迪克（PKD）于 1968 年发表的《机器人会想要电子羊吗?》是「赛博朋克」类科幻小说的鼻祖。但也有人认为，真正的先驱还可以追溯到阿尔弗雷德·贝斯特。这位世界科幻大奖「雨果奖」的首届得主，早在 1956 年就以《基督山伯爵》为蓝本，创作了一部具有赛博朋克风格的科幻小说《群星，我的归宿》。&lt;/p>
&lt;p>无论是《机器人会想要电子羊吗?》，还是《群星，我的归宿》，其实都诞生于冷战阴云笼罩整个世界、中东战争战火纷飞的大背景之下。在那个年代，一方面黑暗压抑，另一方面科学技术迅速发展。矛盾与冲突不断，希望与绝望并存。&lt;/p>
&lt;p>在菲利普·K·狄克去世的 1982 年，《机器人会想要电子羊吗?》被改编成动作科幻电影《银翼杀手》。在这部电影公映的时候，毁誉参半，票房反响平平。对于不喜欢科幻的人来说，现在看这部电影，可能依然会说这是一部烂片。（2017 年上映的那部续集《银翼杀手 2049》，依然是一部毁誉参半的电影，很多人对这部电影过于沉闷，情节发展过于缓慢感到不适，当然，这并不是一部合家欢爆米花式的电影。）然而，它现在被视为历史最悠久的科幻电影之一。&lt;/p>
&lt;p>《神经漫游者》中的未来世界充满了对立：一边是罪犯横行的物质世界，另一边则是光鲜亮丽的赛博空间；穷人们在街头为了生存而抗争，权贵们则可以随意延长自己的寿命；世界的一边老旧残存，而另一边却享受着尖端科技所带来的便利：从眼睛到四肢，从皮肤到整个身体，都可以进行最完美的改造。当然，只要付得起钱，任何人都可以享受。&lt;/p>
&lt;p>从赛博空间到生化改造，从城市景观到衣装时尚……《神经漫游者》几乎一口气确立了赛博朋克的所有关键元素。威廉·吉布森通过这部小说创建了「赛博朋克」的基础骨架，基本定义了「赛博朋克」的基调：&lt;/p>
&lt;blockquote>
&lt;p>近未来的时空，网络空间和虚拟世界无处不在，人工智能和神经科技完全颠覆了整个社会。但现实世界并没有因为科技的发展变得更好，反而人类与科技，人类与自己，各种形形色色的矛盾冲突不断。&lt;/p>&lt;/blockquote>
&lt;p>威廉·吉布森在《神经漫游者》中，基本明确了赛博朋克作为一种科幻风格的边界。他因此被尊奉为「赛博朋克之父」，《神经漫游者》一书也被赞誉为「赛博美学的《圣经》」。这部小说出版后，一举夺得了「雨果奖」、「星云奖」和「菲利普·狄克奖」，成为第一部也是迄今为止唯一一部同时获得三大科幻小说大奖的著作。&lt;/p>
&lt;p>1999 年，一部传奇电影上映了。一个名叫尼奥（Neo）的男子，一个计算机控制的世界。《黑客帝国》系列电影中包含的哲学、宗教、人性等方面是科幻片与文艺结合的极致。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/matrix.jpg" alt="matrix.jpg">&lt;span class="caption">※ 电影《黑客帝国》&lt;/span>&lt;/p>
&lt;p>这部电影在风格上与我在上文所说的传统赛博朋克风格有些不同。没有霓虹灯、没有雾霾与高楼、没有充满未来感的街道。但这样的电影也算是赛博朋克类电影，而且算是一个典范。因为这一系列电影重点突出的是人工智能、黑客与反抗，摒弃了传统上的阴暗颓败风格，用黑色、高亮色和暗绿色打造出一个炫酷的世界。一个控制着人类的「矩阵」，一小群勇于反抗的普通人。&lt;/p>
&lt;p>由《黑客帝国》，我们可以延伸出一个赛博朋克的分支，就是上文所说的，剔除掉一些象征未来科技的表象的东西，重点突出计算机、思维控制与反抗。除了《黑客帝国》，《电子世界争霸战》、《超验骇客》也属于这一类型的电影。在此，我们可以猜测到，游戏出品方为什么让「杀神」基努·里维斯饰演《赛博朋克 2077》中的重要角色。人们一看到他，就能联想到当年由他出演的赛博朋克电影《黑客帝国》，这无疑是对游戏最好的宣传。&lt;/p>
&lt;p>在今年，披着卡梅隆制片外衣，由漫画《铳梦》改编的电影《阿丽塔：战斗天使》上映，人们对这部电影的评价褒贬不一。抛开这部电影在剧情上还是人物设定上的一些问题，在这里单独看一看电影中所描绘的世界。人们带着被改造的义肢义体，上流社会与下层平民阶级分层显著，上等人生活在浮空城「撒冷」，是人们向往的天堂之地，是整个世界的主宰，下等人生活在地表，与从浮空城排泄到地表的垃圾一起生活，肮脏混乱，弱肉强食。人们之间充满摩擦冲突，你的身体可以被摧毁，只要你的大脑还在，你就能活着，生命的无休止延续反而加重了炼狱这种层次感的折磨和锤炼。而主角阿丽塔，就是一个想要挑战神权，挑战「撒冷」统治的人。这就是赛博朋克。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/alita-battle-angel.jpg" alt="alita-battle-angel.jpg">&lt;span class="caption">※ 电影《阿丽塔：战斗天使》&lt;/span>&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>科幻作品，表面上描述的是人们对未来社会发展的想象，实际上还是对现实社会的写照。&lt;/p>
&lt;blockquote>
&lt;p>待人如待鼠，所有对鼠的措施都可以同等地施加给人。闭上眼拒绝思考并不能使这个惨不忍睹的画面消失。&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;/p>&lt;/blockquote>
&lt;p>赛博朋克文学有着强烈的反乌托邦和悲观主义色彩。其中所描绘的政府与大型企业对人们思维与行为的控制，社会腐败与阶级分层，都能在现实社会中找到影子。这是人们对于自身社会发展的一种担忧。当社会秩序崩塌，机器失控，文明也就荡然无存。当科技大幅向前发展，我们的精神发展是否能跟随科技的发展速度。迎接我们的是我们所期待的那种智能化高科技、服务于全人类的社会；还是说，科技带给了社会更大的阶级差异、带来了更多的社会矛盾。这是值得每一个人思考的问题。&lt;/p>
&lt;p>前一段时间在 b 站（Bilibili）看有关《赛博朋克 2077》的宣传视频，好多圈外人都以为赛博朋克指的就是这款游戏。这让我感到很无奈。写这篇文章的目的，也是小小科普一下赛博朋克的知识。对于赛博朋克所刻画的庞大体系，我只是了解到了其冰山一角，可能在一些方面，我的看法有些错误，请谅解。&lt;/p>
&lt;p>在本文的最后，献上那首赛博朋克中最美的诗篇：&lt;/p>
&lt;p>&lt;em>I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser Gate. All those moments will be lost in time. Like tears in rain. Time... to die.&lt;/em>&lt;sup id="fnref:4">&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fn:4" class="footnote-ref" role="doc-noteref">[4]&lt;/a>&lt;/sup>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="https://zh.wikipedia.org/wiki/%E8%B5%9B%E5%8D%9A%E6%9C%8B%E5%85%8B" target="_blank" rel="noopener">赛博朋克 | 维基百科&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>来源：劳仑斯·普尔森&amp;#160;&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>来源：布鲁斯·斯特灵&amp;#160;&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:4">
&lt;p>电影《银翼杀手》结尾复制人 Roy 临死前的独白&amp;#160;&lt;a href="https://guanqr.com/life/ideas/cyberpunk/#fnref:4" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/cyberpunk/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/cyberpunk/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/class-contradiction/">阶级矛盾</category><category domain="https://guanqr.com/tags/cyberpunk/">赛博朋克</category><category domain="https://guanqr.com/tags/sci-fi/">科幻</category></item><item><title>
网络数据监测与分析</title><link>https://guanqr.com/tech/computer/wireshark/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/wireshark/</guid><pubDate>Wed, 10 Jul 2019 00:23:42 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="wireshark-简介">&lt;a href="https://guanqr.com/tech/computer/wireshark/#wireshark-简介" class="anchor-link" aria-label="wireshark-简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:wireshark-简介" class="headings">Wireshark 简介&lt;/a>&lt;/h2>
&lt;p>&lt;a href="https://www.wireshark.org/" target="_blank" rel="noopener">Wireshark&lt;/a> 是一个免费开源的网络数据包分析软件。网络数据包分析软件的功能是截取网络数据包，并尽可能显示出最为详细的网络数据包数据。&lt;/p>
&lt;h3 id="使用目的">&lt;a href="https://guanqr.com/tech/computer/wireshark/#使用目的" class="anchor-link" aria-label="使用目的">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:使用目的" class="headings">使用目的&lt;/a>&lt;/h3>
&lt;ul>
&lt;li>网络管理员使用 Wireshark 来检测网络问题&lt;/li>
&lt;li>网络安全工程师使用 Wireshark 来检查信息安全相关问题&lt;/li>
&lt;li>开发者使用 Wireshark 来为新的通信协议调试&lt;/li>
&lt;li>普通用户使用 Wireshark 来学习网络协议的相关知识&lt;/li>
&lt;/ul>
&lt;h3 id="软件界面">&lt;a href="https://guanqr.com/tech/computer/wireshark/#软件界面" class="anchor-link" aria-label="软件界面">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:软件界面" class="headings">软件界面&lt;/a>&lt;/h3>
&lt;p>建立计算机与网络的连接后，可以看到下图所示界面，主要分为四部分内容：显示过滤器、封包列表、封包详细信息、16 进制数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-main-interface.jpg" alt="wireshark-main-interface.jpg">&lt;span class="caption">※ Wireshark 主界面&lt;/span>&lt;/p>
&lt;p>封包列表中各栏所显示的内容含义如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-packet-list.jpg" alt="wireshark-packet-list.jpg">&lt;span class="caption">※ 封包列表&lt;/span>&lt;/p>
&lt;p>可以发现，一些行文字的底色不同。不同报文采用不同的颜色来区分。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-color-of-message.jpg" alt="wireshark-color-of-message.jpg">&lt;span class="caption">※ 报文颜色&lt;/span>&lt;/p>
&lt;p>在封包相详细信息中，我们可以看到：&lt;/p>
&lt;ul>
&lt;li>Frame：「物理层」数据帧情况。&lt;/li>
&lt;li>Ethernet：「数据链路层」以太网头部信息。&lt;/li>
&lt;li>Internet Protocol Version 4：「网络层」数据包头部信息。&lt;/li>
&lt;li>Transmission Control Protocol：「传输层」数据段头部信息。&lt;/li>
&lt;li>Hypertext Transfer Protocol：「应用层」信息。&lt;/li>
&lt;/ul>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-packet-data.jpg" alt="wireshark-packet-data.jpg">&lt;span class="caption">※ 封包详细信息&lt;/span>&lt;/p>
&lt;p>下面主要讲解使用 Wireshark 对网络层以及传输层的数据分析方法。&lt;/p>
&lt;h2 id="数据分析">&lt;a href="https://guanqr.com/tech/computer/wireshark/#数据分析" class="anchor-link" aria-label="数据分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:数据分析" class="headings">数据分析&lt;/a>&lt;/h2>
&lt;h3 id="网络层">&lt;a href="https://guanqr.com/tech/computer/wireshark/#网络层" class="anchor-link" aria-label="网络层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:网络层" class="headings">网络层&lt;/a>&lt;/h3>
&lt;h4 id="地址解析协议-arp">&lt;a href="https://guanqr.com/tech/computer/wireshark/#地址解析协议-arp" class="anchor-link" aria-label="地址解析协议-arp">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:地址解析协议-arp" class="headings">地址解析协议 ARP&lt;/a>&lt;/h4>
&lt;p>不管网络层使用的是什么协议，在实际网络的链路上传送数据帧时，最终还是必须使用硬件地址。每一个主机都设有一个 ARP 高速缓存，里面有所在的局域网上的各主机和路由器的 IP 地址到硬件地址的映射表。当主机 A 欲向本局域网上的某个主机 B 发送 IP 数据报时，就先在其 ARP 高速缓存中查看有无主机 B 的 IP 地址。如有，就可查出其对应的硬件地址，再将此硬件地址写入 MAC 帧，然后通过局域网将该 MAC 帧发往此硬件地址。&lt;/p>
&lt;p>其简易原理如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-arp-diagram.jpg" alt="wireshark-arp-diagram.jpg">&lt;span class="caption">※ ARP 原理示意图&lt;/span>&lt;/p>
&lt;p>输入ARP进行筛选，得到一组数据包：&lt;/p>
&lt;pre tabindex="0">&lt;code>Who has 10.171.32.1? Tell 10.171.34.11
10.171.32.1 is at 28:6e:d4:44:20:4f
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/wireshark-arp-screen.jpg" alt="wireshark-arp-screen.jpg">&lt;span class="caption">※ ARP 筛选&lt;/span>&lt;/p>
&lt;h5 id="arp-请求">&lt;a href="https://guanqr.com/tech/computer/wireshark/#arp-请求" class="anchor-link" aria-label="arp-请求">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:arp-请求" class="headings">ARP 请求&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-arp-request.jpg" alt="wireshark-arp-request.jpg">&lt;span class="caption">※ ARP 请求内容&lt;/span>&lt;/p>
&lt;h5 id="arp-响应">&lt;a href="https://guanqr.com/tech/computer/wireshark/#arp-响应" class="anchor-link" aria-label="arp-响应">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:arp-响应" class="headings">ARP 响应&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-arp-respond.jpg" alt="wireshark-arp-respond.jpg">&lt;span class="caption">※ ARP 响应内容&lt;/span>&lt;/p>
&lt;h4 id="互联网协议-ipv4">&lt;a href="https://guanqr.com/tech/computer/wireshark/#互联网协议-ipv4" class="anchor-link" aria-label="互联网协议-ipv4">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:互联网协议-ipv4" class="headings">互联网协议 IPv4&lt;/a>&lt;/h4>
&lt;p>以 &lt;a href="https://www.baidu.com" target="_blank" rel="noopener">www.baidu.com&lt;/a> 为例，打开命令行 Ping 百度。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-ping.jpg" alt="wireshark-ping.jpg">&lt;span class="caption">※ Ping&lt;/span>&lt;/p>
&lt;p>在 Wireshark 中，我们可以看到一共抓取了 8 个数据包，与命令行显示的数量一致，分别为双方的请求与应答。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-ipv4-data-packet.jpg" alt="wireshark-ipv4-data-packet.jpg">&lt;span class="caption">※ IPv4 数据包&lt;/span>&lt;/p>
&lt;p>其详细内容如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-ipv4-request.jpg" alt="wireshark-ipv4-request.jpg">&lt;span class="caption">※ IPv4 请求&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-ipv4-respond.jpg" alt="wireshark-ipv4-respond.jpg">&lt;span class="caption">※ IPv4 应答&lt;/span>&lt;/p>
&lt;h3 id="传输层">&lt;a href="https://guanqr.com/tech/computer/wireshark/#传输层" class="anchor-link" aria-label="传输层">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:传输层" class="headings">传输层&lt;/a>&lt;/h3>
&lt;p>以浙大校论坛 CC98为例。打开浏览器，输入网址：www.cc98.org。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-transport-analysis.jpg" alt="wireshark-transport-analysis.jpg">&lt;span class="caption">※ 传输层数据分析&lt;/span>&lt;/p>
&lt;h4 id="tcp-包的具体内容">&lt;a href="https://guanqr.com/tech/computer/wireshark/#tcp-包的具体内容" class="anchor-link" aria-label="tcp-包的具体内容">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:tcp-包的具体内容" class="headings">TCP 包的具体内容&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-data.jpg" alt="wireshark-tcp-data.jpg">&lt;span class="caption">※ TCP 包内容&lt;/span>&lt;/p>
&lt;h4 id="tcp-的三次握手">&lt;a href="https://guanqr.com/tech/computer/wireshark/#tcp-的三次握手" class="anchor-link" aria-label="tcp-的三次握手">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:tcp-的三次握手" class="headings">TCP 的三次握手&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-three-way-handshake.jpg" alt="wireshark-tcp-three-way-handshake.jpg">&lt;span class="caption">※ TCP 三次握手&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-ping-cc98.jpg" alt="wireshark-ping-cc98.jpg">&lt;span class="caption">※ Ping CC98&lt;/span>&lt;/p>
&lt;p>10.10.98.98 为 CC98 的 IP 地址，222.205.87.180 为本地 IP 地址。&lt;/p>
&lt;h5 id="第一次握手">&lt;a href="https://guanqr.com/tech/computer/wireshark/#第一次握手" class="anchor-link" aria-label="第一次握手">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:第一次握手" class="headings">第一次握手&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-first-handshake.jpg" alt="wireshark-tcp-first-handshake.jpg">&lt;span class="caption">※ 第一次握手&lt;/span>&lt;/p>
&lt;p>客户端发送一个 TCP，标志位为 SYN，序列号为 0，客户端请求建立连接。&lt;/p>
&lt;h5 id="第二次握手">&lt;a href="https://guanqr.com/tech/computer/wireshark/#第二次握手" class="anchor-link" aria-label="第二次握手">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:第二次握手" class="headings">第二次握手&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-second-handshake.jpg" alt="wireshark-tcp-second-handshake.jpg">&lt;span class="caption">※ 第二次握手&lt;/span>&lt;/p>
&lt;p>服务器发回确认包，标志位为 SYN，ACK，将确认序号设置为客户的 ISN 加 1。&lt;/p>
&lt;h5 id="第三次握手">&lt;a href="https://guanqr.com/tech/computer/wireshark/#第三次握手" class="anchor-link" aria-label="第三次握手">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:第三次握手" class="headings">第三次握手&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-third-handshake.jpg" alt="wireshark-tcp-third-handshake.jpg">&lt;span class="caption">※ 第三次握手&lt;/span>&lt;/p>
&lt;p>客户端再次发送确认包，SYN 标志位为 0，ACK 标志位为 1，将服务器发来的 ACK 序号字段加 1，放在确定字段中发送给对方。&lt;/p>
&lt;h5 id="报文分析">&lt;a href="https://guanqr.com/tech/computer/wireshark/#报文分析" class="anchor-link" aria-label="报文分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:报文分析" class="headings">报文分析&lt;/a>&lt;/h5>
&lt;p>设置过滤条件：&lt;/p>
&lt;pre tabindex="0">&lt;code>http and ip.addr==10.10.98.98 and tcp.port==80
&lt;/code>&lt;/pre>&lt;p>得到两个数据包，分别为 HTTP 请求和 HTTP 响应。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-http.jpg" alt="wireshark-http.jpg">&lt;span class="caption">※ HTTP 请求与响应&lt;/span>&lt;/p>
&lt;p>打开追踪 TCP 流的详细信息界面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-track-tcp.jpg" alt="wireshark-track-tcp.jpg">&lt;span class="caption">※ 追踪 TCP 流&lt;/span>&lt;/p>
&lt;p>请求报文分析：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-http-request.jpg" alt="wireshark-http-request.jpg">&lt;span class="caption">※ 请求报文&lt;/span>&lt;/p>
&lt;p>响应报文分析：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-http-respond.jpg" alt="wireshark-http-respond.jpg">&lt;span class="caption">※ 响应报文&lt;/span>&lt;/p>
&lt;h4 id="tcp-链接释放">&lt;a href="https://guanqr.com/tech/computer/wireshark/#tcp-链接释放" class="anchor-link" aria-label="tcp-链接释放">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:tcp-链接释放" class="headings">TCP 链接释放&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/wireshark-tcp-link-release.jpg" alt="wireshark-tcp-link-release.jpg">&lt;span class="caption">※ TCP 链接释放&lt;/span>&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/tech/computer/wireshark/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/wireshark/#contents:总结" class="headings">总结&lt;/a>&lt;/h2>
&lt;p>Wireshark 作为一款网络分析工具，功能很强大，当然也有一些不法分子利用这一类的网络分析工具获取接入同一网络的用户的个人信息，入侵你的通信设备。我接触到这个工具是源于本学期上的一门专业选修课程「数据通信与计算机网络」的实验。通过 Wireshark，我对网络通信的知识有了深入的理解，因此我认为 Wireshark 是一个学习计算机网络通信原理的利器。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/wireshark/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/wireshark/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/network/">网络</category><category domain="https://guanqr.com/tags/security/">网络安全</category></item><item><title>
校园卡内部数据结构研究</title><link>https://guanqr.com/tech/computer/zjuidcard-data-structure/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/zjuidcard-data-structure/</guid><pubDate>Thu, 04 Jul 2019 20:09:18 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">考&lt;/span>试周前，我在 CC98 上阅读了一个有关复制校园卡门禁功能的帖子，帖子里有一名学长推荐了学校中的一位技术型博主，在这位博主的&lt;a href="http://qcdn.aploium.com/" target="_blank" rel="noopener">博客&lt;/a>中有两篇讲解校园卡的文章。今天刚刚结束考试周，在这仅有的半天空闲时间里（光电学院长达一个月的小学期，你值得拥有），我终于认真阅读了这位博主的文章，收获颇多。对于校园卡功能的实现，在大二下的春学期，我在物联网相关课程上进行了比较深入的学习，对 RFID（射频识别）有了较为清晰的认识。在实验中也对 RFID 卡进行了一波写入数据设置门禁的操作。&lt;del>其实现在也差不多忘干净了&lt;/del>。&lt;/p>
&lt;h2 id="校园卡内部构造">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-data-structure/#校园卡内部构造" class="anchor-link" aria-label="校园卡内部构造">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>校园卡内部构造&lt;/h2>
&lt;p>我们每天进出宿舍楼，去食堂吃饭，到超市买东西的时候都会用到校园卡，但很少会有人研究校园卡里面到底长什么样子。&lt;/p>
&lt;p>将校园卡放置在强光下，可以看到内部的芯片和线圈。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-internal-circuit.jpg" alt="zjuidcard-internal-circuit.jpg">&lt;span class="caption">※ 校园卡内部线路&lt;/span>&lt;/p>
&lt;p>（说句题外话，我用的这个校园卡还是当年随录取通知书一起寄过来的那一张，从来没丢过，也从来没补办过，校园卡表面的图案层已经刮花，伤痕累累。）&lt;/p>
&lt;h2 id="在机制上目前已知的东西">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-data-structure/#在机制上目前已知的东西" class="anchor-link" aria-label="在机制上目前已知的东西">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>在机制上目前已知的东西&lt;/h2>
&lt;ul>
&lt;li>每次刷卡都一定会连接服务器端确认数据（如是否冻结）。&lt;/li>
&lt;li>卡的密码有两份存储，卡上 [0x96 0x97 0x98] 和服务器端，正常仅读取卡中的密码，仅当补办卡时会对新卡写入服务器端密码。&lt;/li>
&lt;li>金额则有三份存储，卡中一份、服务器端 cache。
&lt;ul>
&lt;li>卡中：在卡消费时被读取和改写，被加密，算法目前无法破解。&lt;/li>
&lt;li>服务器 cache：余额可以在网上被查到，此余额我叫它 cache 是因为它 等于最近一次消费后卡中的金额 。即不管卡中金额是多少，服务器 cache 的金额都会根据卡中的金额被赋值，注意是赋值而不是根据消费/充值额增减。&lt;/li>
&lt;li>服务器对账：每星期四 23:59:59（避免歧义），服务器会重新将上次对账时卡的余额累加上这星期卡的消费/充值，得出一个正确余额，并和服务器 cache 值对比，若两者相差过大（阈值在 15 元左右），则冻结卡。&lt;/li>
&lt;li>从已知的信息来看，不能用校园卡来刷钱。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>门禁、体育打卡机（固定和移动）都不读取卡内数据，而只根据卡 UID 来识别用户。
&lt;ul>
&lt;li>只有 UID 的空卡不能用来付钱和充值。（猜想）若多次试图刷空卡付钱，可能会导致冻结。&lt;/li>
&lt;li>有一种不需要接触卡就能得知卡 UID 的简便方法，为避免滥用，此方法保密。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>每次在 POS 机上付钱时不仅会改变 4 个 [0x80 0x81 0x8C 0x8F] 余额记录字节，也会改变 [0x88 0x89 0x08A] 这三个字节。
&lt;ul>
&lt;li>但是洗澡机上刷卡并不改变后者三个字节。&lt;/li>
&lt;li>（猜想）可能是记录刷卡序号一类的东西，可能和对账有关。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>每个人的卡区块密码都不一样。
&lt;ul>
&lt;li>除了扇区 15 的 KeyA 都为「synpub」的 ASCII 码。但是有人的卡里没有扇区 15。删除自己卡中的扇区 15，卡各种功能都正常。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h2 id="校园卡数据结构表">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-data-structure/#校园卡数据结构表" class="anchor-link" aria-label="校园卡数据结构表">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>校园卡数据结构表&lt;/h2>
&lt;p>感谢原博主对校园卡内部结构研究做出的努力。&lt;/p>
&lt;p>由于校园卡样本数量有限，有一些字段（如记录学园、专业、是否是本科生之类的）无法弄清楚。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-data-structure.png" alt="zjuidcard-data-structure.png">&lt;span class="caption">※ 校园卡数据结构表&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/zjuidcard-data-structure/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/zjuidcard-data-structure/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/idcard/">IDcard</category><category domain="https://guanqr.com/tags/rfid/">RFID</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
使用 Excel 对校园卡流水对账</title><link>https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/</guid><pubDate>Sun, 30 Jun 2019 09:11:32 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>近日看到很多同学都在对校园卡未消费却一直在扣费的问题感到困惑和愤怒。以下评论搬运自 CC98。&lt;/p>
&lt;p>同学甲：&lt;/p>
&lt;blockquote>
&lt;p>前两天，连续两次扣我 30 元，只剩下 5 元的时候，打算充钱，结果一刷卡，发现 5 元都被扣了。昨天余额 82 元多，查流水的时候消费信息全部消失。今天晚上回来的晚，刷卡就剩下零点几毛了。我只想说一句，有人能不能告诉我我的钱到底欠多少，可以把钱像电费一样的在宿舍贴出来不行吗？什么样的脑袋想出来这种破办法，P 事办不好。在未经允许的情况下，没有公告的情况下，你们是在正大光明的盗窃啊。我怎么分辨是有系统在扣费还是有人在冒刷我的卡？&lt;/p>&lt;/blockquote>
&lt;p>同学乙：&lt;/p>
&lt;blockquote>
&lt;p>请停止这种愚蠢的行为，而且请你们出面给一个说法，否则我会在 98 上号召集体投诉。那个时候希望有人站出来承担责任。&lt;/p>&lt;/blockquote>
&lt;p>同学丙：&lt;/p>
&lt;blockquote>
&lt;p>我昨天晚上吃完饭卡里还有 19 元多，今天中午就直接没了，重新充了 100，变成了 98 元多（此时已经被冒办了，扣了 20 元手续费），当时还在奇怪明明还有钱以及正常情况下为什么会欠费，下午洗澡的时候我的卡完全刷不出，用支付宝一查只有 88 了！说明被别人补办盗刷了！&lt;/p>&lt;/blockquote>
&lt;p>对于这件事，学校官方的回复是：&lt;/p>
&lt;blockquote>
&lt;p>各师生用户：&lt;br>
6 月 26 日，陆续有同学反映，校园卡消费流水清单的金额有异，质疑是否扣除有误。&lt;br>
经查，因紫金港校区东区水控服务器曾发生故障，致最近三个月的洗澡流水未正常上传至校园卡系统。6 月 25 日我们重新上传了相应流水数据，并对以往消费产生的金额进行补扣。补扣只在余额充足情况下进行，预计陆续补扣工作至 7 月 2 日结束。请大家保证校园卡里余额充足，以保证日常消费。&lt;br>
现已查明，补扣不会多扣或错扣消费金额，请大家放心。大家可通过&lt;a href="http://ecardhall.zju.edu.cn:808" target="_blank" rel="noopener">校园卡服务平台&lt;/a>、校园卡 APP 查询流水，我们正加紧对自助一体机查询异常问题进行检修。&lt;br>
因未预计到补扣会对消费流水清单产生影响，未及时发布通知。给大家带来不便，敬请谅解。我们今后处理类似问题会更谨慎应对。&lt;/p>&lt;/blockquote>
&lt;p>说白了，校园宝和校园卡中心的后台数据库似乎是不一样的。3 月份至 5 月份的水费有的只是「生成」了还没有「入账」，这一次是统一入账。虽然说扣的费用好像并没有错，但这件事依然给同学们带来了不少麻烦。毕竟大部分人都是「月光」，本来卡里的钱正好能支撑到月末，这一次扣费，钱可能就不够花了。&lt;/p>
&lt;p>我看了我的校园卡流水记录，似乎并没有这样的事情发生。毕竟这两年都住在云峰学园，寝室里有独卫，不存在刷卡用水这一操作。这件事本来与我无关了，但毕竟这个暑假要换校区了，谁能预测以后会不会发生呢？今天看到有人在 CC98 上分享了一个使用 Excel 查看校园卡流水记录的教程，便跟着帖子实际操作了一下，发现确实是一个不错的办法。没有涉及到写程序爬数据，小白都能自己完成。&lt;/p>
&lt;h2 id="获取数据">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/#获取数据" class="anchor-link" aria-label="获取数据">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>获取数据&lt;/h2>
&lt;p>登录&lt;a href="http://ecardhall.zju.edu.cn:808/" target="_blank" rel="noopener">校园卡服务平台&lt;/a>，进入个人主页，点击左侧栏的「流水信息」，进入流水信息查询页面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-trading-inquiry-0.jpg" alt="zjuidcard-trading-inquiry-0.jpg">&lt;span class="caption">※ 流水信息查询界面&lt;/span>&lt;/p>
&lt;p>将查询日期开始时间选在你入学前，结束时间选今天即可。点击查询，即可查询到你从入学到现在的所有消费和充值记录。那么现在出现了一个问题，默认分页是每页 15 条的，最大也只能 100 条每页，怎么快速获取所有数据呢？&lt;/p>
&lt;p>首先，对分页这里单击右键，点击检查。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-trading-inquiry-1.jpg" alt="zjuidcard-trading-inquiry-1.jpg">&lt;span class="caption">※ 审查元素&lt;/span>&lt;/p>
&lt;p>然后点开图中所示的 &lt;code>select&lt;/code>，双击这里的 &lt;code>100&lt;/code> 修改其中为 &lt;code>10000&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-trading-inquiry-2.jpg" alt="zjuidcard-trading-inquiry-2.jpg">&lt;span class="caption">※ 更改元素&lt;/span>&lt;/p>
&lt;p>更改完毕后，不要刷新网页，再次选择分页，可以看到最后一项变为 &lt;code>10000&lt;/code>，选择即可，现在你的校园卡流水记录就完整显示在同一页面上，不用翻页查询了。我觉得一个人在学校使用校园卡消费的次数不可能达到 10000 次吧。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-trading-inquiry-3.jpg" alt="zjuidcard-trading-inquiry-3.jpg">&lt;span class="caption">※ 选择显示数目&lt;/span>&lt;/p>
&lt;h2 id="复制到-excel">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/#复制到-excel" class="anchor-link" aria-label="复制到-excel">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>复制到 Excel&lt;/h2>
&lt;p>从第一行的时间开始选中 一直拖到最后一行的卡余额后，用 Ctrl+C 进行复制。选中一部分后，鼠标就可以松开了，然后直接拖到滚动条到末尾，这时候按住 Shift 再去点击最后一行，即可全选数据。然后新建一个 Excel 文件，把数据粘贴进去就行了。&lt;/p>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>在复制网页表格中的数据的时候，不能将表格左边的编号复制。亲测，如果复制了编号，在 Excel 当中就只显示了编号，实际数据并没有复制进来。&lt;/p>&lt;/div>
&lt;h2 id="数据筛选">&lt;a href="https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/#数据筛选" class="anchor-link" aria-label="数据筛选">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>数据筛选&lt;/h2>
&lt;p>在 Excel 中，直接选中交易金额那一列，Excel 右下角会给你显示「求和：」的结果，这个值就应该与当前余额相等。&lt;/p>
&lt;p>在实际操作时，发现有一类交易不会修改余额，所以需要用筛选去掉「交易取消/冲正」。在第一行建立筛选，&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/zjuidcard-trading-inquiry-4.jpg" alt="zjuidcard-trading-inquiry-4.jpg">&lt;span class="caption">※ 筛选数据&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/zjuidcard-trading-inquiry/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/idcard/">IDcard</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
尝鲜：微软新版 Edge 浏览器</title><link>https://guanqr.com/tech/computer/chromium-edge/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/chromium-edge/</guid><pubDate>Tue, 25 Jun 2019 19:19:16 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/microsoft-edge.png" alt="microsoft-edge.png">&lt;span class="caption">※ Microsoft Edge&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">在&lt;/span>今年 4 月份，微软发布了基于 Chromium 的新版 Edge 浏览器。其中包含三个开发分支，分别是每六周更新的 Beta 版本（Beta Channel），每周更新的开发者版本（Dev Channel）以及每日更新的「金丝雀」版本（Canary Channel）。作为一个喜欢第一时间感受新鲜事物的人，我在第一时间下载安装了这一版本（Dev Channel）的浏览器，使用一次过后便觉得比原版 Edge 浏览器的使用体验要好很多。我发现到目前为止，还有很多人仍然不知道这一款浏览器的存在。在这篇文章中，我主要谈一谈新版 Edge 浏览器的特点，希望各位读者也能尝试使用一下这一款浏览器。&lt;/p>
&lt;h2 id="你在使用哪一款浏览器">&lt;a href="https://guanqr.com/tech/computer/chromium-edge/#你在使用哪一款浏览器" class="anchor-link" aria-label="你在使用哪一款浏览器">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>你在使用哪一款浏览器？&lt;/h2>
&lt;p>在我们浏览网页的过程当中，必不可少的一个环节就是打开浏览器，进行&lt;del>百度&lt;/del>谷歌搜索。在上课的时候，或者是在自习教室，我经常看到部分同学在使用 360 浏览器，或是腾讯 QQ 浏览器，亦或是其他各式各样的「国产」浏览器。在学习计算机课程以及进行网上答题的时候，老师们多多少少都会嘱咐大家，「请使用谷歌浏览器或者是火狐浏览器」，这是为什么呢？&lt;/p>
&lt;p>我相信大家使用的第一款浏览器都是 Windows 系统捆绑的 IE（Internet Explorer）浏览器。由于是和 Windows 系统捆绑在一起的浏览器，其在浏览器市场获取到了主导地位。后来因为IE浏览器的速度太慢太慢，被越来越多的人吐槽，人们就开始使用别的浏览器来替代它。目前使用最多的浏览器是谷歌的 Chrome 浏览器。其优点太多太多，在我看来，唯一的缺点就是使用国内网络无法登陆账户进行数据同步，这里不再过多讲述其中的原因。&lt;/p>
&lt;p>当然，回顾我使用过的浏览器，在淘汰 IE 浏览器后，我在家中的台式机一直使用的是 360 浏览器，因为台式机的杀毒软件使用的是 360 的，顺便就使用了它的浏览器。毕竟同一家的产品兼容性和安全性比较好（当时我年少无知，惭愧惭愧）。在 Windows 10 中，微软使用 Edge 浏览器替代了自家原来的 IE 浏览器，但由于大部分人都对微软的 IE 浏览器有非常不好的印象，使用 Edge 的人也很少。大一，我拥有了我人生中的第一个笔记本电脑（ThinkPad T470P）。在了解到 360 的各种流氓监视行为后，果断卸载了一切国产浏览器和电脑管家，加入了火狐的队伍。在使用火狐还是谷歌浏览器的问题上，我也是思考了很久，二者都有强大的插件功能，都有丰富的个性化设置。谷歌 Chrome 浏览器的速度比火狐更快一些。但作为一个有轻度强迫症的人，在没有学会科学上网这一技能时，无法登陆谷歌账户同步个人信息，导致 Chrome 浏览器右上角的头像一直是灰色的，令人异常难受，所以只好使用火狐浏览器。当然，自从我去年暑假自搭梯子实现科学上网后，使用的便是 Chrome 浏览器，不得不服这一款浏览器的运行速度。&lt;/p>
&lt;p>在我看来，目前各式各样的国产浏览器都称得上是流氓。这些浏览器都是基于谷歌 Chromium 的内核，却在其上添加了花里胡哨的东西。锁定主页，什么网址大全，还有监视你的浏览内容等等行为让人觉得反感。如果你使用过火狐或者 Chrome，便再也不想使用这些国产浏览器了。&lt;/p>
&lt;h2 id="新版-edge-有什么特色">&lt;a href="https://guanqr.com/tech/computer/chromium-edge/#新版-edge-有什么特色" class="anchor-link" aria-label="新版-edge-有什么特色">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>新版 Edge 有什么特色？&lt;/h2>
&lt;p>在这里，可能有人会问，你说了这么多，都是夸谷歌 Chrome 浏览器有多么好，那我们就用 Chrome 就行了，Edge 有什么能和它比的吗？&lt;/p>
&lt;p>我们先来看一看打开新版 Edge 浏览器后有什么内容显示出来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/edge-new-tab.png" alt="edge-new-tab.png">&lt;span class="caption">※ New Tab&lt;/span>&lt;/p>
&lt;p>我们可以看到，新版 Edge 浏览器的默认主题为暗色系主题。作为一个热衷于暗色系主题的人来说，这再好不过了。在新建标签卡界面，不像 Chrome 或是火狐浏览器是一个「白板」，而是自带搜索框和快捷链接，背景还带有优美的风景图。经常使用 Bing 搜索的用户一定十分熟悉这种每日一更的风景图。这一部分内容可以自定义，你可以选择是否显示风景图。在点击屏幕下方的「Personalized news &amp;amp; more」后，我们可以浏览一些新闻网站的新闻报道。在这里，本人强烈推荐使用英文版本的 Edge 浏览器，因为英文版本推送的新闻是英文媒体报道的国际新闻。当你选择使用中文时，推荐的新闻大部分是来自「东方头条」的垃圾新闻，毫无价值。&lt;/p>
&lt;p>在你安装完毕后，如果你计算机中使用的是 Chrome 浏览器，Edge 会自动同步你的 Google 账户，并将你的收藏夹等个人设置整合到 Edge 浏览器当中，十分方便。新版 Edge 浏览器也支持网页的翻译，可以将网页使用的语言翻译成你设定的语言。一这功能在 Chrome 中已经实现。&lt;/p>
&lt;p>除此之外，新版 Edge 浏览器还支持「阅读视图」。如下图所示，可以将你浏览的网页转化为类似纸张的淡黄色页面，文本部分宽度变窄，网页各部分布局也发生了变化，排版当然没有原本的网页视图好，但这也是不错的一个创新点。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/edge-reading-view.png" alt="edge-reading-view.png">&lt;span class="caption">※ Reading View&lt;/span>&lt;/p>
&lt;p>和 Chrome 浏览器一样，新版 Edge 浏览器同样支持插件的使用。你可以从 Microsoft Edge Insider Addons 中选择需要的插件安装。不过由于刚刚进行开发测试，能够使用的插件数量较少，不过像屏蔽广告这样的基本插件还是有的。&lt;/p>
&lt;p>由于新版 Edge 浏览器的内核为 Chromium，其界面大致与谷歌 Chrome 相同，只不过上方搜寻引擎是微软的 Bing 搜索。鉴于国内网络原因，谷歌搜索引擎无法使用，其最好的替代品就是 Bing 搜索。&lt;/p>
&lt;h2 id="下载与安装">&lt;a href="https://guanqr.com/tech/computer/chromium-edge/#下载与安装" class="anchor-link" aria-label="下载与安装">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>下载与安装&lt;/h2>
&lt;p>进入&lt;a href="https://www.microsoftedgeinsider.com/en-us/download/" target="_blank" rel="noopener">官网&lt;/a>，挑选你需要的版本进行下载安装即可。目前新版 Edge 浏览器默认安装在系统盘 C 盘中，无法更改安装路径。&lt;/p>
&lt;p>在刚刚发布新版 Edge 浏览器的时候，这一款浏览器还不支持设置成中文版本，目前新版本已经支持中文。在设置中添加语言设置，添加中文简体文字包即可。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/chromium-edge/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/chromium-edge/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/chrome/">Chrome</category><category domain="https://guanqr.com/tags/google/">Google</category><category domain="https://guanqr.com/tags/microsoft/">微软</category></item><item><title>
初识成像系统的像质评价</title><link>https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/</guid><pubDate>Mon, 17 Jun 2019 01:11:55 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/24-color-checker.jpg" alt="24-color-checker.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">随&lt;/span>着数码相机的普及，人们已经不满足停留在仅仅会拍照的阶段，考虑更多的是如何选择一个好的相机，拍更好的照片。如何客观、公正、准确的评价数码相机的成像质量？用拍摄所得图片的质量进行评价，是一个有效的方法。本文记录的是我第一次尝试使用 Imatest 软件进行像质分析的过程，在这一过程中出现了部分操作上的错误，尽管数据结果不太准确，但作为一个初学者，对像质评价有了深入的认识。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:前言" class="headings">前言&lt;/a>&lt;/h2>
&lt;p>根据对图像质量评价的长期研究，一般认为，以下因素对光学系统的成像质量有显著影响：镜头分辨能力、图像照度/色彩均匀性、畸变、色差、炫光鬼影等。而对于图像处理系统，还包括动态范围、色彩还原性、细节还原性、感光度、噪声等因素的影响。此外，闪光灯、对焦性能、防抖模式以及内嵌图像处理算法等均可对成像质量造成影响。&lt;/p>
&lt;p>在各种因素中，放在第一位的还是清晰度和分辨能力的测试。拍摄实物(文字、建筑、风景、人像) 的方法去评价或比较不同镜头的成像质量，所得到的结果，往往是分辨率和明锐度的综合视觉感受。为了能对其进行准确评价，人们研究了许多种检验方法，例如：鉴别率检验、星点检验和点列图法等。但这些检验方法都有不同的适用范围和局限性。1938 年，德国人弗里塞对鉴别率法进行了改进，提出用亮度呈正弦分布的分划板来检验光学系统，并且证实了这种鉴别率板经照相系统成像后像的亮度分布仍然是同频率的正弦分布，只是振幅受到了削弱。1946 年法国科学家 P. M. Duffheux 正式出版了一本阐述傅立叶方法在光学中的应用的书，并首次提出传递函数的概念，从此开拓了像质评价的新领域。&lt;/p>
&lt;p>光学传递函数理论是在傅里叶分析理论的基础上发展起来的&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。对于一个线性或可以近似看作线性的成像光学系统，当一个点光源在物方移动时，如果点光源的像只改变位置，而不改变函数形式，则称此成像系统是空间不变的。一般的光学系统成像总是可以认为满足线性条件和空间不变性条件的。这个系统对脉冲响应的傅立叶变换即是空间频率的光学传递函数（Optical Transfer Function，OTF）。对于相干与非相干照明下的衍射受限系统，可以分别给出它们的本征函数，把输入信息分解为由这些本征函数构成的频率分量，也就是说，光学传递函数把物体看作是由各种频率的谱组成的，进而把物体的光场分布函数展开成傅里叶级数（物函数为周期函数）或傅里叶积分（物函数为非周期函数）的形式，并考察每个空间频率分量经过系统后的振幅衰减和相位移动情况，可以得出系统的空间频率特性。因此，光学传递函数反映了光学系统的频率特性，它既与光学系统的像差有关，又与系统的衍射效果有关，并且以一个函数的形式定量地表示星点所提供的大量像质信息，同时也包括了鉴别率所表示的像质信息。因此，光学传递函数被公认为目前评价光学系统成像质量比较客观、有效的方法。对于一个给定的光学系统而言，输入图像信息经过光学系统后，输出的图像信息取决于光学系统的传递特性。&lt;/p>
&lt;p>光学系统的光学传递函数，由调制传递函数（Modulation Transfer Function，MTF）和相位传递函数两部分组成，前者是光学传递函数的模，后者是光学传递函数的相位部分。但由于目前测试相位传递函数的仪器种类较少，测量精度也不高，且相位传递过程对图像的影响较小，所以目前在研究摄影镜头的成像质量时都不考虑相位的影响，只研究调制传递函数。它是光学系统的性能的主要评价指标之一，它表达了光学系统重新分配光能的特性，所以通常光学系统的 MTF 值小于 1。MTF 的值越大，光能的改变程度越小，光学系统的性能越好。&lt;/p>
&lt;h2 id="mtf-的测量方法">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#mtf-的测量方法" class="anchor-link" aria-label="mtf-的测量方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:mtf-的测量方法" class="headings">MTF 的测量方法&lt;/a>&lt;/h2>
&lt;p>点扩散函数（PSF），线扩散函数（LSF）和边缘扩散函数（ESF）是与 MTF 密切相关的几个重要概念。常用的 MTF 测试方法正是基于这几个函数之间的关系进行计算的。&lt;/p>
&lt;p>一个理想的点光源可以看成在 $x$ 和 $y$ 方向上无限小的一个物体，用二维脉冲函数 $\delta(x,y)$ 来表示。理想的点光源经过光学系统后，由于衍射的限制，所成的像不再是一个理想的点，而是模糊了的弥散斑，这个弥散斑称为星点像。星点像的光强分布是点扩散函数 PSF$(x,y)$。假设图像接收器是连续采样，即不用考虑有限大小的像素或有限的采样距离，则接收到的二维的图像强度分布就等于点扩散函数 PSF$(x,y)$。由光学传递函数的定义可知，MTF 可以通过对 PSF$(x,y)$ 进行二维傅立叶变换得到，即：&lt;/p>
&lt;div>
$$
OTF(U,V)=\iint_{-\infty}^{+\infty}e^{-i\pi(xu+yv)}dxdy
$$
&lt;/div>
&lt;p>在实际应用中，由于点光源提供的能量较弱，而且得到理想的点光源比较困难，进行二维光学传递函数计算较为繁琐，所以很少应用。常用的方法是利用狭缝像代替星点像，从而获得线扩散函数及其一维方向上的光学传递函数。设光源沿 $y$ 方向延伸形成一维光源，其上各发光点不相干，则狭缝目标物可以表示为 $\delta(x)l(y)$。像平面的图像强度分布是一个与狭缝目标物一样只与 $x$ 空间变量相关的函数，可以用线扩散函数 LSF$(x)$ 来表示。由傅立叶变换的卷积定理可以得到一维光学传递函数：&lt;/p>
&lt;div>
$$
OTF(u)=\int_{-\infty}^{+\infty}LSF(x)e^{-i2\pi ux}dx
$$
&lt;/div>
&lt;p>对于满足线性空间不变性的光学系统，采用刃边作为目标物对系统成像，则其二维像光强分布就是边缘扩散函数 ESF，等价于电子系统中的阶跃响应 $step(x)l(y)$。边缘扩散函数 ESF 可以理解成线扩散函数 LSF 的累加，其关系表示如下：&lt;/p>
&lt;div>
$$
ESF(x)=\int_{-\infty}^{x}LSF(x')dx'
$$
&lt;/div>
&lt;p>要从 ESF 获得 MTF，必须先对 ESF 求导得到 LSF，然后由 LSF 经过傅立叶变换得到 MTF。我们可以将 PSF、LSF、ESF 和 MTF 四者之间的关系用下图来概括。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/psf-lsf-esf-mtf.png" alt="psf-lsf-esf-mtf.png">&lt;span class="caption">※ PSF、LSF、ESF 和 MTF 之间的转换关系&lt;/span>&lt;/p>
&lt;p>此外，还有一种不经过傅里叶变换获得 MTF 的测量方法，是对方波靶标成像，从图像的对比度可以直接得到对应空间频率处的 MTF，即 (最大亮度－最小亮度)/(最大亮度＋最小亮度)，通过对一块包含了一组不同空间频率的标板成像即可得到不同空间频率下的 MTF 数值。为了比较全面地评价像质，应当测量出高、中、低不同频率下的 MTF。朗奇变频光栅就是这样包含不同空间频率的矩形光栅。&lt;/p>
&lt;p>在我这一次的使用中，采用斜边法，对标准分辨率测试卡 ISO 12233 上的斜边图像进行拍摄，然后通过 Imatest 软件进行图像分析，其过程是通过图像处理获得 ESF 曲线与 LSF 曲线，进而获得 MTF 曲线。&lt;/p>
&lt;h2 id="色彩还原性测试原理">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#色彩还原性测试原理" class="anchor-link" aria-label="色彩还原性测试原理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:色彩还原性测试原理" class="headings">色彩还原性测试原理&lt;/a>&lt;/h2>
&lt;p>色彩还原评价主要用到标准 24 色色卡，将 24 色测试卡在标准灯箱内与水平方向成 45 度放置，打开光源，使成像系统垂直正对测试卡进行拍摄。经过软件分析，计算得到的图像的颜色参数，并与 24 色色卡标准值进行比对，从而可以计算彩度差和色差。由以上的参数可以评价待测成像系统色彩还原能力。&lt;/p>
&lt;p>白平衡计算主要是看 24 色卡最后一排灰度色块的值。通过计算 RGB 中的最大值与最小值之差，可以得到图像 RGB 的偏差值，并能分析测得的图像是偏向哪个颜色。&lt;/p>
&lt;p>色彩还原部分软件计算时，用到 24 色卡所有色块，将 RGB 系统转化为 CIE Lab 系统，并通过 CIE Lab 系统来计算彩度差和色差。其具体算法为：&lt;/p>
&lt;p>明度差：&lt;/p>
&lt;div>
$$
\Delta L^*=L_1^*-L_2^*
$$
&lt;/div>
&lt;p>色度差：&lt;/p>
&lt;div>
$$
\begin{aligned}
\Delta a^*&amp;=a_1^*-a_2^*\\
\Delta b^*&amp;=b_1^*-b_2^*
\end{aligned}
$$
&lt;/div>
&lt;p>色差：&lt;/p>
&lt;div>
$$
\Delta E^*=(\Delta {L^*}^2+\Delta {a^*}^2+\Delta b^2)^{1/2}
$$
&lt;/div>
&lt;p>彩度差：&lt;/p>
&lt;div>
$$
\Delta C^*=(\Delta {a^*}^2+\Delta b^2)^{1/2}
$$
&lt;/div>
&lt;p>由上可以得到各色块的色差和彩度差参数，将 24 色平均，即可得到色彩评价相关参数。&lt;/p>
&lt;p>白平衡测试用到 24 色卡最下面一排 6 个灰度色块，再由下式得到 6 个白平衡误差值：&lt;/p>
&lt;div>
$$
\mathrm{White\ Error}=Max(R,G,B)-Min(R,G,B)
$$
&lt;/div>
&lt;h2 id="灰阶测试原理">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#灰阶测试原理" class="anchor-link" aria-label="灰阶测试原理">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:灰阶测试原理" class="headings">灰阶测试原理&lt;/a>&lt;/h2>
&lt;p>灰阶，是将最亮与最暗之间的亮度变化，区分为若干份。以便于进行信号输入相对应的影像亮度控制。每张数字影像都是由许多点所组合而成的，这些点又称为像素（pixels），通常每一个像素可以呈现出许多不同的颜色，它是由红、绿、蓝（RGB）三个子像素组成的。 每一个子像素，其背后的光源都可以显现出不同的亮度级别。而灰阶代表了由最暗到最亮之间不同亮度的层次级别。这中间层级越多，所能够呈现的画面效果也就越细腻。以 8 bit panel 为例，能表现 2 的 8 次方，等于 256 个亮度层次，我们就称之为 256 灰阶。LCD 屏幕上每个像素，均由不同亮度层次的红、绿、蓝组合起来，最终形成不同的色彩点。也就是说，屏幕上每一个点的色彩变化，其实都是由构成这个点的三个 RGB 子像素的灰阶变化所带来的。&lt;/p>
&lt;p>灰阶测试是通过拍摄灰阶测试卡，得到可识别的灰阶数，从而体现成像系统的动态范围能力。将灰阶测试卡在标准灯箱内 D65 光源下与水平方向成 45 度放置，成像系统垂直正对灰阶测试卡进行拍摄，注意要调整光圈大小以避免最左端白色色块过曝。将拍摄图像输入电脑中，在每个灰度条中截取面积不小于 30% 的灰度块，读出所截取的每个灰度块的灰度值，若两相邻灰阶之间的灰度值之差大于等于 0.7（参考 Imatest 参数），则认为这两个灰阶是可以分辨的，从而可以得到从黑到白可分辨的灰阶的级数。饱和度可以由下式得到：&lt;/p>
&lt;div>
$$
Saturation=\frac{MaxGrey-MinGrey}{255}\times100
$$
&lt;/div>
&lt;p>其中 MaxGrey 是得到的灰阶测试图像中最大的灰度参数，MinGrey 是得到的灰阶测试图像中最小的灰度参数，饱和度粗略地反映了成像系统的动态范围大小。&lt;/p>
&lt;h2 id="具体操作">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#具体操作" class="anchor-link" aria-label="具体操作">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:具体操作" class="headings">具体操作&lt;/a>&lt;/h2>
&lt;h3 id="下载-imatest-软件">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#下载-imatest-软件" class="anchor-link" aria-label="下载-imatest-软件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:下载-imatest-软件" class="headings">下载 Imatest 软件&lt;/a>&lt;/h3>
&lt;p>喜欢摄影的人经常使用 Adobe 的 LightRoom 来处理拍摄的图像，我们也可以用一种更加彻底、数据化的办法——利用 MATLAB 直接处理数码相机的 CFA（Color Filter Array）数据。在这里推荐一篇我们学院学长所写的&lt;a href="https://ridiqulous.com/process-raw-data-using-matlab-and-dcraw/" target="_blank" rel="noopener">文章&lt;/a>，专门讲解的是如何利用 MATLAB 和 Dcraw 处理数码相机 RAW 文件（我也根据这篇文章进行了&lt;a href="https://guanqr.com/tech/optics/process-raw-data-using-matlab-and-dcraw/">实际的操作&lt;/a>，对图像处理的原理有了深入的理解）。&lt;/p>
&lt;p>Imatest 是一款基于 MATLAB 的图像分析软件，功能十分强大。但巨坑的是这一款软件的试用版只能使用 20 次。这里的二十次不是说能够试用二十天，也不是打开关闭软件二十次，是分析图像二十次！如此巨坑的软件，在我安装后没有怎么用，并尝试了一下破解结果失败后，试用次数直接减到零次，差点吐血。后来为了完成此次实验，只好借用室友的电脑。&lt;/p>
&lt;p>Imatest 的具体使用方法可以参考&lt;a href="http://www.imatest.com/docs/" target="_blank" rel="noopener">官方使用文档&lt;/a>。&lt;/p>
&lt;h3 id="拍摄图片">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#拍摄图片" class="anchor-link" aria-label="拍摄图片">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:拍摄图片" class="headings">拍摄图片&lt;/a>&lt;/h3>
&lt;p>这里我使用的相机是 Canon EOS 1100D。&lt;/p>
&lt;h4 id="拍摄-iso12233-标准分别率板">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#拍摄-iso12233-标准分别率板" class="anchor-link" aria-label="拍摄-iso12233-标准分别率板">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:拍摄-iso12233-标准分别率板" class="headings">拍摄 ISO12233 标准分别率板&lt;/a>&lt;/h4>
&lt;p>分别使用焦距为 50mm，18mm，75mm 的三种镜头拍摄，画面比例为 3:2。拍摄的图像如下所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0479-CR2-f50.jpg" alt="IMG-0479-CR2-f50.jpg">&lt;span class="caption">※ IMG_0479.CR2&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0482-CR2-f18.jpg" alt="IMG-0482-CR2-f18.jpg">&lt;span class="caption">※ IMG_0482.CR2&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0483-CR2-f75.jpg" alt="IMG-0483-CR2-f75.jpg">&lt;span class="caption">※ IMG_0483.CR2&lt;/span>&lt;/p>
&lt;h4 id="拍摄-x-rite-标准-24-色色卡">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#拍摄-x-rite-标准-24-色色卡" class="anchor-link" aria-label="拍摄-x-rite-标准-24-色色卡">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:拍摄-x-rite-标准-24-色色卡" class="headings">拍摄 X-rite 标准 24 色色卡&lt;/a>&lt;/h4>
&lt;p>在 SPL-QC 反射式灯箱中进行拍摄，分别采用 A 光源，D65 光源，TL84 光源进行拍摄。拍摄的图像如下所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0487-CR2-light-a.jpg" alt="IMG-0487-CR2-light-a.jpg">&lt;span class="caption">※ IMG_0487.CR2&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0488-CR2-light-d65.jpg" alt="IMG-0488-CR2-light-d65.jpg">&lt;span class="caption">※ IMG_0488.CR2&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0489-CR2-light-tl84.jpg" alt="IMG-0489-CR2-light-tl84.jpg">&lt;span class="caption">※ IMG_0489.CR2&lt;/span>&lt;/p>
&lt;h4 id="拍摄灰阶测试卡">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#拍摄灰阶测试卡" class="anchor-link" aria-label="拍摄灰阶测试卡">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:拍摄灰阶测试卡" class="headings">拍摄灰阶测试卡&lt;/a>&lt;/h4>
&lt;p>这里拍摄了两张不同的灰阶测试卡。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0492-CR2-grayscale.jpg" alt="IMG-0492-CR2-grayscale.jpg">&lt;span class="caption">※ IMG_0492.CR2&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0493-CR2-grayscale.jpg" alt="IMG-0493-CR2-grayscale.jpg">&lt;span class="caption">※ IMG_0493.CR2&lt;/span>&lt;/p>
&lt;h3 id="分析图像">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#分析图像" class="anchor-link" aria-label="分析图像">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:分析图像" class="headings">分析图像&lt;/a>&lt;/h3>
&lt;p>根据以上拍摄的图像，按照拍摄顺序进行的图像分析结果如下所示。&lt;/p>
&lt;h4 id="mtf-曲线分析">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#mtf-曲线分析" class="anchor-link" aria-label="mtf-曲线分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:mtf-曲线分析" class="headings">MTF 曲线分析&lt;/a>&lt;/h4>
&lt;h5 id="50mm-焦距">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#50mm-焦距" class="anchor-link" aria-label="50mm-焦距">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:50mm-焦距" class="headings">50mm 焦距&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0479-CR2-f50-fov-center.png" alt="IMG-0479-CR2-f50-fov-center.png">&lt;span class="caption">※ 视场中心&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0479-CR2-f50-fov-edge.png" alt="IMG-0479-CR2-f50-fov-edge.png">&lt;span class="caption">※ 视场边角&lt;/span>&lt;/p>
&lt;h5 id="18mm-焦距">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#18mm-焦距" class="anchor-link" aria-label="18mm-焦距">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:18mm-焦距" class="headings">18mm 焦距&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0482-CR2-f18-fov-center.png" alt="IMG-0482-CR2-f18-fov-center.png">&lt;span class="caption">※ 视场中心&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0482-CR2-f18-fov-edge.png" alt="IMG-0482-CR2-f18-fov-edge.png">&lt;span class="caption">※ 视场边角&lt;/span>&lt;/p>
&lt;h5 id="75mm-焦距">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#75mm-焦距" class="anchor-link" aria-label="75mm-焦距">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:75mm-焦距" class="headings">75mm 焦距&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0483-CR2-f75-fov-center.png" alt="IMG-0483-CR2-f75-fov-center.png">&lt;span class="caption">※ 视场中心&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0483-CR2-f75-fov-edge.png" alt="IMG-0483-CR2-f75-fov-edge.png">&lt;span class="caption">※ 视场边角&lt;/span>&lt;/p>
&lt;p>MTF50 表示的是 MTF 为最大值的 50%（即 MTF=0.5）时，对应的空间频率。单位为 Cy/Pxl，则是表示在一个像素里有多少个线对，黑白线对为一个周期。由以上三组图线可知，IMG_0479 与 IMG_0482 的视场边角的 MTF 曲线在奈奎斯特频率到达 0.8 后骤增，分析其原因可能是由于在通过软件采样的时候，并没有采取到合适的位置，导致分析结果偏差很大,也可能是因为使用相对应的镜头拍摄时，没有拍摄好，成像质量较差。三张图的 MTF 曲线近似相等。在拍摄标准分辨率板的时候，房间光线不太充足，使用相机拍摄时没有将曝光时间调节到足够大，导致接受到的信号不足。&lt;/p>
&lt;h4 id="色彩还原性与白平衡特性分析">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#色彩还原性与白平衡特性分析" class="anchor-link" aria-label="色彩还原性与白平衡特性分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:色彩还原性与白平衡特性分析" class="headings">色彩还原性与白平衡特性分析&lt;/a>&lt;/h4>
&lt;p>由于这一次测试使用的 Imatest 软件为试用版，不能够导出数据文件，因此只能够通过图像进行分析。&lt;/p>
&lt;h5 id="a-光源">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#a-光源" class="anchor-link" aria-label="a-光源">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:a-光源" class="headings">A 光源&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0487-CR2-light-a-color-reducibility.png" alt="IMG-0487-CR2-light-a-color-reducibility.png">&lt;span class="caption">※ 色彩还原性&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0487-CR2-light-a-white-balance.png" alt="IMG-0487-CR2-light-a-white-balance.png">&lt;span class="caption">※ 白平衡特性&lt;/span>&lt;/p>
&lt;h5 id="d65-光源">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#d65-光源" class="anchor-link" aria-label="d65-光源">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:d65-光源" class="headings">D65 光源&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0488-CR2-light-d65-color-reducibility.png" alt="IMG-0488-CR2-light-d65-color-reducibility.png">&lt;span class="caption">※ 色彩还原性&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0488-CR2-light-d65-white-balance.png" alt="IMG-0488-CR2-light-d65-white-balance.png">&lt;span class="caption">※ 白平衡特性&lt;/span>&lt;/p>
&lt;h5 id="tl84-光源">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#tl84-光源" class="anchor-link" aria-label="tl84-光源">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:tl84-光源" class="headings">TL84 光源&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0489-CR2-light-tl84-color-reducibility.png" alt="IMG-0489-CR2-light-tl84-color-reducibility.png">&lt;span class="caption">※ 色彩还原性&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0489-CR2-light-tl84-white-balance.png" alt="IMG-0489-CR2-light-tl84-white-balance.png">&lt;span class="caption">※ 白平衡特性&lt;/span>&lt;/p>
&lt;p>由分析结果可以得出：&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">光源种类&lt;/th>
&lt;th style="text-align: center">饱和度&lt;/th>
&lt;th style="text-align: center">校正饱和度后的色差平均值&lt;/th>
&lt;th style="text-align: center">白平衡误差平均值&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">A 光源&lt;/td>
&lt;td style="text-align: center">137.3%&lt;/td>
&lt;td style="text-align: center">28.7&lt;/td>
&lt;td style="text-align: center">0.647&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">D65 光源&lt;/td>
&lt;td style="text-align: center">106.5%&lt;/td>
&lt;td style="text-align: center">5.3&lt;/td>
&lt;td style="text-align: center">0.014&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">TL84 光源&lt;/td>
&lt;td style="text-align: center">120.4%&lt;/td>
&lt;td style="text-align: center">19.3&lt;/td>
&lt;td style="text-align: center">0.387&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>三种光源中，D65 光源色彩还原性效果最佳，白平衡误差也最小，其次为 TL84 光源，对色彩还原性最差的以及白平衡误差最大的是 A 光源。&lt;/p>
&lt;h4 id="灰阶特性分析">&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#灰阶特性分析" class="anchor-link" aria-label="灰阶特性分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#contents:灰阶特性分析" class="headings">灰阶特性分析&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0492-CR2-grayscale-result.png" alt="IMG-0492-CR2-grayscale-result.png">&lt;span class="caption">※ IMG_0492&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/IMG-0493-CR2-grayscale-result.png" alt="IMG-0493-CR2-grayscale-result.png">&lt;span class="caption">※ IMG_0493&lt;/span>&lt;/p>
&lt;p>IMG_0492 的动态范围较 IMG_0493 的动态范围大，所能表现得层次更为丰富，包含的色彩空间更广。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>对于这一领域相关概念的可以参考与「傅里叶光学」有关的教材和其他书籍。&amp;#160;&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/preliminary-image-quality-evaluation/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/fourier-optics/">傅里叶光学</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/white-balance/">白平衡</category></item><item><title>
单片机基础操作</title><link>https://guanqr.com/tech/computer/microcontroller-homework/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/microcontroller-homework/</guid><pubDate>Fri, 14 Jun 2019 19:12:11 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;img src="https://guanqr.com/images/c51-computer.jpg" alt="c51-computer.jpg">&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">临&lt;/span>近期末考试周，我们专业的选修课《微机原理与接口技术》的实验部分也验收完毕。这门课程总共设置了四个专题实验，对于初学单片机的学生来说，这四个专题实验还算是简单。只要掌握了基本的原理，题目再出什么花样都离不开最基本的框架。&lt;/p>
&lt;p>这四个专题实验分别为：&lt;/p>
&lt;ul>
&lt;li>I/O 口控制实验&lt;/li>
&lt;li>定时器实验&lt;/li>
&lt;li>键盘接口实验&lt;/li>
&lt;li>1-Wire 与 I&lt;sup>2&lt;/sup>C 总线实验&lt;/li>
&lt;/ul>
&lt;p>我们使用的是普中科技的单片机实验箱，实验箱基本包含了各种基础模块，比较适合初学者学习使用。在开始实验之前，我的室友就在网上搜集到了普中科技实验箱的教学指导资料。里面包含了单片机各模块的使用程序，可以作为不错的参考资料。&lt;/p>
&lt;p>下面总结一下我是怎么做这四个实验的。&lt;/p>
&lt;h2 id="io-口控制实验">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#io-口控制实验" class="anchor-link" aria-label="io-口控制实验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>I/O 口控制实验&lt;/h2>
&lt;h3 id="基础型">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#基础型" class="anchor-link" aria-label="基础型">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>基础型&lt;/h3>
&lt;p>实验一：实现 8 位逻辑电平显示模块的奇偶位亮灭闪烁显示，闪烁间隔为 1s。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg52.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xaa&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">_cror_&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>实验二：实现 8 位逻辑电平显示模块的 LED 轮流点亮，间隔为 1s。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg52.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">_cror_&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delayms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在以上两题中，将 P2 口接入发光管，发光管的亮灭与 P2 口的输出有关。因此我们可以设定 P2 口输出的初值（这个初值是一个八位二进制数），再利用 &lt;code>_crol_&lt;/code>（循环左移）或 &lt;code>_cror_&lt;/code>（循环右移）位移函数将数值进行位移，即可控制灯亮灭的转换。&lt;/p>
&lt;p>比如，设定奇偶位亮灭，上述程序设定的初始值为 0xaa，即二进制 10101010，执行 &lt;code>_crol_&lt;/code>，则在延时后变为 01010101，实现了奇偶位亮灭的变化。&lt;/p>
&lt;p>同理，实现灯的轮流点亮，则可设定其中一个初始值为 1，剩余灯为 0，如上述程序，设定的初始值为 0x80，即二进制 10000000，执行 &lt;code>_crol_&lt;/code>，则灯依次点亮。&lt;/p>
&lt;p>在上述程序中用到的延时函数 &lt;code>delayms(1000)&lt;/code>，近似可实现循环一次延时 1s。&lt;/p>
&lt;h3 id="设计型">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#设计型" class="anchor-link" aria-label="设计型">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>设计型&lt;/h3>
&lt;p>采用按键控制 8 个 LED 全亮、全灭、循环点亮或奇偶位亮灭闪烁显示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg52.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key1&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key2&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key3&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key4&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k4&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key1&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key2&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key3&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key4&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">55&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key3&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key4&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key1&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key2&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key3&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">int&lt;/span> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">_cror_&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k3&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key4&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">data&lt;/span> &lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">int&lt;/span> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xaa&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">_cror_&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="探究型">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#探究型" class="anchor-link" aria-label="探究型">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>探究型&lt;/h3>
&lt;p>十字路口交通灯模拟实验&lt;/p>
&lt;p>实验一：设计程序，使南北方向和东西方向交通灯同时显示红色、绿色、黄色各 1s 后，再分别显示不同的颜色并实现显示色的滚动。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg52.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xdb&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xb7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x6f&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x7f&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xbf&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xdf&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xef&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xf7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xfb&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>实验二：模拟十字路口交通灯。交通信号灯控制逻辑如下：开始东西路口的绿灯亮，南北路口的红灯亮，东西路口方向通车，对应人行道绿灯亮。延时一段时间后（20 秒），东西路口的绿灯，闪烁若干次后（3 秒），东西路口的绿灯熄灭，同时东西路口的黄灯亮，延时一段时间后（2 秒），东西路口的红灯亮，南北路口的绿灯亮，南北路口方向通车，对应人行道绿灯亮。延时一段时间后（20 秒），南北路口的绿灯闪烁若干次后（3 秒），南北路口的绿灯熄灭，同时南北路口的黄灯亮，延时一段时间后（2 秒），再切换到东西路口的绿灯亮，之后重复以上过程。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg52.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">rt1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//gre
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">rt2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//red
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">up1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//red
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">up2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">//gre
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">red1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">yel1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">gre1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">red2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">yel2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">gre2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">//这里大部分定义并没有用到，只是为了标记每个颜色的灯对应的接口
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">(){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">rt1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x7a&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">gre2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">gre2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xba&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xcd&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">rt1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">rt2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">gre1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">gre1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xd5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">2000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">rt2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">up2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>课程所使用的单片机实验箱，在接交通灯模块的时候，若直接赋给端口十六进制数，则会与理论端口号输出相反。如：P0.0 对应 D8 口，P0.1 对应 D7 口，以此类推。&lt;/p>
&lt;h2 id="定时器实验">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#定时器实验" class="anchor-link" aria-label="定时器实验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>定时器实验&lt;/h2>
&lt;h3 id="基础型-1">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#基础型-1" class="anchor-link" aria-label="基础型-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>基础型&lt;/h3>
&lt;p>利用定时器 16 位定时方式实现 1s 定时的程序。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;reg52.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;intrins.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="k">typedef&lt;/span> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">u8&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">typedef&lt;/span> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">u16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">u16&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=~&lt;/span>&lt;span class="n">led&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>晶振频率为 12MHz，则：&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th>最长时间间隔(μs)&lt;/th>
&lt;th>实现方法&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>≈10&lt;/td>
&lt;td>软件编写&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>256&lt;/td>
&lt;td>定时器工作方式 2（8 位定时方式）&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>65536&lt;/td>
&lt;td>定时器工作方式 1（16 位定时方式）&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>无限长&lt;/td>
&lt;td>16 位定时器及软件计数&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>此定时程序可以作为一个模板，下面的几个程序都是以此程序为基础进行拓展的。&lt;/p>
&lt;h3 id="设计型-1">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#设计型-1" class="anchor-link" aria-label="设计型-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>设计型&lt;/h3>
&lt;p>结合数码管显示模块，设计程序实现利用定时器设计一分钟倒计时器。&lt;/p>
&lt;p>动态数码管电路图如下所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/circuit-diagram-of-nixie-tube.jpg" alt="circuit-diagram-of-nixie-tube.jpg">&lt;span class="caption">※ 动态数码管电路图&lt;/span>&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;span class="lnt">80
&lt;/span>&lt;span class="lnt">81
&lt;/span>&lt;span class="lnt">82
&lt;/span>&lt;span class="lnt">83
&lt;/span>&lt;span class="lnt">84
&lt;/span>&lt;span class="lnt">85
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt; &lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138A&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138B&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138C&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="c1">//start
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">k2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="c1">//return 60s
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x3f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x06&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x07&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x40&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10000&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// 增加小数点，倒计时功能中包含小数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">6000&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 这里实现的是只有当按键按下才开始计数，而不是接通电源直接计数
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10000&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">break&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">char&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">// 这里与其他同学设计的不同，其他人是直接连接单片机上数码管位码判定的 8 根管脚，需要用到 8 根线，我利用译码器，实现只用 3 根线控制 8 位显示。
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">&amp;amp;&amp;amp;&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">!=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="o">--&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="探究型-1">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#探究型-1" class="anchor-link" aria-label="探究型-1">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>探究型&lt;/h3>
&lt;p>实验一：利用 8051 微控制器的定时器，由某一 I/O 口线输出一周期为 20ms 的 PWM 波，占空比按 10% 的步进从 0%~90% 线性调节。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;reg52.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;intrins.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">)){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>实验二：在上题的基础上，加入按键控制，改变 PWM 波占空比，并通过 ULN2003 模块电路，实现 LED 亮度调节。&lt;/p>
&lt;p>ULN2003 模块电路图以及所用到的大功率 LED 如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/uln2003.jpg" alt="uln2003.jpg">&lt;span class="caption">※ ULN2003 模块电路图&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/high-power-led.jpg" alt="high-power-led.jpg">&lt;span class="caption">※ 大功率 LED&lt;/span>&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;reg52.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;intrins.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">d&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">p&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedNumVal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x3f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x06&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x07&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x40&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P0&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">k1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// +
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">k2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// -
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">key1&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key2&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">d&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">d&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">d&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">p&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedNumVal&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">LedNumVal&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P2&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key1&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">key2&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key1&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">key2&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">led&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">k2&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="键盘接口实验">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#键盘接口实验" class="anchor-link" aria-label="键盘接口实验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>键盘接口实验&lt;/h2>
&lt;p>矩阵键盘的结构如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/circuit-diagram-of-matrix-keyboard.jpg" alt="circuit-diagram-of-matrix-keyboard.jpg">&lt;span class="caption">※ 矩阵键盘电路图&lt;/span>&lt;/p>
&lt;h3 id="基础型-2">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#基础型-2" class="anchor-link" aria-label="基础型-2">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>基础型&lt;/h3>
&lt;p>实验一：数码管静态显示电路，依次显示第 1 个数码管的各段（依次循环显示次序为 a、b、c、d、e、f），每段显示时间为 100ms。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;reg52.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;#34;intrins.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x88&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x83&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xC6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0xA1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x86&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x8e&lt;/span>&lt;span class="p">};&lt;/span> &lt;span class="c1">// 对应字母a、b、c、d、e、f
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>实验二：采用矩阵式键盘，指定 IO 与键盘的连接，设计程序实现对键盘的扫描、按键去抖动等处理。当 Key0－KeyF 键按下时分别对寄存器 B 赋值 0－F，并通过数码管显示。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">dis_buf&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">temp&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">LED7Code&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x3F&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x06&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x5B&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x4F&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x6D&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x7D&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x07&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x7F&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x6F&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x77&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x7C&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x39&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x5E&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x79&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="o">~&lt;/span>&lt;span class="mh">0x71&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">j&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keyscan&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=~&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;gt;&amp;gt;&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x0F&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x0F&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=~&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dis_buf&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dis_buf&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">dis_buf&lt;/span> &lt;span class="o">&amp;amp;&lt;/span> &lt;span class="mh">0x0f&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keydown&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="o">!=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">keyscan&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xFF&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">keydown&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P0&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LED7Code&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">dis_buf&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="设计型-2">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#设计型-2" class="anchor-link" aria-label="设计型-2">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>设计型&lt;/h3>
&lt;p>基于动态显示模块，设计程序实现数码管从右到左滚动显示自己的学号的所有位数（这里由于学号属于个人隐私，选择用其他数字替代）。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;span class="lnt">75
&lt;/span>&lt;span class="lnt">76
&lt;/span>&lt;span class="lnt">77
&lt;/span>&lt;span class="lnt">78
&lt;/span>&lt;span class="lnt">79
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt; &lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138A&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138B&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138C&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x3f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x06&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x07&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x00&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 0 1 2 3 4 5 6 7 8 9
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">21&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// 在这个数组中写入自己的学号或任何想要显示的数字，格式是在循环到末尾的 10 位数后，重新回到第一位开启新一轮的循环。9 表示什么都不显示。
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">14&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="探究型-2">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#探究型-2" class="anchor-link" aria-label="探究型-2">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>探究型&lt;/h3>
&lt;p>实验一：结合动态数码管显示模块，设计程序实现 24 小时实时时钟功能。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;span class="lnt">136
&lt;/span>&lt;span class="lnt">137
&lt;/span>&lt;span class="lnt">138
&lt;/span>&lt;span class="lnt">139
&lt;/span>&lt;span class="lnt">140
&lt;/span>&lt;span class="lnt">141
&lt;/span>&lt;span class="lnt">142
&lt;/span>&lt;span class="lnt">143
&lt;/span>&lt;span class="lnt">144
&lt;/span>&lt;span class="lnt">145
&lt;/span>&lt;span class="lnt">146
&lt;/span>&lt;span class="lnt">147
&lt;/span>&lt;span class="lnt">148
&lt;/span>&lt;span class="lnt">149
&lt;/span>&lt;span class="lnt">150
&lt;/span>&lt;span class="lnt">151
&lt;/span>&lt;span class="lnt">152
&lt;/span>&lt;span class="lnt">153
&lt;/span>&lt;span class="lnt">154
&lt;/span>&lt;span class="lnt">155
&lt;/span>&lt;span class="lnt">156
&lt;/span>&lt;span class="lnt">157
&lt;/span>&lt;span class="lnt">158
&lt;/span>&lt;span class="lnt">159
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt; &lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138A&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138B&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138C&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">sec&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mo">00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mo">00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">hou&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mo">00&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x3f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x06&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x5b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x4f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x66&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7d&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x07&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x7f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x6f&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mh">0x40&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">temp&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keyscan&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keydown&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">keydown&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">hou&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">hou&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1">//LedOut[4]=Disp_Tab[sec%10000/1000];
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="c1">//LedOut[5]=Disp_Tab[sec%1000/100]|0x80;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">sec&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">sec&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1000&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sec&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sec&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">60&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sec&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">min&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">60&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">min&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">hou&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">hou&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">24&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">hou&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">k&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">m&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">n&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">k&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">m&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keyscan&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=~&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;gt;&amp;gt;&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x0F&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x0F&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=~&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">key&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sec&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sec&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">60&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sec&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">min&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">min&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">60&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">min&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">key&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">hou&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">hou&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">24&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">hou&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">keydown&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">P1&lt;/span>&lt;span class="o">!=&lt;/span>&lt;span class="mh">0xF0&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">keyscan&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在这个程序中我添加了通过矩阵键盘调节时间的功能，但目前仍存在 BUG，键盘判定过程有一些问题待解决。由于添加这个功能只是为了应付一下老师的要求，没有太多闲暇时间 DEBUG，将矩阵键盘程序忽略即可。&lt;/p>
&lt;p>实验二：基于动态扫描显示电路，设计程序实现滚动显示 8 位数码管的边缘各段（1# 和 8# 应显示向外的 4 段，其余 6 个将显示上方的 a 段和下方的 d 段），显示出滚动运行的大方框。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt; &lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138A&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138B&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">LS138C&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="mh">0x39&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x09&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x0f&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x01&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x08&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x38&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x19&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x29&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x31&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x0e&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x0d&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x0b&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">0x07&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">code&lt;/span> &lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">160&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">7&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">12&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">11&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">9&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">};&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ET0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">Disp_Tab&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">num&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">]];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">time0&lt;/span>&lt;span class="p">()&lt;/span>&lt;span class="n">interrupt&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XFC&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL0&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X18&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">6&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">P3&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">LedOut&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">LS138A&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138B&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="n">LS138C&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">500&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">160&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>此程序本人采用了较为无脑的穷举方法，将灯亮的所有情况穷举出来实现循环。&lt;/p>
&lt;h2 id="1-wire-与-i2c-总线实验">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#1-wire-与-i2c-总线实验" class="anchor-link" aria-label="1-wire-与-i2c-总线实验">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>1-Wire 与 I&lt;sup>2&lt;/sup>C 总线实验&lt;/h2>
&lt;p>回顾《微机原理与接口技术》课程的四个实验，最坑的实验就是这个实验。在课堂中，这一部分知识是以「翻转课堂」的形式进行教学的，说白了就是同学上台讲课。结果一堂课下来，基本没有听明白台上的同学在说些什么。无奈只好自学。&lt;/p>
&lt;p>这一部分的程序基础型与探究型实验是我写的，设计型实验是我借鉴室友的。本来我自己写出了一个程序，但执行结果是错的。但是从理论分析并没有什么错误，就这样，我被这个设计型实验困扰了很长时间……&lt;/p>
&lt;h3 id="基础型-3">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#基础型-3" class="anchor-link" aria-label="基础型-3">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>基础型&lt;/h3>
&lt;p>通过 1-Wire 总线读取 DS18B20 的温度，并通过串口上传至 PC 机。&lt;/p>
&lt;p>DS18B20 原理图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/ds18b20.jpg" alt="ds18b20.jpg">&lt;span class="caption">※ DS18B20&lt;/span>&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;lt;reg51.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>&lt;span class="n">sbit&lt;/span> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P3&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uint&lt;/span> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">sb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="sc">&amp;#39;0&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;1&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;2&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;3&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;4&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;5&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;6&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;7&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;8&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="sc">&amp;#39;9&amp;#39;&lt;/span>&lt;span class="p">};&lt;/span> &lt;span class="c1">// 至于为什么把这个数组名字定义为 sb，还有下面的 ssb，可能是当时的心情有些烦躁吧
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="kt">void&lt;/span> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">Delay10ms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">DS18B20_Reset&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">80&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">14&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">DS18B20_Write_Byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uchar&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;gt;&amp;gt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="nf">DS18B20_Read_Byte&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;gt;&amp;gt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dq&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dq&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">|=&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">sdelay&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uint&lt;/span> &lt;span class="nf">GET_Temperature&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">float&lt;/span> &lt;span class="n">tt&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Reset&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Write_Byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xcc&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Write_Byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x44&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Reset&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Write_Byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xcc&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DS18B20_Write_Byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0xbe&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">DS18B20_Read_Byte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">b&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">DS18B20_Read_Byte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="o">&amp;lt;&amp;lt;=&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">tt&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mf">0.0625&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">tt&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mf">0.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">t&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PuZh&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">GET_Temperature&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">x&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">PuZh&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">y&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">PuZh&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">z&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">PuZh&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">sb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">sb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="sc">&amp;#39;.&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">sb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="sc">&amp;#39; &amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SBUF&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">ssb&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">TI&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TI&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">Delay10ms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X50&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X20&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">Delay10ms&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">int&lt;/span> &lt;span class="n">c&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(;&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">38&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">130&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="设计型-3">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#设计型-3" class="anchor-link" aria-label="设计型-3">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>设计型&lt;/h3>
&lt;p>通过 I&lt;sup>2&lt;/sup>C 总线读取 PCF8591 的 ADC 采集值，实现环境亮度值（光敏电阻）的检测，并将亮度值上传至 PC 机。&lt;/p>
&lt;p>PCF8591 原理图：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/pcf8591.jpg" alt="pcf8591.jpg">&lt;span class="caption">※ PCF8591&lt;/span>&lt;/p>
&lt;p>这个程序足足坑了我半天的时间，无奈之下用室友在网上花 2 元钱购买的资料蒙混过关。&lt;/p>
&lt;p>此程序主要包含三个文件：&lt;code>i2c.h&lt;/code>，&lt;code>i2c.c&lt;/code>，&lt;code>main.c&lt;/code>。&lt;/p>
&lt;p>&lt;code>i2c.h&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// i2c.h
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="cp">#ifndef __I2C_H_
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define __I2C_H_
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="nf">I2C_ReadByte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_SendByte&lt;/span>&lt;span class="p">(&lt;/span> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_Stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_Start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#endif
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>i2c.c&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// i2c.c
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;#34;i2c.h&amp;#34;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define somenop() _nop_(),_nop_(),_nop_(),_nop_(),_nop_(),_nop_()
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_Start&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_Stop&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">I2C_SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">bit&lt;/span>&lt;span class="p">)(&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;lt;&amp;lt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">SDA&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">&amp;amp;&amp;amp;&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">j&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">250&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">j&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="nf">I2C_ReadByte&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SDA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;lt;&amp;lt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">SDA&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCL&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="c1">// 下降沿时读取数据
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>&lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>main.c&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="c1">// main.c
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;reg51.h&amp;gt; &lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span> &lt;span class="cpf">&amp;lt;i2c.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define WRITEADDR 0x90
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define READADDR 0x91
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">Pcf8591SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uchar&lt;/span> &lt;span class="n">channel&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_Start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">WRITEADDR&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x40&lt;/span>&lt;span class="o">|&lt;/span>&lt;span class="n">channel&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_Stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="nf">Pcf8591ReadByte&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">num&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_Start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">READADDR&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">num&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">I2C_ReadByte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">I2C_Stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">num&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">UsartInit&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X50&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X20&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay1s&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kt">void&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kt">unsigned&lt;/span> &lt;span class="kt">char&lt;/span> &lt;span class="n">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">167&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">c&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">171&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">b&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">a&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">adNum&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">UsartInit&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">Pcf8591SendByte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">adNum&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">Pcf8591ReadByte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">adNum&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">32&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">48&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">value&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">48&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">32&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SBUF&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">PuZh&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">];&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">TI&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TI&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay1s&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="探究型-3">&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/#探究型-3" class="anchor-link" aria-label="探究型-3">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>探究型&lt;/h3>
&lt;p>通过 I&lt;sup>2&lt;/sup>C 总线设置 PCF8591 的 DA，实现 LED 亮度的控制，设定值通过串口向 MCU 发送。&lt;/p>
&lt;p>这个程序我采用的是中断的方式，将 LED 的亮度等级设定为十级。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;span class="lnt">136
&lt;/span>&lt;span class="lnt">137
&lt;/span>&lt;span class="lnt">138
&lt;/span>&lt;span class="lnt">139
&lt;/span>&lt;span class="lnt">140
&lt;/span>&lt;span class="lnt">141
&lt;/span>&lt;span class="lnt">142
&lt;/span>&lt;span class="lnt">143
&lt;/span>&lt;span class="lnt">144
&lt;/span>&lt;span class="lnt">145
&lt;/span>&lt;span class="lnt">146
&lt;/span>&lt;span class="lnt">147
&lt;/span>&lt;span class="lnt">148
&lt;/span>&lt;span class="lnt">149
&lt;/span>&lt;span class="lnt">150
&lt;/span>&lt;span class="lnt">151
&lt;/span>&lt;span class="lnt">152
&lt;/span>&lt;span class="lnt">153
&lt;/span>&lt;span class="lnt">154
&lt;/span>&lt;span class="lnt">155
&lt;/span>&lt;span class="lnt">156
&lt;/span>&lt;span class="lnt">157
&lt;/span>&lt;span class="lnt">158
&lt;/span>&lt;span class="lnt">159
&lt;/span>&lt;span class="lnt">160
&lt;/span>&lt;span class="lnt">161
&lt;/span>&lt;span class="lnt">162
&lt;/span>&lt;span class="lnt">163
&lt;/span>&lt;span class="lnt">164
&lt;/span>&lt;span class="lnt">165
&lt;/span>&lt;span class="lnt">166
&lt;/span>&lt;span class="lnt">167
&lt;/span>&lt;span class="lnt">168
&lt;/span>&lt;span class="lnt">169
&lt;/span>&lt;span class="lnt">170
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-c" data-lang="c">&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;lt;reg51.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#include&lt;/span>&lt;span class="cpf">&amp;lt;intrins.h&amp;gt;&lt;/span>&lt;span class="cp">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uchar unsigned char
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">#define uint unsigned int
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cp">&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">sbit&lt;/span> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">P2&lt;/span>&lt;span class="o">^&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="n">receiveData&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1">//5us
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{;;}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">delay1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uint&lt;/span> &lt;span class="n">z&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="c1">//1ms
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1">&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">z&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="o">&amp;gt;&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">start&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">stop&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">respons&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">norespons&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">init&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uchar&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;amp;&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="mh">0x80&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">temp&lt;/span>&lt;span class="o">&amp;lt;&amp;lt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="nf">read_byte&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">sda&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">8&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">sda&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">|=&lt;/span>&lt;span class="mh">0x01&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="mi">7&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">&amp;lt;&amp;lt;=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">scl&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">_nop_&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">DAC_write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uchar&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x90&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x40&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dat&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">uchar&lt;/span> &lt;span class="nf">ADC_read&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">uchar&lt;/span> &lt;span class="n">com&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">com&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x90&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">com&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">start&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">write_byte&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x91&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">respons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dat&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">read_byte&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">norespons&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">stop&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">dat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">main&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uchar&lt;/span> &lt;span class="n">ss&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">ad_value&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">uint&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">init&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">){&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;0&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;1&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">100&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;2&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">110&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;3&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;4&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">130&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;5&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">140&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;6&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">150&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;7&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">160&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;8&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">170&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="sc">&amp;#39;9&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="n">aa&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">180&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ad_value&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nf">ADC_read&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mh">0x42&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">DAC_write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">aa&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nf">delay1&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">UsartConfiguration&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X50&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TMOD&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X20&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">PCON&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">X80&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TH1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TL1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="n">XF3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ES&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">EA&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TR1&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kt">void&lt;/span> &lt;span class="nf">Usart&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="n">interrupt&lt;/span> &lt;span class="mi">4&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">receiveData&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">SBUF&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">RI&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">SBUF&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">receiveData&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="o">!&lt;/span>&lt;span class="n">TI&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">TI&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/microcontroller-homework/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/microcontroller-homework/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/microcontroller/">单片机</category></item><item><title>
网站字体优化方案</title><link>https://guanqr.com/tech/website/web-font-guide/</link><guid isPermaLink="true">https://guanqr.com/tech/website/web-font-guide/</guid><pubDate>Tue, 11 Jun 2019 23:58:24 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">就&lt;/span>网页常用的一些字体而言，最常用的三类字形为：serif（衬线）、sans-serif（无衬线）、monospace（等宽）。这三个分类是 &lt;code>font-family&lt;/code> 的三个可用字体系列取值。也就是说，上述三个名字，代表的并非某个特定字体，而是一系列字体，这些通用的名称允许用户代理从相应集合中选择一款字体&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>对于使用 Hexo 博客框架 NexT 主题的读者来说，我们可以在博客主题文件夹下的 &lt;code>~/source/css/_variables/base.styl&lt;/code> 文件中找到 NexT 主题的字体设定：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/themes/next/source/css/_variables/base.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-chinese&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;PingFang SC&amp;#34;&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="s2">&amp;#34;Microsoft YaHei&amp;#34;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-chinese&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">sans-serif&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;global&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-chinese&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">sans-serif&lt;/span> &lt;span class="nt">if&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;global&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-logo&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-logo&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;title&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span> &lt;span class="nt">if&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;title&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-headings&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-headings&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;headings&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span> &lt;span class="nt">if&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;headings&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-posts&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-posts&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;posts&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-base&lt;/span> &lt;span class="nt">if&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;posts&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-monospace&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">consolas&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">Menlo&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">monospace&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-chinese&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-monospace&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;codes&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">consolas&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">Menlo&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="nt">monospace&lt;/span>&lt;span class="o">,&lt;/span> &lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-chinese&lt;/span> &lt;span class="nt">if&lt;/span> &lt;span class="nt">get_font_family&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;codes&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">$&lt;/span>&lt;span class="nt">font-family-icons&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;FontAwesome&amp;#39;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>从这一部分的代码可以看出，NexT 默认的中文字体（font-family-chinese）是 &lt;code>PingFang SC&lt;/code> 和 &lt;code>Microsoft YaHei&lt;/code>，同时设定两个字体，在浏览网站的时候，浏览器会优先选取放在第一位的字体 &lt;code>PingFang SC&lt;/code>，这是苹果系统的苹方字体。而如果你使用的是 Windows 系统，计算机中并未安装 &lt;code>PingFang SC&lt;/code>，那么浏览器就会选择排在其后的 &lt;code>Microsoft YaHei&lt;/code>，也就是微软雅黑字体。而博客中的基础字体（font-family-base）设定中，先是选用中文字体，在中文字体后添加了一个 &lt;code>sans-serif&lt;/code>，也就是无衬线字作为最后的设定。也就是说，如果你的计算机系统中，苹方字体和微软雅黑都没有安装，那么浏览器就会选择你计算机系统中带有的基本无衬线字体。除此之外，这一部分代码也包含博客中的标题、文章主体、以及代码区域的字体设定。&lt;/p>
&lt;p>目前，电子显示屏上使用的字体普遍是无衬线体，比如黑体。在过去，因为屏幕技术的限制，想要在屏幕上展现出好看的衬线字角非常困难。如今高清显示屏的普及，在同质化的屏幕界面上使用衬线体为读者提供了另一种阅读选择。合适的衬线字体被引入到屏幕中，为单调的无衬线字体世界带来了新鲜的阅读体验。&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>对于中文来说，宋体就是一种标准的衬线字体，衬线的特征非常明显。我们可以考虑将博客的中文默认字体更换为宋体，这样可以增强读者的阅读体验。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-fonts-serif.jpg" alt="hexo-theme-next-fonts-serif.jpg">&lt;span class="caption">※ 石碑与屏幕上的字体&lt;/span>&lt;/p>
&lt;h2 id="直接使用本地字体">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#直接使用本地字体" class="anchor-link" aria-label="直接使用本地字体">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>直接使用本地字体&lt;/h2>
&lt;p>直接在上文提到的 &lt;code>base.styl&lt;/code> 文件中修改默认字体即可，比如你想使用楷体，就在 &lt;code>font-family-chinese&lt;/code> 的开头添加 &lt;code>'STKaiti'&lt;/code>。最好不要删除主题默认的字体，而是直接在最前端添加字体，因为如果你的计算机中并没有这个字体，也能优先显示第二种字体，而不是显示最后的 &lt;code>sans-serif&lt;/code>。不过这种设定方法的缺陷正是在这里，你设定的字体或许在你的计算机中安装了，但并不能保证在别人的计算机中安装了，所以就会出现你设定的字体在别人浏览你的博客的时候无法显示出来。目前 NexT 主题的代码默认字体（font-family-monospace）就存在这样的问题，你在 PC 端浏览博客，看到的代码区域字体为等宽字体，但在手机端浏览，却只能显示无衬线字体。&lt;/p>
&lt;h2 id="上传字体至博客目录">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#上传字体至博客目录" class="anchor-link" aria-label="上传字体至博客目录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>上传字体至博客目录&lt;/h2>
&lt;p>因为直接使用本地字体存在很大的缺陷，所以我们可以考虑上传自己想要的字体至博客中，这样，在别人浏览博客的时候，浏览器会优先加载并显示你上传的字体，而不是使用本地字体。这种方法最大的缺点就是中文字体的使用，因为中文字体不像英文那样只有 26 个字母，我们平时经常使用到的汉字有数千个，如果把这些汉字字体全部上传至博客中，占用的空间很大，加载速度也是一个问题。不过我们可以考虑使用这种方法来显示英文字体。&lt;/p>
&lt;p>举个例子，比如你想使用 Linux Biolinum 字体。&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:3">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/hexo-theme-next-fonts-linux-biolinum.png" alt="hexo-theme-next-fonts-linux-biolinum.png">&lt;span class="caption">※ Linux Biolinum 字体&lt;/span>&lt;/p>
&lt;p>首先，下载 Linux Biolinum 字体，这里我提供一个下载地址：&lt;a href="https://guanqr.com/uploads/linux-biolinum.zip">linux-biolinum.zip&lt;/a>。下载该压缩文件后，将里面的文件解压至博客根目录下的 &lt;code>~/source/fonts/&lt;/code> 文件夹中，若无 &lt;code>fonts&lt;/code> 文件夹请自建。&lt;/p>
&lt;p>然后在 &lt;code>styles.styl&lt;/code> 文件中添加以下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">@&lt;/span>&lt;span class="k">font-face&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;Linux Biolinum&amp;#39;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_Rah.eot&amp;#34;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">swap&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_Rah.eot&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;embedded-opentype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_Rah.woff2&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff2&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_Rah.woff&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_Rah.ttf&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;truetype&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-style&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">@&lt;/span>&lt;span class="k">font-face&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;Linux Biolinum&amp;#39;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RBah.eot&amp;#34;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">swap&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RBah.eot&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;embedded-opentype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RBah.woff2&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff2&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RBah.woff&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RBah.ttf&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;truetype&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">bold&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-style&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">@&lt;/span>&lt;span class="k">font-face&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;Linux Biolinum&amp;#39;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RIah.eot&amp;#34;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">swap&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RIah.eot&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;embedded-opentype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RIah.woff2&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff2&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RIah.woff&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s2">&amp;#34;/fonts/LinBiolinum_RIah.ttf&amp;#34;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;truetype&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-style&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">italic&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后，在 &lt;code>base.styl&lt;/code> 文件中修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/themes/next/source/css/_variables/base.styl
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">// Font families.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">-$font-family-chinese = &amp;#34;PingFang SC&amp;#34;, &amp;#34;Microsoft YaHei&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+$font-family-chinese = &amp;#34;Linux Biolinum&amp;#34;, &amp;#34;PingFang SC&amp;#34;, &amp;#34;Microsoft YaHei&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这样优先显示的就是该英文字体了。&lt;/p>
&lt;h2 id="使用-google-fonts">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#使用-google-fonts" class="anchor-link" aria-label="使用-google-fonts">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>使用 Google Fonts&lt;/h2>
&lt;p>我的博客字体就是使用了这一种方法进行加载的。&lt;a href="https://fonts.google.com/" target="_blank" rel="noopener">Google Fonts&lt;/a> 提供了数百种高质量英文字体的 API，你可以通过调用 Google Fonts 免费使用其提供的字体服务。目前 Google Fonts 提供了几种中文简体字体，其中就有思源宋体。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-google-fonts-chinese-simplified.png" alt="hexo-theme-next-google-fonts-chinese-simplified.png">&lt;span class="caption">※ Google Fonts 提供的中文简体字体&lt;/span>&lt;/p>
&lt;p>面对电子显示屏上千篇一律的黑体字，当读者看到一个显示宋体字的网页自然会眼前一亮。再加上合理的排版，你的博客必然会脱颖而出。宋体的衬线更适合长时间阅读，这也是目前各类阅读器或者浏览器上的阅读模式都会使用衬线字的原因。使用 Google Fonts 字体的方法很简单，NexT 主题配置文件中已经提供了设置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/themes/next/_config.yml&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">font&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Use custom fonts families or not.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Depended options: `external` and `family`.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Uri of fonts host, e.g. //fonts.googleapis.com (Default).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">host&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Font options:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># `external: true` will load this font family from `host` above.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># `family: Times New Roman`. Without any quotes.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># `size: x.x`. Use `em` as unit. Default: 1 (16px)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Global font settings used for all elements inside &amp;lt;body&amp;gt;.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">global&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">external&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Lato&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">size&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Font settings for site title (.site-title).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">title&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">external&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">size&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Font settings for headlines (&amp;lt;h1&amp;gt; to &amp;lt;h6&amp;gt;).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">headings&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">external&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">size&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Font settings for posts (.post-body).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">external&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Font settings for &amp;lt;code&amp;gt; and code blocks.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">codes&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">external&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>首先将 &lt;code>enable:&lt;/code> 的 &lt;code>false&lt;/code> 改为 &lt;code>true&lt;/code>，然后在 &lt;code>host:&lt;/code> 后添加 Google Fonts API 地址：&lt;code>fonts.googleapis.com&lt;/code>。如果觉得 Google 相关网址的载入速度不太理想，可以考虑将 &lt;code>googleapis.com&lt;/code> 修改为烧饼博客提供的镜像 &lt;code>loli.net&lt;/code>，不过我觉得载入速度还算可以。&lt;/p>
&lt;p>然后，设置中下面的一些选项，就是设定博客各区域的字体，比如网站标题 &lt;code>title&lt;/code>，文章内容 &lt;code>posts&lt;/code>……这些都可以进行修改，你要做的只是到 Google Fonts 上找到适合的字体，然后将字体的名字填写到 &lt;code>family:&lt;/code> 中。最关键的是 &lt;code>global&lt;/code> 字体的设定，这里的字体将会是你网站的基本（全局）字体。个人建议不要在这里填思源宋体的名字 &lt;code>Noto Serif SC&lt;/code>，而是选取一款英文字体进行填写。因为中文字体往往携带同样的英文字体，如果将中文字体优先级设置为第一位，那么英文字体必将也会是中文字体的样式。如果你在这里设置的是 &lt;code>Noto Serif SC&lt;/code>，那么英文字体也会是 &lt;code>Noto Serif SC&lt;/code>。那么，中文字体到哪里去设置呢？当然还是要到 &lt;code>base.styl&lt;/code> 文件中，直接这样修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/themes/next/source/css/_variables/base.styl
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">// Font families.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">-$font-family-chinese = &amp;#34;PingFang SC&amp;#34;, &amp;#34;Microsoft YaHei&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+$font-family-chinese = &amp;#34;Noto Serif SC&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后进入 &lt;a href="https://fonts.google.com/" target="_blank" rel="noopener">Google Fonts&lt;/a>，搜索 Noto Serif SC，点 &lt;code>+&lt;/code> 号选择，选择好后底部会弹出一个提示框，里面有使用说明。还可以点击提示框中的 &lt;code>CUSTOMIZE&lt;/code> 定制要加载的字重与语言。之后，点击 &lt;code>EMBED&lt;/code>，复制生成的 &lt;code>&amp;lt;link&amp;gt;&lt;/code> 代码，添加到博客的 &lt;code>&amp;lt;head&amp;gt;&lt;/code> 标签内，NexT 主题可直接添加到 &lt;code>~/source/_data/head.swig&lt;/code> 文件中。如果你想使用上文中提到的烧饼博客镜像，就将代码中的将 &lt;code>googleapis.com&lt;/code> 修改为 &lt;code>loli.net&lt;/code>。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-google-fonts-select.png" alt="hexo-theme-next-google-fonts-select.png">&lt;span class="caption">※ 定制字体&lt;/span>&lt;/p>
&lt;p>为了方便，我在这里直接给出代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/head.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">link&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,500,700&amp;amp;display=swap&amp;amp;subset=chinese-simplified&amp;#34;&lt;/span> &lt;span class="na">rel&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;stylesheet&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>注意：Google Fonts 为庆祝十周年对网站进行了改版，支持了可变字体（Variable Fonts）的加载。目前从网站上进行配置得到的代码与我在上文中所给的代码有一些差异，为了体验到最好的字体载入效果，建议亲自到 Google Fonts 网站进行配置。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-google-fonts-ten-years.png" alt="hexo-theme-next-google-fonts-ten-years.png">&lt;span class="caption">※ Google Fonts 在其 twitter 上的说明&lt;/span>&lt;/p>&lt;/div>
&lt;p>考虑到宋体的笔画要比黑体细，因此建议通过自定义 CSS 将字体的颜色加深，比如修改为 &lt;code>#333&lt;/code>，以达到较好的阅读效果。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">post-body&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#333&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这种先在 &lt;code>&amp;lt;head&amp;gt;&lt;/code> 中引入字体，再通过 CSS 设定字体显示部位的方式适用于各种网页的设计，不局限于 NexT 主题。另外，我在这里给出我认为比较好的博客字体设定：&lt;/p>
&lt;ul>
&lt;li>中文字体：Noto Serif SC&lt;/li>
&lt;li>英文字体：EB Garamond&lt;/li>
&lt;li>标题字体：Cinzel Decorative&lt;/li>
&lt;li>代码字体：Source Code Pro&lt;/li>
&lt;/ul>
&lt;h2 id="我的博客字体">&lt;a href="https://guanqr.com/tech/website/web-font-guide/#我的博客字体" class="anchor-link" aria-label="我的博客字体">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>我的博客字体&lt;/h2>
&lt;p>我的博客字体设定有些奇葩，如果不想太折腾，直接使用我在上文推荐的 Google Fonts 字体就可以了。我的博客字体设定如下：&lt;/p>
&lt;ul>
&lt;li>中文字体：Noto Serif SC&lt;/li>
&lt;li>英文字体：Amstelvar&lt;/li>
&lt;li>代码字体：JetBrains Mono&lt;/li>
&lt;/ul>
&lt;p>中文字体使用的是 Google Fonts 的思源宋体 Noto Serif SC，因为对于中文衬线字体而言，这是最佳的选择。英文字体使用的是 &lt;a href="https://github.com/TypeNetwork/Amstelvar" target="_blank" rel="noopener">Amstelvar&lt;/a>，这个字体是开源的可变字体，需要自行通过 CSS 设定字重和字宽，我直接将 &lt;code>woff2&lt;/code> 格式的字体上传到博客中进行本地加载。代码字体使用的是 &lt;a href="https://www.jetbrains.com/lp/mono/" target="_blank" rel="noopener">JetBrains Mono&lt;/a>，这是 2020 年 JetBrains 开源的一款等宽字体，风格独特，感觉很酷。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>参考：&lt;a href="http://www.fly63.com/article/detial/1114" target="_blank" rel="noopener">前端开发你该知道的字体 font-family | fly63 前端网&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>参考：&lt;a href="https://zhuanlan.zhihu.com/p/49470735" target="_blank" rel="noopener">衬线体的进化：从纸面到屏幕 | 方正字库&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>图源：&lt;a href="https://www.fontke.com/family/290108/" target="_blank" rel="noopener">Linux Biolinum | Fontke&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/web-font-guide/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/web-font-guide/" target="_blank" rel="noopener">https://guanqr.com/tech/website/web-font-guide/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
谈谈 Hexo 主题的那些事</title><link>https://guanqr.com/tech/website/hexo-theme/</link><guid isPermaLink="true">https://guanqr.com/tech/website/hexo-theme/</guid><pubDate>Sat, 08 Jun 2019 00:24:26 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">我&lt;/span>最喜欢的 Hexo 博客主题就是 NexT 主题，从建立这个博客之初，我选择的就是该主题。因为其具有简洁友好的界面、强大的功能扩展、自由的自定义样式、四种主题风格的选择。在建站一个月之后，抱着「尝试一下别的主题看看有没有更吸引我的」的心态，我考虑过更换其他主题，但换来换去，总没有 NexT 这么灵活自由。NexT 主题的背后有着一支默默为之付出的团队，这也是该主题能够不断维持更新的原因。我想，有这样一支团队的存在，也是大家喜爱该主题的原因。在这篇文章中，我主要分析一些我曾经尝试过的主题的特色与缺陷，记录本站主题外观的变化，记录一下我眼中的 NexT 主题。&lt;/p>
&lt;h2 id="博客主题的选择">&lt;a href="https://guanqr.com/tech/website/hexo-theme/#博客主题的选择" class="anchor-link" aria-label="博客主题的选择">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>博客主题的选择&lt;/h2>
&lt;p>最初搭建 Hexo 博客的时候，我采用的主题是 NexT.Gemini。在这段时间中，我在主题美化方面花费了很多精力，为我的网站添加了很多功能。然而，尽管 NexT 主题集合了很多扩展插件，但总让我觉得缺少了一些东西。&lt;/p>
&lt;p>&lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">NexT&lt;/a> 主题是 GitHub 上 Stars 最多的主题，我浏览过的很多博客网站也采用的这个主题。当初我选用这个主题的原因就是它具有简洁美，用的人多，功能齐全，配置简单。NexT.Gemini 正好满足我的需求。但这个主题最大的缺陷就是移动端的显示问题。&lt;/p>
&lt;p>NexT.Gemini 在移动端无法显示有个人资料卡片的那部分区域，而 NexT 的前两个主题能够在移动端显示。在我看来，有些重要的信息，如果只有 PC 端能看见而移动端看不见，那么这样的设计就很失败。因为现如今大部分人浏览网页都是通过移动端，如果你的网站在移动端不能给人良好的体验，再怎么做也没用。除了这个问题，该主题风格由于侧边栏的信息过多，导致有的页面（比如 tags 页面）正文部分的长度还没有侧栏长，不太美观。&lt;/p>
&lt;p>在这一周的时间里，我前后体验了 &lt;a href="https://github.com/litten/hexo-theme-yilia" target="_blank" rel="noopener">Yilia&lt;/a>，&lt;a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" rel="noopener">Yelee&lt;/a>，&lt;a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank" rel="noopener">Indigo&lt;/a> 等等在 GitHub 上比较受欢迎的主题，我认为 Yilia 以及在 Yilia 基础上魔改的 Yelee 都很不错，但这两个主题已经有很长时间没有更新过了，对于谷歌浏览器的适配不太好，会出现一定的 BUG，而 Indigo 主题有一种商务风，方块化设计，配色舒适，但是对于我这种学工科的，平时写文章喜欢添加一些数学公式的人来说，并不太满意。这个主题在 MathJax 渲染效果上不太理想，太长的公式会越过文章边界，并且含有数学公式的段落在手机端会缩小字号。&lt;/p>
&lt;p>换来换去，最后还是换回了 NexT，这次用的是 NexT.Muse，计划在暑假阶段对博客界面美化一番。NexT 主题扩展性还是很强大的，毕竟有很多人的维护。临近期末考试，我也没有大多精力对我的博客网站进行更改，只能放在暑假了。&lt;/p>
&lt;h2 id="主题变更记录">&lt;a href="https://guanqr.com/tech/website/hexo-theme/#主题变更记录" class="anchor-link" aria-label="主题变更记录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>主题变更记录&lt;/h2>
&lt;p>到 2019 年 8 月 11 日为止本站已经稳定地运行了三个多月，我对 NexT.Muse 主题的美化、一些细节的优化以及功能的添加基本完善。通过对该主题的美化，我学到了不少东西。&lt;/p>
&lt;p>首先来看看我的主题样式的变更历程：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-in-5-month.jpg" alt="hexo-theme-in-5-month.jpg">&lt;span class="caption">※ 5 月&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-in-6-month.jpg" alt="hexo-theme-in-6-month.jpg">&lt;span class="caption">※ 6 月&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-in-7-month.jpg" alt="hexo-theme-in-7-month.jpg">&lt;span class="caption">※ 7 月&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-in-8-month.jpg" alt="hexo-theme-in-8-month.jpg">&lt;span class="caption">※ 8 月&lt;/span>&lt;/p>
&lt;p>在经历了 6 月初主题大变更后，我专注于将 NexT.Muse 主题进行美化，特别是在页边距、超链接等细节方面进行了多次调整，达到了目前较为满意的结果。值得一提的是，对主题样式的优化主要用到了 CSS 的一些皮毛，而我并没有专门学习过前端的设计，不过 CSS 的语法比较容易理解，我通过互联网学到了不少这方面的知识。而通过对网页样式的美化，前端设计引发了我的兴趣，我希望下学期能在繁忙之余自学一些，不过，有物理光学和光电子学两座大山压在身上，这个想法实现的概率很小很小。&lt;/p>
&lt;p>8 月份 NexT 主题升级到了 v7.3.0 版本，我了解到在该版本中有很多功能的调整与结构上的变化，便迫不及待地进行了更新。在下一阶段，NexT 主题会加入 PJAX 功能，我也会尝试在博客中添加该功能，但很可能由于插件的冲突无法实现。&lt;/p>
&lt;p>当然，页面更好的优化是为了增强文章的阅读体验，博客最重要的就是文章的质量，我今后也会认真对待我的每一篇文章，让内容更充实。由于我并非来自计算机专业，文章的内容可能更偏向于光学。今后可能会写一些课程的知识总结，当然也有生活中的点点滴滴。&lt;/p>
&lt;h2 id="谈谈-next-主题">&lt;a href="https://guanqr.com/tech/website/hexo-theme/#谈谈-next-主题" class="anchor-link" aria-label="谈谈-next-主题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>谈谈 NexT 主题&lt;/h2>
&lt;p>为什么 NexT 主题这么受人喜爱？&lt;/p>
&lt;p>我认为，因为它的功能很多、可扩展性很强大，因为有很多人一起维护这个主题项目，你遇到的 BUG 基本都能很快的修复，你想要加入的功能该团队也会尽力加入，所以它更新的速度很快，每一个月都会发布一个新版本。从目前的趋势来看，NexT 团队正在努力让主题内部代码更为结构化，方便使用者自己开发新的扩展功能。&lt;/p>
&lt;p>这几天我很详细地查看了该主题项目的历史记录，惊叹于该项目成员解决问题效率很高，Issues 的分类十分详细，很有条理。&lt;/p>
&lt;h2 id="next-主题的更新">&lt;a href="https://guanqr.com/tech/website/hexo-theme/#next-主题的更新" class="anchor-link" aria-label="next-主题的更新">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>NexT 主题的更新&lt;/h2>
&lt;p>在每一个版本更新的时候，NexT 团队会在其&lt;a href="https://theme-next.js.org/" target="_blank" rel="noopener">官方文档&lt;/a>上汇总该版本的一些变化。关于主题版本号的定义，只要有重大的变化，版本号就会从 &lt;code>vN.x.y&lt;/code> 变化到 &lt;code>vN.(x+1).0&lt;/code>，如果没有太大的变化，只是修复一些主题内部的 BUG，版本号就会总 &lt;code>vN.x.y&lt;/code> 变化到 &lt;code>vN.x.(y+1)&lt;/code>。&lt;/p>
&lt;p>因此我建议，如果你在哪一天心血来潮想要更新主题的时候，看一看下一个版本的版本号是否是从 &lt;code>vN.x.y&lt;/code> 变化到 &lt;code>vN.(x+1).0&lt;/code>，即有重大更新，如果是的话，那就耐心等待下一个版本推出的时候再更新，如果不是的话，那就选择当前版本更新就行了。我个人比较喜欢使用发行版（即在 releases 中）的主题，而不是直接 clone 当前的文件，因为发行版毕竟是标准的版本，虽然当前的实时更新文件可能会修复一定的 BUG，但版本内容并不太稳定。&lt;/p>
&lt;p>2019 年 8 月，官方推出了 v7.3.0 版本的更新，我感觉到最近主题更新速度很快，这里的速度不是指版本更新的速度，因为该主题的更新时间固定在每个月的月初，而是主题内功能完善的速度。我上一个版本使用的是 v7.1.2，距离这次更新已经有两个月的时间了，主题变化还是非常大的。有些变化可能是在我使用的这两个版本之间的某一版本发生的，但由于我并没有使用这些版本，便统一将这些变化写入到这一版本中。&lt;/p>
&lt;p>之前自定义样式的时候，需要在主题文件下的某一 &lt;code>custom.styl&lt;/code> 文件中添加即可，但目前主题删除了该文件，可直接在博客 &lt;code>sourse&lt;/code> 资源文件夹下新建自定义文件 &lt;code>_data/xxx&lt;/code> 实现该功能。以下为详细说明：&lt;/p>
&lt;p>在主题配置文件 &lt;code>_config.yml&lt;/code> 中，写道：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Define custom file paths.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Create your custom files in site directory `source/_data` and uncomment needed files below.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">custom_file_path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#head: source/_data/head.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#header: source/_data/header.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#sidebar: source/_data/sidebar.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#postMeta: source/_data/post-meta.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#postBodyEnd: source/_data/post-body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#footer: source/_data/footer.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#bodyEnd: source/_data/body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#variable: source/_data/variables.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#mixin: source/_data/mixins.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#style: source/_data/styles.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>即在 v7.2.0 及以上的版本中，如果需要自定义 CSS 样式，需要将上述代码中 &lt;code>custom_file_path:&lt;/code> 下的 &lt;code>#style: source/_data/styles.styl&lt;/code> 注释取消，在博客根目录下的 &lt;code>source&lt;/code> 文件夹下新建 &lt;code>_data&lt;/code> 文件夹，在该文件夹下创建文件 &lt;code>styles.styl&lt;/code>，在该文件中添加自定义内容。同样，如果需要在 &lt;code>&amp;lt;head&amp;gt;&lt;/code> 中添加内容，比如修改字体时引入 Google Fonts 以及分析博客数据时引入 Google Analytics，则需要新建 &lt;code>head.swig&lt;/code> 文件，在其中添加自定义内容即可。在 &lt;code>post.swig&lt;/code> 中添加的文章结尾样式，可以直接添加在 &lt;code>post-body-end.swig&lt;/code> 文件中。&lt;/p>
&lt;p>在 v7.4.0 版本中，官方加入了 PJAX 技术。通过 PJAX，在切换网页的时候，相同的元素不再刷新，只刷新发生改变的元素，节省了部分时间，加速了访问博客的速度。不过如果你的博客使用了 PJAX，一些 &lt;code>js&lt;/code> 脚本的运行可能会出现问题，在你第一次访问插入 &lt;code>js&lt;/code> 脚本页面的时候无法正常显示，需要手动刷新一次页面才能正常显示。如果你在页面中插入了 Aplayer 音乐播放器或者 Echarts 图表就会遇到该问题。&lt;/p>
&lt;p>在官方的中文讨论群中，负责引入 PJAX 技术的人对该问题的代码修改思路如下图所示。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-telegram-communication.jpg" alt="hexo-theme-next-telegram-communication.jpg">&lt;/p>
&lt;p>由于我目前还未认真研究过 PJAX 的代码，尝试修改无果，等以后有时间再来看看吧。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/hexo-theme/" target="_blank" rel="noopener">https://guanqr.com/tech/website/hexo-theme/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
天使与人类，文明的延续或消亡</title><link>https://guanqr.com/life/books/old-man-with-enormous-wings/</link><guid isPermaLink="true">https://guanqr.com/life/books/old-man-with-enormous-wings/</guid><pubDate>Fri, 31 May 2019 16:37:42 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="故事梗概">&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/#故事梗概" class="anchor-link" aria-label="故事梗概">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>故事梗概&lt;/h2>
&lt;p>《巨翅老人》描写了一个老头模样的天使的遭遇。这个天使太老了，被大雨打落在地面上，翅膀的羽毛很稀疏，口中牙齿稀落，老态龙钟的样子。这个年老的天使掉在佩拉约家里，佩拉约夫妇把他从泥水里拉出来关进鸡笼子，预备第二天把他送到海上，让他自己飞走。可是第二天左邻右舍的人都围着鸡笼子逗老天使玩，毫无敬畏之心。&lt;/p>
&lt;p>佩拉约家有一个天使的消息传开了，有个神父看见天使那副可怜的模样不相信是天使，于是打报告向上级要求做出裁决。越来越多的人来看稀奇。佩拉约的妻子给院子修了围墙，凡是进来参观的人都收取五分钱的门票费。甚至还有人来求医问卜。这让佩拉约和埃森打赚了不少钱。罗马教廷里在争论判定天使的标准，争论永无休止，而之前来求医问卜的人有些人发生了怪异的奇迹，后来一个由变蜘蛛的少女搞得巡回展览名声大噪，天使却声名狼藉了。佩拉约她则赚了钱搬新房子，佩拉约的孩子与天使玩，孩子们得了水痘，于是把天使放出笼子，天使却把菜地毁了，干了不少坏事，可是突然之间天使更加衰老了，仿佛病了。佩拉约用毯子包好天使把他弄到棚子里照顾，以为他要死了，过了冬天，天使开始恢复，最后飞走了。&lt;/p>
&lt;h2 id="作者简介">&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/#作者简介" class="anchor-link" aria-label="作者简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作者简介&lt;/h2>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/gabriel-garcia-marquez.jpg" alt="gabriel-garcia-marquez.jpg">&lt;span class="caption">※ 加西亚·马尔克斯&lt;/span>&lt;/p>
&lt;p>加西亚·马尔克斯，哥伦比亚作家、记者和社会活动家，拉丁美洲魔幻现实主义文学的代表人物，20 世纪最有影响力的作家之一，1982 年诺贝尔文学奖得主。作为一个天才的、赢得广泛赞誉的小说家，被誉为「二十世纪文学标杆」，加西亚·马尔克斯将现实主义与幻想结合起来，创造了一部风云变幻的哥伦比亚和整个南美大陆的神话般的历史。代表作有《百年孤独》（1967年）《霍乱时期的爱情》（1985年）。&lt;/p>
&lt;h2 id="作品赏析">&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/#作品赏析" class="anchor-link" aria-label="作品赏析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作品赏析&lt;/h2>
&lt;p>人们对待天使老头的一种态度反映了人们对于拉美民族的一种态度。天使老头的那种生存状态也就是拉美民族的现状。人们对「老头」的态度或恐惧、或敬畏、或挑逗、或冷淡。揭示了拉美人精神空虚无聊，思想观念孤独停滞的现实，暴露了宗教的荒谬与欺骗，以及人民生活在荒谬中而不觉可悲的状态。是拉美人愚昧落后、社会封闭、生活停滞的现实体观。天使老头的恢复象征着拉美民族的腾飞。&lt;/p>
&lt;p>文中最主要的人物形象就是这个长了翅膀的老头。他究竟代表着什么?要研究这个问题，首先要关注马尔克斯的创作背景。作为拉丁美洲的文学巨匠，马尔克斯的成名作《百年孤独》使得他的思想为世人所关注。《百年孤独》是深刻的，在它瑰丽奇异的故事内容下，隐藏了作者对拉丁美洲文化，文学发展的期望与无奈。&lt;em>Solitude&lt;/em> 象征着托丁美洲的封闭与孤独，而 &lt;em>one hundred years&lt;/em> 又强调了这中孤独长时间的存在。这样一种孤独，不仅弥漫在广阔的拉丁美洲世界，并且渗入了狭隘的思想,成为阻碍民族向上的一大包袱。&lt;em class="emphasis-point">作者希望拉美民众团结起来&lt;/em>，&lt;em class="emphasis-point">努力摆脱孤独&lt;/em>，&lt;em class="emphasis-point">但是却改变不了苦难的拉丁美洲被排斥于现代文明世界的进程之外的现实和无奈&lt;/em>。而造成这一结果的，不仅仅是民众的保守和愚昧，同时也与统治阶级的腐朽堕落密不可分。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/a-very-old-man-with-enormous-wings.jpg" alt="a-very-old-man-with-enormous-wings.jpg">&lt;span class="caption">※ 巨翅老人&lt;/span>&lt;/p>
&lt;p>结合马尔克斯的思想倾向和文章中复杂的人物关系，我们便不难分析出在文中一个长翅膀的老头所代表的不是一种所谓的「不明所以的意象」，也不是一个阻碍社会发展的怪物，他甚至更不是广泛被人们认为的托美文明的缩影。这个奇怪的，长着翅膀却又不那么像天使的老头， 代表的正是拉美世界眼中的现代文明。相比较之下，他不像欧洲文明世界眼中的天使那样甜美可人，他是一个天使，但当他降临到这片古老神奇的土地上时。他作为天使的神圣就被大打了折扣，他就变成了一个丑陋肮脏的怿老头。无疑形象地反映了拉丁美洲民众自身对现代文明排斥的态度。当文明的思想降临时，很少有人怀疑他的存在，正如天使老头降临时人们很快都认同了他天使的身份。然而他们并不敬仰爱戴他，相反，人们像对待马戏团的动物一样戏耍着这个「天使」。他们喂给他樟脑球，拔他的羽毛，投石头……文明的崇高与神圣被贬损，成为了在拉丁美洲的鸡笼中奄奄一息的小丑。&lt;/p>
&lt;p>文明传播的阻碍是多方面的，大众在观念上的排斥只是其中的一点。在文章中，唯一对老头身为天使的身份持怀疑态度的，不是贝拉约，不是埃丽森达，不是每天排队来看热闹的人们，而是神父贡萨加。这是一个极具讽刺意味的情节。神父在用古老的教义和极其主观的方式评判了老头以后，认为「他那可悲的模样同天使的崇高的尊严毫无共同之处」。然而为了让人们信服，他答应写信给主教，以将这件事传递给罗马教皇陛下评断。在这里，神父、主教和罗马教皇就是权力阶梯的代表。他们对文明的传播漠不关心，甚至否定、蔑视文明的出现。这个体系的最下层反对先进文明，试图让公众远离文明的传播。统治的上级则对此不屑一顾。他们的时间都浪费在证实罪犯是否有肚脐眼呀，他的方言是否与阿拉米奥人的语言有点关系呀，他是不是能在一个别针上触摸很多次呀等等上边。其腐朽停滞的状态可见一斑。看热闹的人们是会厌烦的，当作为天使的老头不能带给他们任何奇迹，甚至不屑于用正眼瞧他们时，这种对新鲜事物的兴趣就在逐渐的消退。&lt;/p>
&lt;p>大众的热情被一个变成了蜘蛛的女孩吸引过去了。这个细节说明，&lt;em class="emphasis-point">文明的传播与原始文化存在巨大差异而其本身又不具有主动性时&lt;/em>，&lt;em class="emphasis-point">大众的兴趣就会同归到原始的伦理道德观念和价值取向上&lt;/em>。人们放弃观看关在鸡笼子里的天使，转而对因为不听父母话偷偷出去跳舞而被闪电变成蜘蛛的少女兴趣十足，因为观看这个女孩所需要的钱很少，还可以提问任何问题，更主要的是这个女孩的经过所具有的教育作用与普遍的思想相吻合。从中我们可以看出，旧的思想体系已经根深蒂固。接受它所需要的代价少，所能解释的问题多。这种思想迎合了大众的传统思维和价值观念，必将赢得更多的观众。正因为如此，统治阶级无需为文明的传递担忧，因为无论何时何地，旧的思想总是会一触即发，因此「贡萨加神父也彻底治好了他的失眠症」，人们又回归到了天使降临之前的状态。&lt;/p>
&lt;p>然而，贝托约和埃丽森达是不会忘记天使的存在的。他们就如同文明的传播者，或者他们算不上传播者，只是碰巧接受了文明的存在并带给了其他人的发现者。与虔诚的传教士不同，他们并没有努力的让他人接受「天使」，甚至他们自己也并不理解「天使」存在的意义。他们只知道利用「他」，获得了利益来完善自己原本的生活。在这个原本的生活中，思想没有变化，价值观也没有变化，新生的孩子甚至也是旧思想的沿袭者。在这样的生活中，连天使也得了水痘这个凡人的病。文明没有在思想上影响他们，却连自身也受到旧体系旧思想的传染。在自身逐渐被同化的过程中，天使在虚弱，文明在消亡。或许贝拉约夫妇在内心深处也意识到了「天使」的不可消亡性，然而当他们试图做挽留他生命的举动：「用一床被子把他裹起来，仁慈地把他带到棚屋里去睡」时，才发现「老人睡在暖屋里过夜时整宿地发呻吟声，毫无挪威老人的乐趣可言」。作为「文明」的发现者，无法接受文明并使其存活在旧的思想中无异于判定了文明的死刑。&lt;/p>
&lt;p>然而，&lt;em class="emphasis-point">文明终究是不会彻底消亡的&lt;/em>，&lt;em class="emphasis-point">它终将丰满自己的双翅&lt;/em>，&lt;em class="emphasis-point">飞向需要他的地方&lt;/em>。「埃丽森达眼看着他用他那兀鹰的翅膀扇动着，飞过最后一排房子的上空。她放心地舒了一口气，为了她自己，也是为了他。」当生活中的障碍物消逝的那一刻，埃丽森达作为他的发现者长舒了一口气，她的内心或许希望他在其他地方被人所接纳，这个曾经带给她财富和忧愁的「文明」的种子，现在已经「是水天相交处的虚点」，变同了一个遥远的梦，又或者是水与天融合的契机。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/Gabriel_Garc%C3%ADa_M%C3%A1rquez" target="_blank" rel="noopener">Gabriel García Márquez | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/old-man-with-enormous-wings/" target="_blank" rel="noopener">https://guanqr.com/life/books/old-man-with-enormous-wings/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/magical-realism/">魔幻现实</category><category domain="https://guanqr.com/tags/novel/">小说</category></item><item><title>
真假马丁</title><link>https://guanqr.com/life/books/the-return-of-martin-guerre/</link><guid isPermaLink="true">https://guanqr.com/life/books/the-return-of-martin-guerre/</guid><pubDate>Mon, 27 May 2019 16:52:56 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/le-retour-de-martin-guerre.jpg" alt="le-retour-de-martin-guerre.jpg">&lt;span class="caption">※ 马丁·盖尔归来&lt;/span>&lt;/p>
&lt;p style="text-indent:0">&lt;span class="drop-cap">这&lt;/span>是迄今为止对这个独特故事的最细致的描述。娜塔莉·戴维斯建构了一部社会史杰作，我们由此可以看到那些不懂读写、因而也没有留下记载的 16 世纪农民的生活。&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;/p>
&lt;h2 id="内容概述">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#内容概述" class="anchor-link" aria-label="内容概述">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>内容概述&lt;/h2>
&lt;p>十六世纪中期法国南部的朗格多克，一位名叫马丁·盖尔的富裕农民抛弃了自己的家人和家产，离家出走，从此杳无音信。后来，一位名叫阿诺·迪蒂尔的人到处打听马丁·盖尔的成长经历及家人的事，并冒名顶替了他，并和马丁·盖尔的妻子一起度过了三四年美满的婚姻生活。然而，因为财产继承的问题，这位假马丁与叔叔皮埃尔发生了争执，皮埃尔也因此怀疑他的身份。贝朗特将这个假马丁告上了法庭，但假马丁巧舌如簧，凭借自己超人的记忆力与口才，让法庭找不到任何可以指控他的证据，就在陷入僵局，法庭即将宣判眼前这个假马丁就是真正的马丁的时候，真马丁出现了。最终法庭判处阿诺·迪蒂尔死刑。&lt;/p>
&lt;p>后现代史学的倡导者安克斯密特将《马丁·盖尔归来》这部著作与勒华拉杜里的《蒙塔尤》、金兹堡的《奶酪与虫子》和杜比的《布文的传说》一道，称为「后现代历史编纂学」的代表作。&lt;/p>
&lt;h2 id="作者简介">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#作者简介" class="anchor-link" aria-label="作者简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作者简介&lt;/h2>
&lt;p>&lt;sup style="float:right" id="fnref:3">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/natalie-zemon-davis.jpg" alt="natalie-zemon-davis.jpg">&lt;span class="caption">※ 娜塔莉·泽蒙·戴维斯&lt;/span>&lt;/p>
&lt;p>这部著作的作者是娜塔莉·泽蒙·戴维斯。她出生于一个富裕的犹太家庭，年轻时她十分叛逆，充满个性，十九岁时不顾家庭反对与恋人私奔。她在生养三个孩子的同时获得了密歇根大学的博士学位，先后在多伦多大学政治经济系和历史系任教，一九七一年被聘为伯克利加州大学历史系教授，接触到了让·德克拉斯的著作，她先是作为顾问参与了《马丁·盖尔归来》电影的制作，然后在进一步研究的基础上，完成了同名著作。戴维斯早期从事社会史研究，后来开始研究社会文化学，后期在历史编纂学方面进行民族志、微观史学、历史叙事的实践。&lt;/p>
&lt;h2 id="文章分析">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#文章分析" class="anchor-link" aria-label="文章分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>文章分析&lt;/h2>
&lt;h3 id="情节分析">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#情节分析" class="anchor-link" aria-label="情节分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>情节分析&lt;/h3>
&lt;p>这则故事中有几个片段给我留下了深刻的印象。首先就是马丁在与贝特朗结婚后，由于自身的生殖问题没有能够生下孩子，贝朗特的家人都希望他能与马丁离婚。当她幸运地生下一个儿子时，马丁却早已抛下家人消失得无影无踪。这些对于当地人来说，都是丑闻，都是十分丢人的事。当时人们普遍认为：「在丈夫不在场的情况下，不管多少岁月流逝，妻子都没有再婚的自由，除非她握有他死亡的某些证据。」查士丁尼法中也有「在丈夫不在场期间，妻子不可再婚，除非他握有他死亡的证据，即使他离开超过二十年也不行。死亡必须由证人提供证明，她必须提供确凿的作证书，或是重要和显然的推断。」由此可见，当时阿尔蒂加女性在社会中的地位十分低下。他们年少的时候就要学习织布等技能，被送去服侍其他人家，或是每天在家中做家务，体验不到自由的欢乐，并且早早地出嫁。当地的继承人总是男性子嗣，取名随父。在马丁出走后，贝特朗的处境十分尴尬，她既不算是妻子，也不是寡妇，她没有自主权，没有再婚的可能。&lt;/p>
&lt;p>第二个片段就是文中讲述辨认一个人的身份十分艰难。马丁与阿诺两人外貌酷似，十六世纪时，普普通通的农民不会有什么画像，照片，也不会书写文字，想要辨认一个人只有凭借自己对这个人仅有的记忆。而记忆也会随着时间的流逝而渐渐模糊。因此，阿诺凭借自己非凡的记忆力和缜密的思维，尽力回忆起马丁过去生活的点点滴滴，这让村民们相信他确实是真正的马丁。&lt;/p>
&lt;p>第三个片段是贝朗特最初察觉到对方是假马丁后，却没有揭破他的面具，而是继续与他生活。若不是叔叔将他揭发，她依然会和他生活在一起。在起诉之时，贝朗特是十分不情愿的，是对这个假马丁十分袒护的。究其原因，正是因为真马丁抛弃了她，她感受不到真马丁的爱，她只能处在一个十分尴尬的地位。而阿诺在她正处于困境的时候出现，他给了她需要的爱与呵护。如果阿诺被判刑，贝朗特就会回到最初那种孤独与迷茫之中。&lt;/p>
&lt;h3 id="手法分析">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#手法分析" class="anchor-link" aria-label="手法分析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>手法分析&lt;/h3>
&lt;p>《马丁·盖尔归来》中并没有描绘多么宏大的历史场面，而是通过一个村庄，描述了过去的商业、婚姻、法律等方面的信息。在阅读中，我每时每刻都感受到了文中所描绘的当时的社会情景，大量细节的刻画丰富了故事的内涵。由一个村庄，讲述了一个时代。作者戴维斯运用了历史学与人类学相结合的研究方法，既有历史学的叙述与考证，又采用了人类学实地调查的方法。作者首先参与了同名电影的制作，通过电影参与了微观史学的实践当中。她通过自己对历史事件的解读，通过一些事件的细节，进行推理和探索，大胆猜想，在文中增添了自己对故事的延伸。作者也说过，「有一部分是我的虚构，但仍受到过去的声音的严格考验」。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>马丁·盖尔是一个自卑，不负责任的人，而阿诺·迪蒂尔却聪明，对贝特朗真心呵护。如果最终真正的马丁没有回来，阿诺或许会和贝朗特继续生活下去，他们之间拥有真正的爱情。但他回来了，将阿诺送上了死亡之路。伦理情感屈从于法律理性。这可以说是一种悲剧。&lt;/p>
&lt;p>真假马丁的故事再这么长的时间里反反复复被人们议论，并引起人文主义者的浓厚兴趣。这个故事中涉及了三个讲述故事的人：写下《难忘的判决》的法官让·科拉斯、著有《图卢兹冒牌马丁的奇妙故事》的纪尧姆·勒叙厄尔、写下《论瘸子》的米歇尔·德·蒙田。这三位来自不同职业，拥有不同的社会地位，但他们都属于人文主义者。他们表现出了对社会下层普通群众的关注与同情。尽管当时社会等级分明，农民和政治生活似乎并没有联系，但那些人文主义者确确实实表现出来了对他们的关注。作者以一个小村庄的故事对一个时代的社会状况进行分析，以小见大，是微观史学研究的典范之作。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/The_Return_of_Martin_Guerre" target="_blank" rel="noopener">&lt;em>The Return of Martin Guerre&lt;/em> | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>来源：琼·斯特劳斯，《新闻周刊》&amp;#160;&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/Natalie_Zemon_Davis" target="_blank" rel="noopener">Natalie Zemon Davis | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/the-return-of-martin-guerre/" target="_blank" rel="noopener">https://guanqr.com/life/books/the-return-of-martin-guerre/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/novel/">小说</category></item><item><title>
学长组：责任与担当</title><link>https://guanqr.com/life/school/the-responsibility-of-sophomore/</link><guid isPermaLink="true">https://guanqr.com/life/school/the-responsibility-of-sophomore/</guid><pubDate>Wed, 22 May 2019 00:47:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">学&lt;/span>长组是刚进入大学的新生们的领路人，学长组的身份，让你承担起了更多的责任。引导新生熟悉校园与同学，安排新生始业教育，帮助新生选课与学业辅导。我承认，我的能力有限，可能在某些方面没有做到最好，但也很知足了。转眼间，学长组的工作马上就要满一年了。前些日子选拔新一届的学长组成员，我带领的班中有十个人报名，甚是欣慰。回首再看这一篇我在去年迎新生时写的文章，感慨颇多。&lt;/p>
&lt;h2 id="前言">&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/#前言" class="anchor-link" aria-label="前言">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前言&lt;/h2>
&lt;p>学长组迎新工作接近尾声，总算能稍稍休息几天了。提前二十多天返校，要开那么多无聊的会议，每天早上六点起床，晚上十二点多入睡，每天很累很累。尽管嘴上说累，但心里还是觉得很满足的。我觉得，我如果回家，说是见见父母，其实还是每天在卧室里打游戏。这样还不如多参加些活动。正如大家所见，这个暑假，我参加了三项活动：赴日本交流学习、赴嘉兴南湖及杭州余杭中泰乡双联村调研、云峰学长组工作。我觉得这可以称得上是这些年来我过得最充实的一个暑假了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/sophomore-0.jpg" alt="sophomore-0.jpg">&lt;span class="caption">※ 云峰学长组&lt;/span>&lt;/p>
&lt;h2 id="报名学长组">&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/#报名学长组" class="anchor-link" aria-label="报名学长组">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>报名学长组&lt;/h2>
&lt;p>2017 年 8 月，刚入学的时候，带领我们进行新生始业教育的是几位幽默风趣的学长，那时候我们班主任在外地出差，他们就替代班主任为我们开班会，破冰。我对这份工作便有了期待。我想要在明年带领新生，帮助他们度过由高中到大学的适应阶段。&lt;/p>
&lt;p>我记得学长组报名的时候是今年 4 月份，当时怂恿同学一起报名，他们拒绝了，理由是想多在家待着，玩一玩游戏什么的，不想承担这样那样的责任。其实我也挺犹豫的。我这人本来就爱紧张，面试经验少，学习成绩也一般般，还不是团员，我担心面试的时候会心态爆炸。后来等到 5 月份面试的时候，我才知道我们班有五个人报名，三女两男，我觉得他们表现的能力都比我要强很多，特别是在无领导小组讨论环节，我基本插不上话。可出乎我意料的是，最后公布面试结果的时候，我没有被刷下来，我们班那一个男生被刷掉了，我觉得可能是面试官感觉他的书面介绍很敷衍。这时候我的心情，那种喜悦难以言表。最终带领工信 1820 班的学长组中，四女一男，有一个女生是工信 1721 班调来的。我，唯一的男生，自然被当上了组长，毕竟组长就是背锅用的。&lt;/p>
&lt;p>5、6 月份的时候，我们辅导员问我，是否想帮助天津本科招生组的老师工作，我脑子一热，加上抽风，便同意了。这位招生组的老师就是控制学院的团委书记，研究生辅导员，他是我们军训连队指导员，是耀华中学毕业的，我们第一次见面是在我刚入学参加的天津新生见面会上。谁知道，招生组的任务有很多，每周都要开会议，在网上搜数据，发推文。那时候正好快到期末考试了，我还要应付期末考试。等到高考后，招生办老师让我去天津南开大学进行招生宣传，我拒绝了，因为马上面临期末考试，学业还是第一位的。&lt;/p>
&lt;h2 id="前期准备">&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/#前期准备" class="anchor-link" aria-label="前期准备">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>前期准备&lt;/h2>
&lt;p>上学期期末，我们学长组在小剧场进行了一场基础培训，主要讲了18 级新生的专业培养方案的变化，以及课程改革，选课方法等等。等到 8 月 20 日，我作为组长，参加了云峰学园的班主任培训大会，以及学长组工作指导。这一天，我第一次见到工信 1820 班的班主任以及辅导员老师。班主任是个东北汉子，感觉很靠谱。在学长组工作辅导之后，我领取了班牌以及学长组的工作服。21 日的时候，我作为组长又参加了一个培训，内容是新生的心理辅导。&lt;/p>
&lt;h2 id="迎新开始">&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/#迎新开始" class="anchor-link" aria-label="迎新开始">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>迎新开始&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/sophomore-1.jpg" alt="sophomore-1.jpg">&lt;span class="caption">※ 迎新开始&lt;/span>&lt;/p>
&lt;p>等到 22 日、23 日迎新的时候，我们组很不幸地分配到了在碧峰3、4、5 舍最早的一班站岗，以及在校门口倒数第二晚的站岗的任务。早晨六点起床，没吃早饭，等到值班时间，匆忙下楼，站在太阳底下，引导新生办理入住手续。这一站就是两个小时。看到新生的父母背着大包小包来到学校，脸上洋溢着幸福的笑容，我也回想起我刚来报到时候的情景。一切都是这么的熟悉。我们拿到新生分班表之后，便迅速地拉新生进入班群，几经周折，终于将全部新生拉进了班群。&lt;/p>
&lt;p>在这期间有一个小插曲。第一次分班表出来的时候，宿管中心那里出现了分班失误，每个班总有一间女生寝室中有一名其他班的同学。我们班便有这样一名女生。他的父亲急忙联系到我，他想要自己的女儿和班里的同学住到同一间宿舍。其实这样做没什么真正意义，因为行政班只是方便人员管理，真正关系好的人还是在同一个宿舍里的人。但正好我带领的这个班有一名三位一体的女生转到了香港大学。我便向这位家长说，可以到白沙宿管中心问一问。也许是因为想要换宿舍的人太多，宿管中心也发现了分班失误，便更换了分班名单。这名同学最终分到了工信 1819 班。&lt;/p>
&lt;p>由于有很多人向云峰学业指导中心的工作人员提意见，晚上的站岗也就取消了。然而他们不用站岗了，我却遇到了很麻烦的事。23 日晚上要开各省份新生见面会，原本天津地区见面会是杨亮老师主持，但由于他要参加军训指导员会议，就把这个担子交给了我和李乐宜。那一天真的很忙很忙，早饭晚饭都没有来得及吃，在见面会开始的前 30 分钟，我还参加了光电学院的学长组会议。还是要感谢李乐宜，我没时间准备讲稿，那场见面会是靠他撑住了场子。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/sophomore-2.jpg" alt="sophomore-2.jpg">&lt;span class="caption">※ 竞选班委&lt;/span>&lt;/p>
&lt;p>24 日破冰、协助班主任进行班团委组建、开学典礼。25 日选课指导、带领新生体检、入学教育报告。26 日参观校史馆、办理银行卡、入学教育报告，27 日云峰学园新生见面会，郑强教授报告……每天都要时刻关注着上级最新的通知，然后整理信息发给班群，一天当中最轻松的时候可能就是晚上 12 点，躺在床上，看一看手机。&lt;/p>
&lt;p>26 日晚上，听完报告，我们带领同学们到校外吃烧烤，这是浙大的传统 BG 活动，每一年都要由学长请客吃烧烤。同学们似乎是期待了很久，我看到他们在空间上发着很开心的说说。我们在餐桌上做了去年学长组带我们做的刺激小游戏，这注定是难忘的一个晚上。大家都渐渐地熟悉起来，班长也在班中树立起了威望，我们的迎新工作，随着新生军训的开始而结束了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/sophomore-3.jpg" alt="sophomore-3.jpg">&lt;span class="caption">※ 夜晚吃烧烤&lt;/span>&lt;/p>
&lt;p>这些天的工作很累，却很满足，这也算是一种享受吧，享受着充实的生活，带有责任的生活。&lt;/p>
&lt;h2 id="未完待续">&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/#未完待续" class="anchor-link" aria-label="未完待续">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>未完待续&lt;/h2>
&lt;p>迎新结束了，但学长组的工作还未结束。学长组的工作时间是一年，在这一年中，我希望 18 级的同学有不懂的问题就向学长组提问，我们会热情地进行解答。我也希望，等到明年，18 级的各位也能积极参加学长组的工作，这是一份传承，让这一份责任与热情继续传递下去。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/the-responsibility-of-sophomore/" target="_blank" rel="noopener">https://guanqr.com/life/school/the-responsibility-of-sophomore/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/youth/">青春</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
光学玻璃色散的应用</title><link>https://guanqr.com/tech/optics/dispersion-of-glass/</link><guid isPermaLink="true">https://guanqr.com/tech/optics/dispersion-of-glass/</guid><pubDate>Sat, 18 May 2019 08:07:15 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">提&lt;/span>到「色散」，我们最先想到的就是雨后的彩虹。色散可以利用棱镜或光栅等作用为色散系统的仪器来实现。最常见的就是太阳光通过三棱镜后，产生自红到紫循序排列的彩色连续光谱。那么我们能通过光的色散这一现象做什么呢？这篇文章主要讲述如何通过光学玻璃的色散，测量玻璃的折射率，以及分光计这一在几何光学实验中常用到的仪器的使用方法。&lt;/p>
&lt;h2 id="关于色散">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#关于色散" class="anchor-link" aria-label="关于色散">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:关于色散" class="headings">关于色散&lt;/a>&lt;/h2>
&lt;p>当一束白光入射三棱镜，由于不同的色光有不同的折射率，根据折射定律，它们的偏折角各不相同，在棱镜的后面就形成一条彩色的谱带，这种现象称为色散。在光学系统中，大部分的光学元件是由光学玻璃制成的，透射材料一般以弗朗和费特征谱线的折射率来表示折射特性。我国以 $D$ 光（$\lambda=589.29nm$，钠黄线）折射率 $n_D$ 来作为光学玻璃的平均折射率。$F$ 光（$\lambda=486.13nm$，氢蓝线）和 $C$ 光（$\lambda=656.27nm$，氢红线）位于人眼灵敏光谱的两端，故将 $n_F-n_C$ 称为平均色散。&lt;/p>
&lt;p>阿贝数表征了光学玻璃的色散程度，也称为平均色散系数，它定义如下：&lt;/p>
&lt;div>
$$
V_D=\frac{n_D-1}{n_F-n_C}
$$
&lt;/div>
&lt;p>&lt;img src="https://guanqr.com/images/cdgmgd-ndvd.jpg" alt="cdgmgd-ndvd.jpg">&lt;span class="caption">※ 图 1：成都光明公司 nD-vD 图&lt;/span>&lt;/p>
&lt;p>表征光学玻璃性能的参数有很多，但最重要的两个参数是折射率和阿贝数。根据阿贝数的定义可以知道，阿贝数越大，色散程度越小；阿贝数越小，色散程度越大。在中国，一般根据阿贝数的大小可以将光学玻璃分为两大类，低折射率、低色散的冕牌玻璃（$K$）和高折射率、高色散的火石玻璃（$F$）。图 1 是成都光明公司生产的光学玻璃的 $n_D-v_D$ 图，从中可看到大多数玻璃符合随着折射率增大，阿贝数减小，色散增大的变化规律。&lt;/p>
&lt;p>经典的色散理论证明，在可见光范围内无色透明的物质，它们的色散曲线形式上很相似。图 2 是 3 种光学玻璃的色散曲线，在 $365.01nm\sim 2000nm$ 范围内，随波长增加，折射率下降，这个现象称为正常色散。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/dispersion-curve.png" alt="dispersion-curve,png">&lt;span class="caption">※ 图 2：3 种透明光学玻璃的色散曲线&lt;/span>&lt;/p>
&lt;p>材料的色散现象是原子和分子相互作用的宏观表现，根据经典的电偶振子受迫振动模型可以推导出描述正常色散现象色散公式，比如哈特曼公式，柯西公式，塞耳迈耶尔公式。其中，我国对于光学玻璃色散的描述采用柯西公式：&lt;/p>
&lt;div>
$$
n^2(\lambda)=A_0+A_1\lambda^2+A_2\lambda^{-2}+A_3\lambda^{-4}+A_4\lambda^{-6}+A_5\lambda^{-8}
$$
&lt;/div>
&lt;p>系数 $A_0$，$A_1$，$A_2$，$A_3$，$A_4$，$A_5$ 可以通过曲线拟合或查询光学玻璃目录后获得。&lt;/p>
&lt;p>从柯西公式可以看出折射率 $n$ 是光波波长 $\lambda$ 的函数，选用不同波长光波照射三棱镜，测出与波长对应的最小偏向角，计算相应的折射率值，代入柯西公式算出各系数，就可以绘制色散曲线了。&lt;/p>
&lt;h2 id="折射率的测量方法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#折射率的测量方法" class="anchor-link" aria-label="折射率的测量方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:折射率的测量方法" class="headings">折射率的测量方法&lt;/a>&lt;/h2>
&lt;h3 id="v-棱镜法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#v-棱镜法" class="anchor-link" aria-label="v-棱镜法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:v-棱镜法" class="headings">V 棱镜法&lt;/a>&lt;/h3>
&lt;p>V 棱镜是由两块材料完全相同并已知折射率为 $n_0$ 的直角等腰棱镜胶合而成，经细磨为 $90$ 度的待测玻璃试样放入 V 形缺口中，加浸液后可以进行测量。当一束单色平行光垂直入射 V 棱镜后，若被测试样的折射率与 V 棱镜折射率相同，光线将不偏折地通过 V 棱镜；若被测试样折射率 $n$ 与 V 棱镜折射率 $n_0$ 有差别，光线将遵循折射定律发生偏折（图 3）。设出射光线与入射光线的夹角为 $\theta$ 时，可以推导出 $\theta$ 与 $n$ 之间的关系为：&lt;/p>
&lt;div>
$$
n=\sqrt{n_0^2\pm\sin\theta\sqrt{n_0^2-\sin^2\theta}}
$$
&lt;/div>
&lt;p>$n&amp;gt;n_0$ 时，$\theta$ 为正数值；反之为负数值。所以只要测出偏折角 $\theta$ ，即可计算被测玻璃的折射率。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-method-of-v-prism.png" alt="the-method-of-v-prism.png">&lt;span class="caption">※ 图 3：V 棱镜法原理图&lt;/span>&lt;/p>
&lt;h3 id="全反射法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#全反射法" class="anchor-link" aria-label="全反射法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:全反射法" class="headings">全反射法&lt;/a>&lt;/h3>
&lt;p>图 4 中光束 $1$ 沿 $BA$ 从光密介质（折射率 $n_1$）掠入射进入光疏介质（折射率 $n$）后，以全反射临界角 $\alpha$ 进入折射棱镜，再以折射角 $i$ 从 $AC$ 面出射，出射光束记为 $1'$。以此为界，所有入射角小于 $90$ 度的光束经 $AB$ 面折射后，折射角均小于 $\alpha$，再由 $AC$ 面出射至空气时均位于出射光束 $1'$ 的下方。若用望远镜去观察出射光束，则会看到亮暗分明的视场。根据折射定律及三角形关系可以推导出相应的计算公式计算介质的折射率 $n$。这种方法可以测量液体、固体的折射率。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-method-of-total-reflection.png" alt="the-method-of-total-reflection.png">&lt;span class="caption">※ 图 4：全反射法原理图&lt;/span>&lt;/p>
&lt;h3 id="最小偏向角法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#最小偏向角法" class="anchor-link" aria-label="最小偏向角法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:最小偏向角法" class="headings">最小偏向角法&lt;/a>&lt;/h3>
&lt;p>当光束 $a$ 以角度 $i_1$ 从 $AB$ 面入射，经棱镜两次折射后以角度 $i_4$ 从 $AC$ 面出射，成为光束 $b$。经棱镜两次折射，光线传播方向总的变化可用光束 $a$ 和光束 $b$ 延长线的夹角 $\delta$ 来表示，$\delta$ 即为偏向角（图 5）。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/the-angle-of-deviation-in-triangular-prism.png" alt="the-angle-of-deviation-in-triangular-prism.png">&lt;span class="caption">※ 图 5：三棱镜偏向角示意图&lt;/span>&lt;/p>
&lt;p>由图 5 可得：&lt;/p>
&lt;div>
$$
\delta=(i_1-i_2)+(i_4-i_3)\tag{1}
$$
&lt;/div>
&lt;div>
$$
A+\delta=i_1-i_4\tag{2}
$$
&lt;/div>
&lt;p>根据折射定律的公式及和差化积以及 $(1)(2)$ 式可得：&lt;/p>
&lt;div>
$$
\sin(\frac{A+\delta}{2})=n\sin\frac{\delta}{2}\cdot\frac{\cos\frac{i_2+i_3}{2}}{\cos\frac{i_1+i_2}{2}}\tag{3}
$$
&lt;/div>
&lt;p>$(3)$ 式说明，当顶角 $A$ 和折射率 $n$ 已定，偏向角 $\delta$ 是 $i_1$ 的函数。&lt;/p>
&lt;p>为了求 $delta$ 极值，把 $(2)$ 式对 $i_1$ 进行微分：&lt;/p>
&lt;div>
$$
\frac{d\delta}{di_1}=1-\frac{di_4}{di_1}\tag{4}
$$
&lt;/div>
&lt;p>对两个面的折射定律表达式进行微分并相除，当 $\frac{d\delta}{di_1}=0$ 时，偏角 $\delta$ 有极值：&lt;/p>
&lt;div>
$$
\frac{\cos{i_1}}{cos{i_2}}=\frac{\cos{i_4}}{cos{i_3}}\tag{5}
$$
&lt;/div>
&lt;p>按照折射定律，$(5)$ 式只有 $i_1=-i_4$ 和 $i_2=-i_3$ 才成立，此时入射和出射光线对称于棱镜。&lt;/p>
&lt;p>由二阶导数可以证明，此时 $\delta$ 是最小值，$A$ 和 $n$ 的关系式为 $\sin[(A+\delta_{min})/2]=n\sin(A/2)$，只要用分光计测出 $A$ 和 $\delta$ 就可以算出 $n$。&lt;/p>
&lt;h2 id="分光计的使用">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#分光计的使用" class="anchor-link" aria-label="分光计的使用">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:分光计的使用" class="headings">分光计的使用&lt;/a>&lt;/h2>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>分光计的使用应该是大学物理课程中必做的实验，仪器校准较为繁琐。&lt;/p>&lt;/div>
&lt;p>分光计（图 6）由自准直望远镜 $T$，载物台 $S$，度盘 $\pi$，游标盘 $H$ 和平行光管 $K$ 组成。其中，望远镜通过支臂与度盘连接在一起。望远镜、游标盘、载物台可分别绕底座的垂轴旋转，转过的角度由游标盘和度盘读出（游标精度为 $1'$，度盘格值为 $30'$）。螺钉 1 位于望远镜及平行光管正下方，调整螺钉 1 可让望远镜和平行光管在子午面内上下转动，螺钉 2 则可改变二者水平方向的角度。锁紧螺钉 4 后，调整螺钉 3 可让望远镜绕垂轴转动。调整螺钉 5 可改变载物台的倾角，锁紧螺钉 6 可以让载物台与转轴连动，狭缝的宽度由螺钉 9 来调整。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/spectrometer.png" alt="spectrometer.png">&lt;span class="caption">※ 图 6：分光计示意图&lt;/span>&lt;/p>
&lt;ul>
&lt;li>螺钉 1：使望远镜和平行光管在子午面（图面）内作微小转动，使两光轴在子午内重合；&lt;/li>
&lt;li>螺钉 2：望远镜和平行光管的光轴水平倾角调整螺钉；&lt;/li>
&lt;li>螺钉 3：望远镜转角微调螺钉；&lt;/li>
&lt;li>螺钉 4：望远镜锁紧螺钉；&lt;/li>
&lt;li>螺钉 5：载物台下方的倾角调整螺钉；&lt;/li>
&lt;li>螺钉 6：载物台锁紧螺钉；&lt;/li>
&lt;li>螺钉 7：游标盘微调螺钉；&lt;/li>
&lt;li>螺钉 8：游标盘锁紧螺钉；&lt;/li>
&lt;li>螺钉 9：狭缝宽度调整螺钉。&lt;/li>
&lt;/ul>
&lt;h3 id="仪器校准">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#仪器校准" class="anchor-link" aria-label="仪器校准">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:仪器校准" class="headings">仪器校准&lt;/a>&lt;/h3>
&lt;h4 id="望远镜目镜调整">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#望远镜目镜调整" class="anchor-link" aria-label="望远镜目镜调整">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:望远镜目镜调整" class="headings">望远镜目镜调整&lt;/a>&lt;/h4>
&lt;p>目视光学仪器一般都需要视度调整，它的目的是让黑色的叉丝分划板位于目镜前焦面。调整方法：旋转目镜，改变目镜至分化板的间距，直至看清目镜前焦面的叉丝分划板。&lt;/p>
&lt;h4 id="望远镜调焦至无穷远">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#望远镜调焦至无穷远" class="anchor-link" aria-label="望远镜调焦至无穷远">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:望远镜调焦至无穷远" class="headings">望远镜调焦至无穷远&lt;/a>&lt;/h4>
&lt;p>调整方法：将平行平板放置在载物台上；转动望远镜，让望远镜大致对准平行平板的一个抛光面；观察由平行平板反射回来的绿色小叉丝是否清晰，若反射像清晰，说明望远镜的物镜和目镜的焦面已经重合；若反射像模糊，则松开望远镜镜筒上方的锁紧螺钉，前后抽动目镜，改变目镜和物镜间距，直至反射叉丝清晰。&lt;/p>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>平行平板是一种由两个相互平行的折射面构成的光学器件，平行度是它面型的一个重要参数。&lt;/p>&lt;/div>
&lt;h4 id="望远镜光轴与载物台转轴的校正">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#望远镜光轴与载物台转轴的校正" class="anchor-link" aria-label="望远镜光轴与载物台转轴的校正">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:望远镜光轴与载物台转轴的校正" class="headings">望远镜光轴与载物台转轴的校正&lt;/a>&lt;/h4>
&lt;h5 id="平行平板的放置">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#平行平板的放置" class="anchor-link" aria-label="平行平板的放置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:平行平板的放置" class="headings">平行平板的放置&lt;/a>&lt;/h5>
&lt;p>图 7 为用平行平板校正望远镜光轴与载物台转轴时的一种放置方法。图中 $A$、$B$、$C$ 分别为载物台下方的倾角调整螺钉，此时平行平板 $a$，$b$ 两个面与载物台下方两个螺钉连线垂直。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/placement-of-parallel-plates.png" alt="placement-of-parallel-plates.png">&lt;span class="caption">※ 图 7：平行平板放置方法示意图&lt;/span>&lt;/p>
&lt;h5 id="调整望远镜光轴使其与度盘转轴正交">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#调整望远镜光轴使其与度盘转轴正交" class="anchor-link" aria-label="调整望远镜光轴使其与度盘转轴正交">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:调整望远镜光轴使其与度盘转轴正交" class="headings">调整望远镜光轴使其与度盘转轴正交&lt;/a>&lt;/h5>
&lt;p>粗调望远镜及载物台，目测望远镜及载物台调至水平，即两个面都能看到反射像。然后转动载物台（灰盘），用 $1/2$ 修正法&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>校正望远镜及载物台倾角，使其反射像位于上叉丝（图 8）。&lt;/p>
&lt;p>$a$ 面调好后，载物台转 $180$ 度用同样的办法调整 $b$ 面，直至两面的反射像均位于上叉丝。再将平行平板旋转 $90$ 度，用同样的方法调整望远镜及载物台倾角使得无论平行平板哪一个面正对望远镜，反射的叉丝像均与原物对称。此时，望远镜瞄准轴与度盘旋转轴已垂直。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/correction-method-a-half.png" alt="correction-method-a-half.png">&lt;span class="caption">※ 图 8：1/2 修正法示意图&lt;/span>&lt;/p>
&lt;h5 id="平行光管的校准">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#平行光管的校准" class="anchor-link" aria-label="平行光管的校准">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:平行光管的校准" class="headings">平行光管的校准&lt;/a>&lt;/h5>
&lt;p>平行光管的调整部分需要用到低压汞灯，打开低压汞灯并预热 $10$ 分钟，等它稳定后通过望远镜观察狭缝是否清晰、竖直，若不清晰，松开锁紧螺钉，前后移动狭缝，直至通过目镜能看到清晰狭缝像，并转动狭缝，使得狭缝竖直（图 9）。&lt;/p>
&lt;p>为了让平行光管与望远镜共轴，需要调节平行光管的俯仰，使狭缝像位于视场中央。为了便于观察，狭缝像的宽度应调节到约纵丝宽度的 $3$ 倍。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/collimator-calibration.png" alt="collimator-calibration.png">&lt;span class="caption">※ 图 9：平行光管校准效果示意图&lt;/span>&lt;/p>
&lt;h5 id="调整棱镜抛光面法线与望远镜光轴平行">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#调整棱镜抛光面法线与望远镜光轴平行" class="anchor-link" aria-label="调整棱镜抛光面法线与望远镜光轴平行">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:调整棱镜抛光面法线与望远镜光轴平行" class="headings">调整棱镜抛光面法线与望远镜光轴平行&lt;/a>&lt;/h5>
&lt;p>调整棱镜抛光面与望远镜光轴正交时，应以望远镜光轴为基准，调整载物台下方的螺钉 1 到螺钉 3。如图 10 所示，三棱镜的三个顶角 $A$、$B$、$C$ 分别位于载物台下两螺钉连线的中点，且 $AB$ 和 $AC$ 为棱镜的抛光面。当 $AB$ 面对准望远镜时，若反射叉丝偏离上叉丝，通过螺钉 1 和螺钉 3 来进行 $1/2$ 修正；当 $AC$ 面对准望远镜时，若反射叉丝偏离上叉丝，通过螺钉 2 和螺钉 3 来进行 $1/2$ 修正。反复调整，使两工作面的反射像均位于上叉丝。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/prism-placed-symmetrically.png" alt="prism-placed-symmetrically.png">&lt;span class="caption">※ 图 10：三棱镜对称放置示意图&lt;/span>&lt;/p>
&lt;h3 id="分光计读数">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#分光计读数" class="anchor-link" aria-label="分光计读数">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:分光计读数" class="headings">分光计读数&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/reading-of-spectrometer.png" alt="reading-of-spectrometer.png">&lt;span class="caption">※ 图 11：分光计读数&lt;/span>&lt;/p>
&lt;p>为了消除偏心误差，分光计游标盘上设有两个读数窗口 $A$、$B$，测量时应取角度值为：&lt;/p>
&lt;div>
$$
N = \frac{A+B-180^{\circ}}{2}
$$
&lt;/div>
&lt;p>在读数时可以根据需要做 $\pm360^{\circ}$ 处理。一般来说，测量时主刻度盘沿顺时针方向，若有过零点的情况，在计算转过的角度时，则需要做 $\pm360^{\circ}$ 处理。&lt;/p>
&lt;hr>
&lt;p class="note-info">
判断棱镜抛光面与自准直望远镜的光轴垂直的方法
&lt;/p>
&lt;p>此时，由于望远镜已经过平行平板的自准直校正，望远镜的绿色发光十字叉丝正位于物镜前焦面（即分划板位置）上，当棱镜抛光面 $AB$ 或 $AC$ 垂直于望远镜光轴时，绿色发光十字叉丝经物镜发出的平行光被棱镜抛光面反射回来的光仍为平行光，经物镜所成的绿色叉丝像与绿色叉丝物应上下对称地呈在物镜前焦面上，即自准直法。如下图所示：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/autocollimation-method.png" alt="autocollimation-method.png">&lt;span class="caption">※ 图 12：自准直法&lt;/span>&lt;/p>
&lt;h2 id="三棱镜顶角的测量方法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#三棱镜顶角的测量方法" class="anchor-link" aria-label="三棱镜顶角的测量方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:三棱镜顶角的测量方法" class="headings">三棱镜顶角的测量方法&lt;/a>&lt;/h2>
&lt;p>在分光计上测量棱镜顶角的方法有两种，一种是自准直法，一种是反射法。三棱镜放置方式如图 10 所示。&lt;/p>
&lt;h3 id="自准直法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#自准直法" class="anchor-link" aria-label="自准直法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:自准直法" class="headings">自准直法&lt;/a>&lt;/h3>
&lt;p>棱镜对称放置于载物台上，转动望远镜，依次使棱镜的两个抛光面与自准直望远镜的光轴垂直（棱镜抛光面相当于平面反射镜或平行平板）即自准直，如图 11 所示，望远镜两次自准直转过的角度 $\delta$，即为棱镜顶角 $\alpha$ 的补角值，即 $\alpha=180^{\circ}-\delta$。&lt;/p>
&lt;p>通过观察十字叉丝的像，转动望远镜依次瞄准三棱镜的两个抛光面 $AB$ 和 $AC$，记下两次瞄准时，分光计游标盘上 $A$ 窗和 $B$ 窗的读数值，则 $\delta=(A_1+B_1-180^{\circ})/2-(A_2+B_2-180^{\circ})/2$。若 $\delta&amp;gt;180^{\circ}$，则取 $\delta=360^{\circ}-180^{\circ}$。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/measure-point-angle-by-autocollimation-method.png" alt="measure-point-angle-by-autocollimation-method.png">&lt;span class="caption">※ 图 13：自准直法测顶角&lt;/span>&lt;/p>
&lt;h3 id="反射法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#反射法" class="anchor-link" aria-label="反射法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:反射法" class="headings">反射法&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/measure-point-angle-by-reflection-method.png" alt="measure-point-angle-by-reflection-method.png">&lt;span class="caption">※ 图 14：反射法测顶角&lt;/span>&lt;/p>
&lt;p>反射法的原理如图所示，用光源照亮狭缝，经平行光管同时被棱镜的两个抛光面 $AB$、$AC$ 反射，用望远镜依次去瞄准两个抛光面所反射的狭缝像，从度盘 $A$、$B$ 窗口读数，进而获得棱镜顶角数值。&lt;/p>
&lt;h2 id="玻璃折射率的测量">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#玻璃折射率的测量" class="anchor-link" aria-label="玻璃折射率的测量">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:玻璃折射率的测量" class="headings">玻璃折射率的测量&lt;/a>&lt;/h2>
&lt;h3 id="光源介绍">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#光源介绍" class="anchor-link" aria-label="光源介绍">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:光源介绍" class="headings">光源介绍&lt;/a>&lt;/h3>
&lt;p>低压汞灯是气体放电灯，在加电时，两电极间电场加速的电子与管内气体原子发生非弹性碰撞，使气体原子激发，受激态原子返回基态，从而发光。低压 Hg 灯和低压 Na 灯，其特征谱线（可见光范围内）如下所示&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>：&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align: center">光源&lt;/th>
&lt;th style="text-align: center">光谱线&lt;/th>
&lt;th style="text-align: center">波长（nm）&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align: center">低压 Hg 灯&lt;/td>
&lt;td style="text-align: center">汞紫线 h&lt;/td>
&lt;td style="text-align: center">404.66&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">低压 Hg 灯&lt;/td>
&lt;td style="text-align: center">汞蓝线 g&lt;/td>
&lt;td style="text-align: center">435.84&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">低压 Hg 灯&lt;/td>
&lt;td style="text-align: center">汞绿线 e&lt;/td>
&lt;td style="text-align: center">546.07&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">低压 Hg 灯&lt;/td>
&lt;td style="text-align: center">橙色双线&lt;/td>
&lt;td style="text-align: center">579.00&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align: center">低压 Na 灯&lt;/td>
&lt;td style="text-align: center">钠黄线 D&lt;/td>
&lt;td style="text-align: center">589.29&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>&lt;img src="https://guanqr.com/images/spectrum.jpg" alt="spectrum.jpg">&lt;span class="caption">※ 图 15：波谱&lt;/span>&lt;/p>
&lt;h3 id="测量方法">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#测量方法" class="anchor-link" aria-label="测量方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:测量方法" class="headings">测量方法&lt;/a>&lt;/h3>
&lt;p>调整好分光计后，选择低压 Hg 灯或低压 Na 灯光源，放置在分光计狭缝前，通过望远镜观察狭缝，此时看到明亮的狭缝，调整狭缝的宽度，使其宽度为望远镜目镜分划板上十字线线宽的三倍为宜。若狭缝不清晰或不在竖直方向，则说明前一实验中平行光管的校准未完成。&lt;/p>
&lt;p>将待测材料制成的棱镜对称地放置在分光计的载物台上，锁紧螺钉 8，以游标盘为基准测量最小偏角。转动载物台，使平行光管出射光以平行于毛玻璃面 $BC$ 的方向入射到棱镜的一个抛光面 $AB$ 上，转动望远镜，观察到狭缝的像。然后逐渐向入射角变大的方向转动载物台，则狭缝的像也连续移动，转动望远镜跟踪狭缝的像；直到最小偏角位置时，狭缝像突然停止移动，若再转动载物台则狭缝像沿与原方向相反的方向移动。记下狭缝突然停止的位置，即对应最小偏角位置，此时从度盘上用游标读取读数。&lt;/p>
&lt;p>需要注意的是，在寻找折射后的狭缝像时，因望远镜视场有限，为了能始终看到狭缝像，每当狭缝像移动到视场边缘时，望远镜也作相应的调整（松开螺钉 4）。此外，也可以先不用望远镜，而是直接用眼睛观察折射后狭缝的像，改变眼睛观察的水平角度，可以快速找到平行光管镜筒的像及镜筒里狭缝的像，在该位置再用望远镜进行观察即可。&lt;/p>
&lt;h4 id="单侧读数计算最小偏角">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#单侧读数计算最小偏角" class="anchor-link" aria-label="单侧读数计算最小偏角">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:单侧读数计算最小偏角" class="headings">单侧读数计算最小偏角&lt;/a>&lt;/h4>
&lt;p>&lt;img src="https://guanqr.com/images/unilateral-reading.png" alt="unilateral-reading.png">&lt;span class="caption">※ 图 16：单侧读数示意图&lt;/span>&lt;/p>
&lt;h4 id="双侧读数计算最小偏角">&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#双侧读数计算最小偏角" class="anchor-link" aria-label="双侧读数计算最小偏角">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#contents:双侧读数计算最小偏角" class="headings">双侧读数计算最小偏角&lt;/a>&lt;/h4>
&lt;p>以棱镜的抛光面 $AB$ 对向平行光管，测得最小偏向角位置，读取游标读数 $N_1$，转动载物台棱镜，以棱镜的另一抛光面 $AC$ 对向平行光管，用相同方法测定出最小偏向角位置，读取游标读数 $N_2$，两次读数之差即为最小偏向角 $\delta_m$值的 $2$ 倍。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/bilateral-reading.png" alt="bilateral-reading.png">&lt;span class="caption">※ 图 17：双侧读数示意图&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>$1/2$ 修正法：当平行平板 $a$ 面对准望远镜时，观察反射像与上叉丝的偏移量 $h$，调节望远镜的下方的螺钉 1，使反射像上升（下降）$h/2$；再调整载物台下方螺钉 $B$（图 7）使反射像恰在上叉丝（图 8）。&amp;#160;&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>低压 Hg 灯的橙色谱线，实际为双线结构，一条 $576.96nm$，一条 $579.06nm$，因为谱线非常靠近，眼睛无法分辨时可视为一条谱线，取波长 $579nm$。&amp;#160;&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/optics/dispersion-of-glass/" target="_blank" rel="noopener">https://guanqr.com/tech/optics/dispersion-of-glass/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/optics/">optics</category><category domain="https://guanqr.com/series/major-courses/">專業課程</category><category domain="https://guanqr.com/tags/dispersion/">色散</category><category domain="https://guanqr.com/tags/geometric-optics/">几何光学</category><category domain="https://guanqr.com/tags/prism/">棱镜</category></item><item><title>
再见了，天天美剧</title><link>https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/</link><guid isPermaLink="true">https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/</guid><pubDate>Thu, 16 May 2019 00:49:31 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">五&lt;/span>月二日晚，在「酸梅电影」微信公众号上，站长推送了一篇文章，叫《站长最后教你一次，怎么能舒舒服服地看美剧》。我才意识到，原来这一次，真的要和天天美剧告别了。&lt;/p>
&lt;h2 id="初识">&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/#初识" class="anchor-link" aria-label="初识">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>初识&lt;/h2>
&lt;p>还记得第一次从天天美剧上追剧，是在初中三年级的时候。那时候，我最爱看的美剧是《绿箭侠》，是在爱奇艺上追的这部剧。每周四中午回家吃饭的时候，就打开电脑，看一看是否更新到了最新一集。有时候看得太早，连字幕都没有。后来由于一系列政策，国家加强了对于外国连续剧的审核工作，规定只有在电视剧剧集全部上映完后才能登陆各大网络媒体平台，没办法，只有下载下来看了。&lt;/p>
&lt;p>我经常在电影天堂下载高清电影，这类网站上也会更新美剧，但更新的速度比较慢。作为一个热衷于第一时间追剧的人，我当然无法忍耐这么长时间的等待。接着，我就发现了天天美剧。&lt;/p>
&lt;h2 id="追剧的那些事">&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/#追剧的那些事" class="anchor-link" aria-label="追剧的那些事">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>追剧的那些事&lt;/h2>
&lt;p>我知道天天美剧网站上分享出来的各种美剧资源，也都是从别的网站上搜集到的。比如各大字幕组的资源，比如耐卡，比如漫威部落。但比起那些网站，天天美剧最大的好处就是资源列表一目了然。什么美剧，第几季，哪一集，点击链接直接就能下载，有无字幕版的资源，也有配字幕的资源，而且可以通过不同的途径进行下载。&lt;/p>
&lt;p>有些人喜欢在线观看美剧，这不是我的风格。因为我认为网络上的存在的资源是有一定风险的，说不定哪一天因为版权什么的原因，就再也看不到了。下载下来看，才是最安心惬意的。除此之外，你可以看看现在能在各大媒体网站播放的美剧，基本都存在删减片段的现象。《西部世界》《权力的游戏》再好，在线观看，只能阉割。&lt;/p>
&lt;p>除了《绿箭侠》，我还在天天美剧上下载过《闪电侠》、《神盾局特工》、《哥谭》、《行尸走肉》、《西部世界》、《副本》等等美剧，或许你能看出来，我追的主要是漫改剧和科幻剧。高一的时候，那段时间是我追剧最充实的时候，基本上一周七天，每天都有不同的剧来看。我还在英语课的演讲活动中向班里的同学介绍了《闪电侠》。当然学业要比追剧重要，后来为了高考，放弃了不少剧。&lt;/p>
&lt;p>大概是在高中毕业后，为了狂补因高考放弃的美剧，我又来到了天天美剧。我发现它的域名改了，网站的界面也发生了变化，我大概记得结尾改为了 &lt;code>.vip&lt;/code>，然后说需要注册登录。我就注册了一个账户。&lt;/p>
&lt;p>在天天美剧上，我看到有招字幕组的通知，我就顺藤摸瓜，下载了制作字幕和视频压制的软件，学会了制作字幕的方法。有一次，我登录天天美剧的时候，网站弹出了一个二维码，那个自称站长的人说，由于某些原因，要从头开始了。我不明白什么意思，但我扫了这个二维码，是一个微信公众号，「酸梅电影」，是这个自称站长的人的公众号。&lt;/p>
&lt;p>前段时间，再次登录天天美剧，发现无法登陆。我记得我没有输错密码。点击找回密码，网站却提示账户不存在。我就开玩笑说，不会要删库跑路了吧。没想到这是真的。&lt;/p>
&lt;p>追完了《哥谭》的最后一季的最后一集，内心有种说不出的滋味。没想到《哥谭》也结束了，布鲁斯韦恩成为了那一个守护哥谭的黑暗骑士，那些青涩的反派们，也都成为了沉稳老练的犯罪高手。&lt;/p>
&lt;p>几周前，班里心理委员开心理辅导班会的时候，有人说《西部世界》第三季要播出了。我便想看看天天美剧上有什么消息，但网站却进不去了。&lt;/p>
&lt;h2 id="告别">&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/#告别" class="anchor-link" aria-label="告别">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>告别&lt;/h2>
&lt;p>看来真的要和天天美剧告别了。&lt;/p>
&lt;p>「我是站长，陪你看了 8 年美剧的那个人。」&lt;/p>
&lt;p>从初三到现在，也有 6 年的时光了。没想到说失去就失去了。&lt;/p>
&lt;p>也许我会继续追剧，从别的平台看剧。但总觉得少了某些东西。&lt;/p>
&lt;p>感谢在这个网站背后默默付出的站长，感谢这么多年的陪伴&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>天天美剧的原网站已经关闭，目前更换了域名重新开始运营，这对于我们这些热衷于第一时间观看美剧的人来说是再好不过的机会，好好珍惜。&amp;#160;&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/" target="_blank" rel="noopener">https://guanqr.com/life/ideas/say-goodbye-to-ttmeiju/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/ideas/">ideas</category><category domain="https://guanqr.com/tags/tv-series/">剧集</category></item><item><title>
Hexo-NexT 主题添加评论系统</title><link>https://guanqr.com/tech/website/hexo-theme-next-comments/</link><guid isPermaLink="true">https://guanqr.com/tech/website/hexo-theme-next-comments/</guid><pubDate>Sun, 12 May 2019 23:56:53 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">静&lt;/span>态博客无法直接构建评论系统，需要借助第三方平台的后端。NexT 主题支持 Disqus、Valine、Gitalk 等多种第三方评论系统。我推荐使用 Valine 或者 Disqus（加载评论需科学上网）。Valine 评论系统借助于 LeanCloud 存储数据，LeanCloud 的&lt;a href="https://leancloud.cn/" target="_blank" rel="noopener">国内版本&lt;/a>需要绑定域名和备案，这对于很多人来说不太方便，所以可以选择使用&lt;a href="https://leancloud.app/" target="_blank" rel="noopener">国际版&lt;/a>。目前 NexT 主题支持多评论系统，不过我认为这项功能有些多余，有谁会无聊使用多种评论系统呢？不方便管理评论，将简单的管理变得更加复杂。&lt;/p>
&lt;p>下面这一部分是设定多评论系统，首先设定默认的评论系统，然后是其他评论系统的优先级等等配置，由于我没有使用该项功能，所以不再做过多说明：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Multiple Comment System Support&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">comments&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Available values: tabs | buttons&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">style&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">tabs&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Choose a comment system to be displayed by default.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">active&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Setting `true` means remembering the comment system selected by the visitor.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">storage&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Modify texts or order for any navs, here are some examples.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">nav&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#disqus:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># text: Load Disqus&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># order: -1&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#facebook_comments_plugin:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># text: &amp;lt;i class=&amp;#34;fa fa-facebook-official&amp;#34; aria-hidden=&amp;#34;true&amp;#34;&amp;gt;&amp;lt;/i&amp;gt; facebook&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#gitalk:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># order: -2&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下面我将对 Disqus、Valine、Gitalk 三种评论系统的单独配置进行详细说明。&lt;/p>
&lt;h2 id="disqus">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/#disqus" class="anchor-link" aria-label="disqus">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Disqus&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus.png" alt="hexo-theme-next-disqus.png">&lt;span class="caption">※ Disqus 官网主页&lt;/span>&lt;/p>
&lt;p>&lt;a href="https://disqus.com/" target="_blank" rel="noopener">Disqus&lt;/a> 评论系统我认为是诸多评论系统中最好的一个，无奈需要科学上网才能访问。首先是到官网注册一个用户，然后在官网的主页，有一个「GET STARTED」按钮，点击进入，可以看到如下界面：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus-install-site.png" alt="hexo-theme-next-disqus-install-site.png">&lt;/p>
&lt;p>选择「I want to install Disqus on my site」，就会跳转到信息设定页面。在信息设定页面，设定你的网站名称，比如我在这里填写的是「guanqr」，那么「guanqr」就是你的一个 shortname，记住这个名字。相应的，你的聊天系统的控制台对应的网址就是 &lt;code>guanqr.disqus.com&lt;/code>。你还需要在这里填写你的网站类别和语言，这里我填写的是技术类「Tech」，语言是中文。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus-setting.png" alt="hexo-theme-next-disqus-setting.png">&lt;/p>
&lt;p>这些设定完成后，回到主题配置文件中，找到 Disqus 评论系统的配置，开启 Disqus 评论，&lt;code>shortname&lt;/code> 填写之前你设定的网站名称，如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Disqus&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">disqus&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">shortname&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">count&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">lazyload&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#post_meta_order: 0&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>到此，Disqus 评论系统的配置就完成了。如果你想实现在国内网络环境下也能访问 Disqus 评论的内容，则需要借助 Disqus API，这就用到了 &lt;a href="https://github.com/SukkaW/DisqusJS" target="_blank" rel="noopener">DisqusJS&lt;/a>。这里需要注意，目前 DisqusJS 仅支持评论的「读」操作，不支持「写」操作。&lt;/p>
&lt;p>配置 DisqusJS 的时候，首先要到 &lt;a href="https://disqus.com/api/applications/" target="_blank" rel="noopener">Disqus API Application&lt;/a> 处注册一个 Application，如下图所示，点击右边的「Register new application」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus-api.png" alt="hexo-theme-next-disqus-api.png">&lt;/p>
&lt;p>然后进行网站的基本信息设定，将信息提交后，网站会提供给你一个 API Key，将这一长串字符记下来。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus-api-key.png" alt="hexo-theme-next-disqus-api-key.png">&lt;/p>
&lt;p>进入 [Settings] 页面，设置你的域名，Disqus 会检查 API 请求的 Referrer。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-disqus-api-domains.png" alt="hexo-theme-next-disqus-api-domains.png">&lt;/p>
&lt;p>在这些都设定完成后，回到主题配置文件，进行 DisqusJS 的配置。开启 DisqusJS，这里的 &lt;code>api&lt;/code> 是 DisqusJS 请求的 API Endpoint，通常情况下你应该配置一个 Disqus API 的反代并填入反代的地址。你也可以直接使用 Disqus 官方 API 的 Endpoint：&lt;code>https://disqus.com/api/&lt;/code>。如果不填写，则默认为该插件的作者自己搭建的 Disqus API 反代 Endpoint：&lt;code>https://disqus.skk.moe/disqus/&lt;/code>。&lt;code>apikey&lt;/code> 就是上文中让你记下的那一串字符。&lt;code>shortname&lt;/code> 即上文配置 Disqus 评论系统时记下的网站名称。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># DisqusJS&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Alternative Disqus - Render comment component using Disqus API.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Demo: https://suka.js.org/DisqusJS/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For more information: https://github.com/SukkaW/DisqusJS&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">disqusjs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># API Endpoint of Disqus API (https://disqus.com/api/).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Leave api empty if you are able to connect to Disqus API.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Otherwise you need a reverse proxy for Disqus API.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># For example:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># api: https://disqus.skk.moe/disqus/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">api&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">apikey&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Register new application from https://disqus.com/api/applications/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">shortname: # See&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://disqus.com/admin/settings/general/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="valine">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/#valine" class="anchor-link" aria-label="valine">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Valine&lt;/h2>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-valine.png" alt="hexo-theme-next-valine.png">&lt;span class="caption">※ Valine 官方主页&lt;/span>&lt;/p>
&lt;p>&lt;a href="https://valine.js.org/" target="_blank" rel="noopener">Valine&lt;/a> 评论系统是我认为的在国内网络环境下最好用的评论系统，可通过 Leancloud 管理评论，无广告，简洁美观。不过缺点就是，Leancloud 平台的不稳定性，在 2019 年夏季的时候，出现了一次域名停止解析的事故，原因是有人利用 Leancloud 进行一些非法行为，而平台管理人员并没有监管到位。在那次事故之后，Leancloud 加强了监管，国内用户必须进行实名注册，每一个服务器必须绑定一个备案的域名。如果你不想备案，可以选择使用 Leancloud 国际版。但谁也无法确保 Leancloud 国际版会发生什么事情。&lt;/p>
&lt;p>Leancloud 国内版和国际版的配置相同，这里以国际版为例进行说明。首先进入&lt;a href="https://leancloud.app/" target="_blank" rel="noopener">官网&lt;/a>进行用户注册，注册完成后点击「创建应用」，填写应用的名称，选择「开发版」进行创建。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-leancloud-create-app.png" alt="hexo-theme-next-leancloud-create-app.png">&lt;/p>
&lt;p>进入刚才创建好的应用，在「储存」中选择「创建 Class」，设定 Class 名称为 Comment，设定 ACL 权限为创建者可读可写，其他人可读不可写。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-leancloud-comment.png" alt="hexo-theme-next-leancloud-comment.png">&lt;/p>
&lt;p>然后进入「设置」中的「安全中心」，添加 Web 安全域名，防止其他用户盗用你的 Keys 存储个人数据。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-leancloud-safe.png" alt="hexo-theme-next-leancloud-safe.png">&lt;/p>
&lt;p>再进入「设置」中的「应用 Keys」，记录 AppID 和 AppKey 的值。回到主题配置文件中，开启 Valine，在 Valine 配置中填写 AppID 和 AppKey 即可。在该项配置中，你也可以设置评论框中的提示语，默认是「Just go go」。当你将 &lt;code>visitor&lt;/code> 选项设置为 &lt;code>true&lt;/code> 时，可以记录当前页面的访客数。这一部分需要填写的内容可能根据 Valine 版本的更新会有相应的增减，不过基本功能的配置思路是一样的。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Valine&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># You can get your appid and appkey from https://leancloud.cn&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For more information: https://valine.js.org, https://github.com/xCss/Valine&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">valine&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">appid&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Your leancloud application appid&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">appkey&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Your leancloud application appkey&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">notify: false # Mail notifier. See&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://github.com/xCss/Valine/wiki&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">verify&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Verification code&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">placeholder&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Just go go&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Comment box placeholder&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">avatar&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">mm&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Gravatar style&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">guest_info&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">nick,mail,link&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Custom comment header&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">pageSize&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">10&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Pagination size&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">language: # Language, available values&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">en, zh-cn&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">visitor&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors&amp;#39; for counter compatibility. Article reading statistic https://valine.js.org/visitor.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">comment_count&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># If false, comment count will only be displayed in post page, not in home page&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">recordIP&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Whether to record the commenter IP&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">serverURLs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#post_meta_order: 0&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="gitalk">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/#gitalk" class="anchor-link" aria-label="gitalk">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Gitalk&lt;/h2>
&lt;p>Gitalk 评论系统借助 GitHub 平台，将评论的数据存储在仓库的 Issues 中。另一款评论系统 Gitment 与之类似，不过由于 Gitment 已停止维护，目前已经从 NexT 主题中删除。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-gitalk.png" alt="hexo-theme-next-gitalk.png">&lt;/p>
&lt;p>首先，你需要在 GitHub 上创建一个仓库，用来存放评论，用你存放博客源代码的仓库即可。然后创建一个 Github Application 用来授权登录。点击&lt;a href="https://github.com/settings/applications/new" target="_blank" rel="noopener">这里&lt;/a>申请，「Authorization callback URL」（回调地址）填写你主页地址，完成后会生成相应的 clientID 和 clientSecret，记录这两项的值，回到主题配置文件的 Gitalk 设定中，开启 Gitalk，填写你的 GitHub 用户名，以及之前记录的 lientID 和 clientSecret 的值即可。&lt;/p>
&lt;p>每一篇文章在你登录评论系统前都未开启评论功能，所以在你发布文章后，需要先浏览文章，在评论系统中登录你的账号，此时，Gitalk 就会将该篇文章的标题作为一个 Issue 记录在仓库的 Issues 中。如果 Gitalk 评论系统配置异常，请查看你的网站地址（回调地址）是否填写正确。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Gitalk&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Demo: https://gitalk.github.io&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For more information: https://github.com/gitalk/gitalk&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">gitalk&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">github_id&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># GitHub repo owner&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">repo&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Repository name to store issues&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">client_id&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># GitHub Application Client ID&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">client_secret&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># GitHub Application Client Secret&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">admin_user&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># GitHub repo owner and collaborators, only these guys can initialize gitHub issues&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">distraction_free_mode&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Facebook-like distraction free mode&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Gitalk&amp;#39;s display language depends on user&amp;#39;s browser or system environment&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If you want everyone visiting your site to see a uniform language, you can set a force language value&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Available values: en | es-ES | fr | ru | zh-CN | zh-TW&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">language&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="utterances">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/#utterances" class="anchor-link" aria-label="utterances">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>Utterances&lt;/h2>
&lt;p>有朋友向我咨询配置评论系统的时候，提到了信息安全方面的内容。像 Gitalk、Valine 这样的评论系统，都会将自己的 AppID 和 AppKey 暴露在网页的源码中，虽然说这些信息的泄露对评论的影响微乎其微，不过总觉得会有那么一点担忧。&lt;a href="https://utteranc.es/" target="_blank" rel="noopener">Utterances&lt;/a> 评论系统和 Gitalk 类似，借助 GitHub 仓库的 Issues 存储评论信息，但 Utterances 的配置并不会设置 AppID 和 AppKey，只需要填写仓库名。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-utterances.png" alt="hexo-theme-next-utterances.png">&lt;/p>
&lt;p>Utterances 评论系统并非主题包含的评论系统，因此需要自己添加代码，或者借助插件。NexT 主题提供了添加该评论系统的插件 &lt;a href="https://github.com/theme-next/hexo-next-utteranc" target="_blank" rel="noopener">hexo-next-utteranc&lt;/a>.安装插件后，在配置文件 &lt;code>_config.yml&lt;/code> 中添加以下代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">utteranc&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">repo&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#Github repo such as :TrumanDu/comments&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">pathname&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">pathname&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># theme: github-light,github-dark,github-dark-orange&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">theme&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">github-light&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">cdn&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://utteranc.es/client.js&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If you want to modify priority, please config in **hexo**&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#priority:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 GitHub 上安装 &lt;a href="https://github.com/apps/utterances" target="_blank" rel="noopener">Utterances 应用程序&lt;/a>，添加存储评论的仓库，再将仓库名填写在配置文件 &lt;code>_config.yml&lt;/code> 中即可。&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/" target="_blank" rel="noopener">https://guanqr.com/tech/website/hexo-theme-next-comments/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category></item><item><title>
中国中心观的兴起</title><link>https://guanqr.com/life/books/discovering-history-in-china/</link><guid isPermaLink="true">https://guanqr.com/life/books/discovering-history-in-china/</guid><pubDate>Sat, 11 May 2019 09:18:46 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">一&lt;/span>切历史都是当代史，当我们意识到真正的历史应当是历程历史，掌握了解和研究历史的真正范式，我们会发现原本的「通说」未必是毫无瑕疵的精炼产物，主流并非屹立不倒。相反，它们只是众多观点中的一种。在中国发现历史，正如同在退潮的海水看到的一块闪闪发光但又后悔捡起来的石头。因为随着石头在阳光下被晒干，石头的色彩很快就会消失。但是它的色彩和纹线并没有消退，反倒越来越鲜明。在阅读本书的过程中我不时地感到，这块石头正将热量传递到手握着它的生命之中&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>。&lt;/p>
&lt;h2 id="作者简介">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#作者简介" class="anchor-link" aria-label="作者简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作者简介&lt;/h2>
&lt;p>柯文，1934 年生，美国韦尔斯利学院教授，哈佛大学费正清东亚研究中心研究员。著有《中国与基督教：传教运动与中国排外主义的发展》、《在传统与现代性之间：王韬与晚清改革》、《在中国发现历史》、《历史三调：作为事件、经历和神话的义和团》等。&lt;/p>
&lt;h2 id="活着的历史">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#活着的历史" class="anchor-link" aria-label="活着的历史">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>活着的历史&lt;/h2>
&lt;p>历史不应当是静止停滞的、停留在过去的不可改变。当我们深入挖掘那些不可能与无法改变时，我们对那「无法改变」的认识不断变化、日益深化、逐渐完善。&lt;/p>
&lt;p>历史叙述的角度和方式决定了历史叙述的内容。以西方中心为视角，背负了传统的欧洲中心论和西方中心论的沉重负担的叙述方式，难以摆脱「西方侵入——中国回应」的窠臼。也正因为如此，诸如「西方给中国带来真正的近代化转变」此类观点的主导，不经意间便将西方式的发展模式不假思索地朝向整个东方甚至于未曾被西方所染指过的地区。运用此种类推，我们应该会见到西方中国、西方日本、西方印度支那，诸如此类，不一而足。然而现实告诉我们，强大的内化和生命力并没有将西方带来的「前经验」照单全收；相反，一个相对独立的体系正在依据自己的喜好有选择性地吸收和消化这些外来的影响，结果并没有在东方出现一个「远东欧洲」。&lt;/p>
&lt;p>因此「传教士」式的历史观是柯文坚决反对的。如果说传教士在传教的过程中，更多是受到当地文化、信仰等的影响而无时无刻不被当作「外国人」看待，想必没有人会反对；因为从西方中心的角度来说，传教士带来自己的文化「先见」和固化的「偏见」（fixed idea and deep prejudice）想要用高高在上的姿态凭一己之力改变对方文化的形态，可最后自己却成了「镜中人」，写出来的纪实也只是一种矫揉造作的复制粘贴品。&lt;/p>
&lt;p>有什么样的历史观，就会写出什么样的历史，就会有怎样的史家，就会有几流的历史学。我们背得滚瓜烂熟的通说：1840 年第一次鸦片战争让中华民族陷入了半殖民地半封建的历史漩涡中，从此中国「被迫」在坚船利炮的威力之下打开了国门。这个表述很有意思，也很值得探究。我们读到的历史， 是否就是真正的历史所在？从前接触过的春秋笔法、据史实录，看起来只要是越往那个客观全面的方向去靠的历史学著作或者历史学家，就越应当是同类当中的翘楚，换句话说，历史绝不能够是任人打扮的小姑娘。可是当一本历史编年与《三国演义》，甚至一本《史记》同时放在面前，我想大多数人选择拿起的还是后者。编年体的历史——时间，事件，时间，事件——像是同一条麻绳上的若干蚂蚱般「步调一致」地被串起来。而且，仿佛这些蚂蚱均是存在于二维的空间里。它们似乎无法抬起头来感知上与下是何种概念，有何分别。这样的历史，似乎有些近乎被「枭首」的危险。&lt;/p>
&lt;p>历史也适用这一种比喻。当历史成了冷冰冰、硬邦邦地一块框架，把那个过去的「不可改变」一下框住，框架外的各种信息、史料、记载、访谈，都不是「历史」应该有的样子，遂除之而后安。于是乎费了这么大功夫，通说终于成了通说。&lt;/p>
&lt;p>可是框架的加粗并非解决了争论，反而是开启了争论。何谓鸦片战争是中国近代史之开端？鸦片战争为何而起？之前的鸦片贸易内容是什么？鸦片战争的源流在清王朝的内部是如何运动和变化转移的？柯文坚决反对以「重要事件」为轴强行划分历史。因为如果这样，那近代中国史不过就是西方不断地渗透、挤压传统的生存空间、不断地占领与入侵的若干事件的结合体。但是过于注重西方人的体验显然是有失公允和以偏概全的。我们应当要探寻的是，如何透过那个年代中国人的视角，以中国人的方式看待那个年代的中国史。觉其意、感其形，以中国人的思维和灵魂感知。换句话说，柯文在研究分析时有着这样的一种自觉，即披着一层「皮」进行宏观的衡量与考察，而同时又到存在「无皮之境」，融入进这张皮中，视此张皮为无物。&lt;/p>
&lt;p>同样值得关注的是，柯文也重视各种社会科学在史学研究中的作用。在他看来历史不是纯粹的如自然科学般的存在。历史当中应当有一部分社会学、一部分伦理道德、一部分政治变迁，历史自然要与其它科目间产生良性的互动才能被称之为「有思想的历史」。永不自足的历史，才是「摩登」的历史。&lt;/p>
&lt;h2 id="公式的检验与语词的辨析">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#公式的检验与语词的辨析" class="anchor-link" aria-label="公式的检验与语词的辨析">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>公式的检验与语词的辨析&lt;/h2>
&lt;p>实际上，「西方冲击——中国回应」这一公式，虽然在一定程度上可以说明晚清时期的某些变迁，但其解释范围却是十分有限的。作者在本章中一针见血地指出： 西方在近代阶段并不是停滞不前的，且「西方」这一概念是相对于「东方」而言的。当时的西方人对于「非西方社会」并未有过更加深入的了解，甚至对于自己脚下的这片处于变革中的故土都并未完全熟悉。尝试用「西方冲击」这一概念去完整解释近代中国的发展显然是失之颇偏。换个角度来剖析当时历史背景下的中国，面对西方各个领域的介入，是中国人本身通过「体用」之说，「挑剔」地引入适合近代中国的西方元素，转变成符合中国传统的中国成分，而不是在所谓「西方冲击」下完成「全盘接受」的社会转型。换言之，发生在近代中国的种种变革，并非所谓「冲击——回应」公式所能片面解释，更多的是处于历史变革阶段的中国社会的内在调节和自我选择。此外，两种不同文化形式的碰撞之下，衍生的不可能是单纯的单方向碰撞与回应。在研究近代中国的过程中，诸多美国史家恰恰没有注意到这种作用的相对性，从而忽视了中国冲击下西方所产生的回应。他们往往抽象化地将发生在中国不同地区、不同人士身上的各种现象简单累加后取均值，试图用这种草率得出的结果去研讨发生数十年以前的错综复杂的中国变革。这显然与研究历史的正确方式相悖。&lt;/p>
&lt;p>站在这个角度上，本章由发生在近代中国的系列变革展开了不同的分析。十九世纪中叶，西方入侵，清廷统治下的中国风雨飘摇。内部骚乱迭起，其中影响最大的一次就是受西方基督教文化影响而兴起的太平天国运动。当时外国入侵仅仅限于临海的部分城市，无法用「西方冲击——中国回应」这一公式去解释席卷了大半个中国的太平天国运动。而对于当时的中国而言，解决内部动乱与排外相比有着更高的优先级。晚清中国的改革思想和活动尽管越来越收到西方影响，但是也是具有悠久历史传统的一部分。这个传统在其渊源、风格甚至许多内容上很少，乃至完全没有受到外国的启发。以「同治中兴」为例，清廷较多的改革措施只是完成了表面形式上的转换，其本质内容依旧沿袭中国老一套的旧制。即便是「军队建制」和「外交体制」这两个按照西方路线的改革的方向，也在「中国化」的过程中，添加了许多中国传统的保守成分。故言，「西方冲击」并不能与中国的「近代化」挂上等号。对于当时中国的一些统治阶层而言，「近代化」本身并无威胁，有威胁的是社会的系列变革可能动摇他们利益既得者的地位，故而对此极力反对。这一阻力一定程度上影响了太平天国运动和「同治中兴」的失败，但不能简单理解为中国面对西方冲击下的大规模回应。据相关史料记载，十九世纪后期，传统的「复旧主义」在国人心中仍占据着统治地位，甚至有一些人依旧认为西方威胁无足轻重，这足以可见「西方冲击」对当时中国影响的有限性。&lt;/p>
&lt;p>随着越来越多有识之人认识到遵循西方方式改革的必要性，改革家们尝试用传统的「本末」思想和申言西学源自中国为「革新」辩解。在维护儒教秩序的基础上重新阐释儒学的某些内容，使深深信奉儒教的民众完成在思想观念上的转变，减少改革推行的阻力。戊戌变法就是在此基础上的一次政治实践，却在各方面因素作用下陷入失败。发生在这一时期的改革运动的确与「西方冲击」有所关联，但与同一时期日本对西方的积极回应相比，中国式的革新过程中需要更多地面对各阶层人士对于改革的畏惧和回避的情绪，故而改革进程缓慢且收效甚微。二战后，部分美国史家简单地将中日对西方之回应加以比对，或是从中国对西方挑战欠缺有力回应这个角度来解释中国这段改革运动，却没有分析当时中国的历史背景以及整个世界的变革潮流，因而造成了曲解，过高地评价了西方冲击对于近代中国的作用。&lt;/p>
&lt;p>对「西方冲击——中国回应」这一理论公式的过分强调，引导人们错误地认为近代中国的系列变革是对「西方挑战」做出的回应，而忽略了在这一过程中占据主导的中国本土力量。虽然这一框架对于分析当时的中国社会来说有一定的可行性，但它归根结底是在「美国中心观」的基础上形成的，而非秉持着「中国中心观」或是站在整个世界历史的角度客观地评价近代中国，本质上过于片面绝对。如果以一种「中西方相互冲击和回应」的视角去解读「非西方」的那段百年史，可能能够得到更加可靠的结论。&lt;/p>
&lt;h2 id="稳中求变之自觉性以佛教作用之冲突为例">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#稳中求变之自觉性以佛教作用之冲突为例" class="anchor-link" aria-label="稳中求变之自觉性以佛教作用之冲突为例">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>稳中求变之自觉性——以佛教作用之冲突为例&lt;/h2>
&lt;p>佛教通常被认为是十九世纪前对中国文化发展作用最大的外来影响，而列文森认为这种中国社会运转的正常方式的支柱是具有高度稳定性的实体——儒教。西方认为儒教阻碍了近现代中国的转变进程，学者们将「传统」与「近代」看作水火不容的两个体系。中国自己无力产生改变，因此需要西方的外力冲击来促使它产生巨变。列文森认为儒教中国归根到底是逍遥无碍、不存在任何问题的；并认为中国在近代不断增长的忧患意识是外界猛烈震击的结果。儒教中国在近现代无法从自身的封建制度中产生改变，而现当代中国的文化进步是由十九世纪中叶西方文明的入侵产生的巨力而产生的。西方学者们认为，诚然中国在十八世纪和十九世纪的前夜已经产生资本主义的萌芽，但近代的巨大变革还是外来文化侵略带来的影响结果。&lt;/p>
&lt;p>鸦片战争前的中国是一个保守的国家，但产生了文明前夜的曙光，我相信即使没有西方资本主义文化的传播，新兴手工业和商业也会给中国带来改革的气息。因为十九世纪中叶的清朝已经变成一个内外交困的国家，我们需要通过改革来获得新生。诚然，在鸦片战争后，西方带给了我们资本主义的文明，但是我们也有能力自己推进变革。我们有着资本主义的萌芽，我们有着满腹经纶的新时代思想家，我们又是「四万万」的中国人民。我们或许需要等待一段时间去发展新制度的，但是我们不需要西方侵略带来的沉重负担，我们是自强不息的中华民族。&lt;/p>
&lt;h2 id="内部的激荡美国本土学者的争论一窥">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#内部的激荡美国本土学者的争论一窥" class="anchor-link" aria-label="内部的激荡美国本土学者的争论一窥">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>内部的激荡——美国本土学者的争论一窥&lt;/h2>
&lt;p>作者在书中提到了佩克的观点。佩克批判了美国的中国问题专家，他们认为改变社会的最好办法是改良而不是革命，他们对美国自身拥有无比的优越性，而对于中国则采用冷漠敌视的态度。佩克对美国的中国问题研究者的攻击是此问题发展的一个重要的转折点。在东方推动近代史这一过程有两种主要因素，一是「大部分从西方引进的近代化势力」，二是「当地的传统」。佩克将中国和日本的发展作为对比，他将日本视为一个成功的社会，中国是一个不成功的社会。中国自认为是世界的中心，在清代闭关锁国，在西方文明飞速发展的时候，形成了一种文化的孤立体系，从而面对西方的威胁无力做出回应；而日本的外在环境具有某种特殊格局，使之足以通过西方的革新来发展自身。&lt;/p>
&lt;p>基于佩克的观点，莫尔德的思想令我印象很深。她指出中国与日本社会具有很多相似之处，他们都是农业社会，都经历了类似的社会与经济的演变过程。面对封建主义的冲击，中国巩固了自身的帝国结构，而日本则通过西方发展了资本主义。从她的观点可以看出，她强调外在的环境对于自身发展的影响。即由于西方的刺激不同，导致中国和日本的发展不同。她忽略了内在的因素，即两国之间不同的价值，信仰与世界观。作者在此对莫尔德的观点进行了强烈地否认，作者认为「莫尔德辜负了她的读者，尽管她声称自己在追求真理，但在研究过程中，她却把自己的主要主张更多地看成知己的事物，而不是有待考验的假设」。&lt;/p>
&lt;p>佩克属于激进派的一员，他反对美国帝国主义，他认为正是大多数人掩护美国帝国主义的近代理论，阻止了美国人更正确地理解中国革命。他像火药桶一般的批判了很多之前研究中国问题的人，如费正清。他显然是认为这种帝国主义肿瘤一般「万恶的存在」必然是现实，而他必然要痛斥那些认为帝国主义是幻想、是神话的研究学者，觉得他们是帝国主义的帮凶。中国社会在早期受到帝国主义冲击之前，无力独自产生任何变化，中国不是太平乐土。我们可以看到，在内部不断出现的农民起义无法对封建统治做出根本上的改变，而改变这一局面的只有西方的帝国主义。在西方改变了中国的社会结构之后，他们就开始阻止任何不利于自己的变化，使得帝国主义更加深入。&lt;/p>
&lt;p>我同佩克的看法一致。帝国主义并不是西方中国问题专家认为的被神话的概念，并不是中国在受到屈辱后为了得到安慰而创造的概念，帝国主义是真实存在的。在当时的中国，帝国主义是激励中国民族主义蓬勃发展的主要因素。对帝国主义这一概念的解释很复杂。在标准定义中，帝国主义有以下的经济特征：生产和资本高度集中形成垄断组织；银行资本和工业资本融合形成金融资本，并在此基础上形成金融寡头；资本输出取代商品输出成为主要特征，垄断资本通过对外投资控制他国经济；国际垄断同盟已经形成，资本集团瓜分世界市场；世界领土瓜分完毕。但中国属于半殖民地半封建，具有多国多层次的特点。因此帝国主义这一概念本身就有些模糊，正如作者在本章最后所说的那样，对于帝国主义是现实还是神话的问题，从超历史的角度来看，它是神话；从经济影响等实体因素上来看，它就是现实。&lt;/p>
&lt;h2 id="何为中国中心论">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#何为中国中心论" class="anchor-link" aria-label="何为中国中心论">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>何为「中国中心论」？&lt;/h2>
&lt;p>中国中心取向的第一个特征是置于中国历史文化环境中的中国问题着手研究。这个特征是对那些西方中心主义的学者的批判。起初外国人认为，中国出现的提高妇女地位的行动是完全效仿西方。他们的这种种族主义观念，使得他们并没有认识到中国早期的儒家学者，以及一些诗人文学家，早就对于压迫妇女这件事做出了严格有力地批评。而如今的思想是中国思想文化日积月累到一定程度，从量变到质变的过程。在对于辛亥革命的问题上，由于国民党史的影响，仅仅只把孙中山看成领导运动的唯一领导人。西方认为我们是惰性的、被动的。但与此同时，文章还写道，我国早期有先进思想的那些人认识到的仅仅是局限于自身层面的，是一种对社会政治等问题的反应。例如龚自珍曾注意到了外国的威胁，但是他关注的重点还是徘徊于中国政治与社会世风日下的问题。又如魏源作为撰写了《海国图志》的「睁眼看世界的第一人」，也仅仅只是从统治阶级的角度认为边疆有威胁罢了，并没有真正认识到国家的危机根源，对研究中国的历史也有借鉴意义。&lt;/p>
&lt;p>第二个特征，是以区域，省份或是以地方为中心。因为地方差异明显，由小极大，这样使整体轮廓更加分明，使地方上的多样性融入整体。这样既能有利于研究区块变化，例如研究一个人的生平，又在研究中国共产党队伍突然壮大的原因上起着至关重要的作用。海岸与腹地沿海地带经济和文化上受到西方文化的直接影响。沿海经济以商业为主，因此含有浓厚的资产阶级色彩。例如施坚雅提出了一种先进的区域系统分析方法，认为技术（特别是运输技术）和地理因素是形成地域规划的主要原因。这种动态方法为西方研究中国文化开辟了新的道路。&lt;/p>
&lt;p>第三个特征，是在上述横向空间的划分上再加上纵向的划分，这样研究能将研究的重心转移到下层阶级上来，孔飞力的研究——士绅对军事化过程所起的领导作用——是美国的中国史研究的一项重要突破。&lt;/p>
&lt;p>第四个特征，是热情欢迎历史学以外的知识分子，主要是人类学家，将他们的相关理论与研究相结合。随着从以中国中心的思想的不断延伸，从美国的影响这单一元素逐渐拓宽到人口压力的因素，疆域的扩大，农村经济的商业化，中国社会各阶层在政治上遭受的挫折日益渐增。&lt;/p>
&lt;p>作者曾阐述了一条公平合理的原则：倘若分蛋糕的人和率先进行挑选的人是同一个人的话，那不公平与不均衡就会被放大。然而那些自称是东方学的研究人员即是分蛋糕的人，又是挑选的人，甚至他们参与了设计。这使得他们在研究中国史的过程中携带有强烈的帝国主义和种族主义思想。因为所有的表述首先就得嵌在表述者的语言之中，然后镶嵌在表述者所处的文化、制度与政治环境中。这三种模式在当时的历史环境条件下的确促进了当时美国史学研究的先前发展，但它们同时又不可避免地受到时代与认知上的局限，存在着诸多难以解决的问题。而这些问题的广泛存在，无疑也是给现今的史学者提出了许多值得深思的地方，但同时也导致这些研究者的相关理论，剥夺了中国历史的自主性，认为这只是西方思想的附属品。因此作者借以证明了自己的观点，把中国历史的中心放在中国。&lt;/p>
&lt;h2 id="尾声">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#尾声" class="anchor-link" aria-label="尾声">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>尾声&lt;/h2>
&lt;p>打通昨天与今天、过去与现在，历时性研究与共识性研究的分立有赖于我们破除对「今天」、「现在」与「当下」的迷信和崇拜。博尔赫斯在《时间》一文中这样说：「我们来研究一下现在时刻。什么是现在时刻？现在时刻是由部分的过去和部分的未来组成的。现在本身就像是几何学上的一个有限点，现实本身并不存在。现在不是我们理智的一个直接数据……我们无法想象一个纯粹的现在：这是白费力气。现在始终拥有一颗过去的粒子，一颗未来的粒子。」&lt;/p>
&lt;p>即使我们终将要面临一个既成的过去和一个必然将要面对的未来，我们从「中国中心观」里汲取的养分和质料，也可以为我们坚持道路自信、克服盲目和犬儒主义、保持高度灵敏与恪守质疑精神，我们的视野才能打开， 才能真正放眼看世界。&lt;/p>
&lt;p>历史有一种效用——过去可以和现在交谈。因为在以往和当前中存在着共识性，过去和当前方能「开口」和「听见」。历史，就不是「无尽期的哑」；当前，也将不会是「无边际的聋」。克罗齐的「一切历史都是当代史」得以实现&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>子张问曰：「十世可知也？」子曰：「殷因于夏礼，所损益，可知也；周因于殷礼，所损益，可知也；其或继周者，虽百世，可知也。」&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>《历史写作就像是「拼图游戏」》，摘自《时尚先生·传送门》「FEATURE/专题」篇，20160820 期&amp;#160;&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>《中国法制史》，浙江大学出版社，郭建等，2011 年&amp;#160;&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>《论语译注》，「为政篇」，中华书局，2012 年&amp;#160;&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/discovering-history-in-china/" target="_blank" rel="noopener">https://guanqr.com/life/books/discovering-history-in-china/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/game/">博弈</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/religion/">宗教</category></item><item><title>
维柯眼中的「人」与「神」</title><link>https://guanqr.com/life/books/the-new-science/</link><guid isPermaLink="true">https://guanqr.com/life/books/the-new-science/</guid><pubDate>Mon, 06 May 2019 17:08:39 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="作者简介">&lt;a href="https://guanqr.com/life/books/the-new-science/#作者简介" class="anchor-link" aria-label="作者简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作者简介&lt;/h2>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/books/the-new-science/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/giambattista-vico.jpg" alt="giambattista-vico.jpg">&lt;span class="caption">※ 维柯&lt;/span>&lt;/p>
&lt;p>维柯 1668 年出生于那不勒斯，自幼勤奋好学，尤着力于在语言学、法学、历史学和哲学上的修为，毕生以追求最高智慧为生命之旨圭，在诸多古典学者中，尤为钦佩柏拉图和塔西伦，认为前者代表了一种玄奥智慧，后者代表了一种普通智慧，并认为一个真正的哲人就必须兼备这两种智慧，近代哲学家培根则是这种二者兼备的代表。正是在培根的《新工具》的影响和启发之下，1725 年，他出版了《关于各民族的本性的一门新科学的原则，凭这些原则见出部落自然法的另一体系的原则》一书，这就是后来以《新科学》一名扬世的著作的第一版，这本书在 1744 年第三版的标题被改为《关于各民族的共同性的新科学的一些原则》。&lt;/p>
&lt;h2 id="新科学的诞生">&lt;a href="https://guanqr.com/life/books/the-new-science/#新科学的诞生" class="anchor-link" aria-label="新科学的诞生">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>新科学的诞生&lt;/h2>
&lt;p>1637 年，笛卡尔在创立了坐标系之后，成功地创立了解析几何学，解析几何学使得数与形结合在了一起，为微积分的创立奠定了基础，而微积分又是现代数学的重要基石。解析几何直到现在仍是重要的数学方法之一。&lt;/p>
&lt;p>1687 年，牛顿出版了《自然哲学中的数学原理》一书，其中阐述了其后两百年间都被视为真理的三大运动定律，并在其中提出了万有引力定律。&lt;/p>
&lt;p>17 世纪末，牛顿和莱布尼兹分别独立地创立了微积分，极大地推动了数学和物理学的发展。&lt;/p>
&lt;p>当时，整个西方学术界都在为自然科学的成就而欢欣雀跃，但是在对科学理性的崇拜过程中却对历史学产生了谬见。笛卡尔及其门徒认为，科学知识的标准是清晰的和确定的，而历史学是模糊的和不确定的，因此,历史学不在科学知识体系之中，历史学根本没有资格进入科学理性的王国。而斯宾诺莎、莱布尼茨和牛顿等人认为，自然科学原理对任何人类知识都是适应的。维柯的历史哲学正是从对上述两种谬见的批判开始的。&lt;/p>
&lt;p>他认为，&lt;em class="emphasis-point">第一&lt;/em>，&lt;em class="emphasis-point">历史学本身就是一门科学&lt;/em>，&lt;em class="emphasis-point">有其自身的原则和规律&lt;/em>；&lt;em class="emphasis-point">第二&lt;/em>，&lt;em class="emphasis-point">人类历史不是前定的&lt;/em>，&lt;em class="emphasis-point">而是&lt;/em>「&lt;em class="emphasis-point">无中生有&lt;/em>」，&lt;em class="emphasis-point">一切都是人类自己创造的&lt;/em>。因此他提出了这样一个命题「认识真理凭创造」，认识真理，实质上就是人们从事创造的实践活动，譬如，认识到神，也就是创造出了神，认识历史，也就创造出了历史。这就是维柯整个历史哲学思想的内核，他的新科学也正是建构在这一哲学观点上的。&lt;/p>
&lt;p>但是，这是否就是说维柯否定了自然科学的方法呢？其实并没有，他反对的只是那种把自然规律当作认识世界的万能钥匙的做法。在维柯看来，&lt;em class="emphasis-point">自然界是由上帝创造的&lt;/em>，&lt;em class="emphasis-point">历史是由人类创造的&lt;/em>，因此，维柯认为&lt;em class="emphasis-point">对自然界的认识是上帝的事&lt;/em>，&lt;em class="emphasis-point">对历史的认识才是人类自己的事&lt;/em>。而且，由于历史是人类的创造物，它远比数学和物理的研究对象更复杂，它需要一种自己的科学体系。维科提出的「新科学」，它主要研究的还是历史科学，社会科学。研究的是人类各民族的共同性原则，这是一门全新的研究。从人类历史是由人类自己创造的，这一个基本原则出发，论证了人类社会制度的进展和人类心智功能的进展是并驾齐驱的。&lt;/p>
&lt;p>&lt;sup style="float:right" id="fnref:2">&lt;a href="https://guanqr.com/life/books/the-new-science/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/vico-la-scienza-nuova.gif" alt="vico-la-scienza-nuova.gif">&lt;span class="caption">※ 《新科学》&lt;/span>&lt;/p>
&lt;h2 id="维柯眼中的人">&lt;a href="https://guanqr.com/life/books/the-new-science/#维柯眼中的人" class="anchor-link" aria-label="维柯眼中的人">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>维柯眼中的「人」&lt;/h2>
&lt;p>维柯认为，历史是人类自己创造的，这是他的一个重要命题。他将人类历史分为了三个时代：&lt;em class="emphasis-point">神的时代&lt;/em>，&lt;em class="emphasis-point">英雄的时代和人的时代&lt;/em>。需要注意的是，这里说的「神的时代」并非是字面上的意思，而是指当时人类还是一些凶猛残酷的野兽，不会说话和思考，凭着动物本能过活，到处流浪寻食，男女杂交，没有家庭，他们的体格特别发达，所以叫做「巨人」，他根据希伯来人的《圣经》的传说，相信古代世界曾有一次普遍洪水，洪水退了以后，地球上的水蒸气有时造成雷鸣电闪，巨人们逃在深山野林里初次碰上了雷电，就凭想象认为这是天神对人类的忿怒警告，神的信仰由此产生，因而称这个时代为「神的时代」。其实神的时代也就相当于人类的童年时代。这个时候人们没有推理的能力，却有敏锐的感觉力和丰富的想象力，他们的思维方式与现代人大不一样，表现为一种粗糙的玄学，它不是现代学者们所用的理性的抽象，或概念思维，而是「原始人在他们的粗鲁无知中却只凭一种完全肉体方面的想象力」。他们凭想象而认识世界，并在想象中创造文化和形成历史，这就是维科所说的「诗性智慧」。&lt;/p>
&lt;p>维柯认为，原始人生来就是无知的，他们为自然界的千变万化而惊奇，在惊奇中想象，在想象中创造天神，并且把他们感觉到和对之惊奇的那些事物的原因都归到天神那里。天神是人类的第一个创造物，也是第一个文化现象，有关神的知识是人类一切制度最早的出发点，在他看来，原始人所有的文化现象都是由他们粗糙的玄学派生而来的。比如说婚姻与家庭，就是因为男女面对着天神而感到男女公开杂交的羞耻，男人就开始带着女人住进岩洞或山寨里而产生的，这就是人类社会的第二个起源。在原始时代，人死了并不收尸埋藏，任其抛在地上受风吹雨打或被鹰狼吞食。后来灵魂不朽的观念逐渐起来了，为了尊敬死者，才开始埋葬死者，并且发展到丧礼和葬礼，这便是人类社会的第三个起源。在维柯看来，原始人所有的文化现象都是由他们粗糙的玄学派生出来的。&lt;/p>
&lt;p>在《新科学》中我们也可以梳理出维柯表述「历史是人类自己创造的」这一命题的基本思路。&lt;/p>
&lt;ol>
&lt;li>人类从无文化过渡到有历史，关键的一步就是对天神的创造。这是人类最古老的知识，维柯称之为「神学诗人的智慧」，也叫做「粗糙的玄学」，或「自然神学」。&lt;/li>
&lt;li>人类一旦有了这种「粗糙的玄学」，就开始有了历史。这种粗糙的玄学是人类最早的历史内容，所以对人类历史的研究也应该从这里开始。&lt;/li>
&lt;li>天神一经创造出来，就成了驱动人类创造其他类别文化的原因和精神力量。原始人正是在关于天神知识的诗性智慧里发明了语言，有了家族，有了关于天文、地理的知识和有了城市和国家制度。&lt;/li>
&lt;/ol>
&lt;h2 id="维柯眼中的神">&lt;a href="https://guanqr.com/life/books/the-new-science/#维柯眼中的神" class="anchor-link" aria-label="维柯眼中的神">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>维柯眼中的「神」&lt;/h2>
&lt;p>《新科学》中最难以令人理解的就是维柯对神的态度，以及神在他的历史哲学中的地位。维柯究竟是一个有神论者，还是一个无神论者？他一方面承认天神在历史中的作用，有时甚至是对历史直接的干预作用，另一方面，他又一再声明「历史是由人类自己创造的」，并把这一命题作为他整个历史哲学体系的主干。而且在他看来，非但历史是人创造的，就连神也是人的创造物，那你还能说神存在吗？神只不过是人类臆想出来的一个东西罢了。这两者显然是矛盾的，但是维柯却把人和神都请到了他的历史哲学中去，既肯定人对历史的创造，又承认神对历史的干预。这种两全其美的哲学，不能不让人感到困惑不解。&lt;/p>
&lt;p>我在阅读《新科学》的时候，也看了朱光潜的《维柯的〈新科学〉及其对中西美学的影响》一书。朱光潜在书中也讨论了维柯是否宣扬有神论的问题。维科笃信宗教，这是因为，世界各民族在原始时代社会生活都要依靠宗教的需要和利益才能建立起来，才能不断维持下去，宗教是一切典章制度的起源。人要有某种信仰作为自己的指南。当然信仰是可以改变的，因为文明在不断的发展，哲学与科学的地位不断上升。而维柯虽然笃信宗教，他把研究的重点放在了「诗性智慧」上面，但&lt;em class="emphasis-point">他不是一个有神论者&lt;/em>。&lt;/p>
&lt;p>因为维柯在书中写到，神是原始酋长们凭着以己度物的诗性智慧幻想出来的，这些酋长把他们自己身上的那种野蛮特性进行转化，把它们放到了他们信仰的神的身上，而这样描述天神的形象，算是一种亵渎，一个有神论者不会这样亵渎自己信奉的天神。&lt;/p>
&lt;p>通过「诗性智慧」这一媒介，维柯将原始人的心智与「天神意旨」连接在了一起。在他看来，&lt;em class="emphasis-point">人们观念中最早的天神是人们自己创造出来的&lt;/em>。但这里指的仅仅是人们意识中的天神，而不是本体意义上的天神。人们创造神，确切的说应该是人们凭想象创造出了关于神的概念，而原始人对历史的创造，就是以这些天神观念的创造为起点的。因为有了神的观念，人们才有可能创造出各种文化现象。但创造这些文化现象的行为主体不是神而是人，是人的主体能动性。这样, 维柯成功地把人与神对历史的创造统一在他的「诗性智慧」里了。&lt;/p>
&lt;p>但是这并不是说维柯否定了作为实体的天神的存在。在维柯看来，天神意旨在历史中的作用，首先是对人类社会各种制度的设计，而人们只能根据天神旨意已经设计好的图样来创造历史。这样，&lt;em class="emphasis-point">神跟人的关系&lt;/em>，&lt;em class="emphasis-point">就跟设计者跟制作者的关系是一样的&lt;/em>。其次天神意旨在历史中代表着一种秩序、规范和善的力量，它时常关注着人类对历史的创造实践，并随时准备修正和引导人类的历史创造行为，保障人类历史在他已设定的轨道上运行。尤其是当人类历史出现混乱，在人力所无法挽救的情况下，天神就会伸出无形之手，使历史再度导向正常化的轨道。维柯把天神的这种功能叫做对人类弊端的医治。&lt;/p>
&lt;h2 id="总结">&lt;a href="https://guanqr.com/life/books/the-new-science/#总结" class="anchor-link" aria-label="总结">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>总结&lt;/h2>
&lt;p>维柯对于人类历史的看法以及处理人与神在历史中的关系是很有独创的。它不同于中世纪的上帝史观，也不同于当时流行的机械论历史观。他强调人在历史中的作用，同时又把神放在了历史之中，说到底依然还是一种唯心史观。我们在研究维柯的历史哲学的进步思想时，也不能忽略它的一些局限性。十八世纪的欧洲仍然是基督教神学占统治地位。&lt;/p>
&lt;p>维柯试图探索的却是在神的意志之外的人类活动的规律性。但他仍摆脱不了基督教神学统治的社会大环境，在前有伽利略受教会迫害的事实面前，维柯也很难彻底放弃有神论。&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/Giambattista_Vico" target="_blank" rel="noopener">Giambattista Vico | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/the-new-science/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>图源：&lt;a href="https://en.wikipedia.org/wiki/The_New_Science" target="_blank" rel="noopener">&lt;em>The New Science&lt;/em> | Wikipedia&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/life/books/the-new-science/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/books/the-new-science/" target="_blank" rel="noopener">https://guanqr.com/life/books/the-new-science/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/books/">books</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/philosophy/">哲学</category><category domain="https://guanqr.com/tags/religion/">宗教</category></item><item><title>
自动识别验证码破解上学吧题目答案</title><link>https://guanqr.com/tech/computer/shangxueba-crack/</link><guid isPermaLink="true">https://guanqr.com/tech/computer/shangxueba-crack/</guid><pubDate>Sun, 05 May 2019 12:13:17 +0800</pubDate><copyright>文章转载自「科研利器」作者 Tsing 的知乎专栏，内容有删改。</copyright><description>
&lt;h2 id="初步解决方法">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#初步解决方法" class="anchor-link" aria-label="初步解决方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#contents:初步解决方法" class="headings">初步解决方法&lt;/a>&lt;/h2>
&lt;p>在做各科练习题遇到难题的时候，经常会在搜索框中输入题干来 「百度一下」，在搜索结果中，很多答案都出自「&lt;a href="http://www.shangxueba.com/ask/" target="_blank" rel="noopener">上学吧&lt;/a>」这个网站。&lt;/p>
&lt;p>这个网站收录了非常多的题目和答案，而且正确率很不错，但这个网站设置了 IP 限制，同一个 IP 每天只能免费获取三次答案，超过三次之后就需要充值会员才可以查看答案。三次之内，点击「查看最佳答案」会弹出一个验证码窗口，验证码图片是一个简单的数学运算，将计算结果填入即可看到正确答案。超过三次之后，就需要充值会员了，对于大多数的人来说，充值会员是很不划算的。&lt;/p>
&lt;p>在 CSDN 上，wjszfq 用 Python 语言写了一个脚本&lt;sup id="fnref:1">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>，通过构造随机的 X-Forwarded-For 信息来绕过 ASP 网站的 IP 检测，但是功能不是很完善。Tsing 在这个脚本的基础上进行了修改，例如对输入的网址正确性进行检查、对验证码核验不通过时的处理、修改了题目答案展示方式（不再导出 HTML 文件）、直接抓取题干内容等等。&lt;/p>
&lt;h3 id="优化后的完整-python-代码">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#优化后的完整-python-代码" class="anchor-link" aria-label="优化后的完整-python-代码">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#contents:优化后的完整-python-代码" class="headings">优化后的完整 Python 代码&lt;/a>&lt;/h3>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">os&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">random&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">urllib3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">urllib3&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">disable_warnings&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 这句和上面一句是为了忽略 https 安全验证警告，参考：https://www.cnblogs.com/ljfight/p/9577783.html&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">bs4&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">get_verifynum&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 网址的验证码逻辑是先去这个网址获取验证码图片，提交计算结果到另外一个网址进行验证。&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;https://www.shangxueba.com/ask/VerifyCode2.aspx&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">verify&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kc">False&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># HTTPS 请求进行 SSL 验证或忽略 SSL 验证才能请求成功，忽略方式为 verify=False。参考：https://www.cnblogs.com/ljfight/p/9577783.html&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">with&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp.png&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;wb+&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">f&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;temp.png&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">show&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 调用系统的图片查看软件打开验证码图片，如果不能打开，可以自己找到 temp.png 打开。&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">verifynum&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">请输入验证码图片中的计算结果：&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">os&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">remove&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;temp.png&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">verifynum&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">get_question&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">link&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">soup&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;html.parser&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">description&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">soup&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">attrs&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="s2">&amp;#34;name&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">})[&lt;/span>&lt;span class="s1">&amp;#39;content&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 抓取题干内容&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">description&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">get_answer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">verifynum&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;Verify&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">verifynum&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;action&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;CheckVerify&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">post&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;https://www.shangxueba.com/ask/ajax/GetZuiJia.aspx&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">data1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 核查验证码正确性&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;phone&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;dataid&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;action&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;submitVerify&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;siteid&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;1001&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;Verify&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">verifynum&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">post&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;https://www.shangxueba.com/ask/ajax/GetZuiJia.aspx&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">data2&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">soup&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;html.parser&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ans&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">soup&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;h6&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ans&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 只有验证码核查通过才会显示答案&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">题目：&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">get_question&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ans&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">没有找到答案！请检查验证码或网址是否输入有误！&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="vm">__name__&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;__main__&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">headers&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">update&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="s2">&amp;#34;X-Forwarded-For&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">125&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">))})&lt;/span> &lt;span class="c1"># 这一句是整个程序的关键，通过修改 X-Forwarded-For 信息来欺骗 ASP 站点对于 IP 的验证。&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">link&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">请输入上学吧网站上某道题目的网址，例如：https://www.shangxueba.com/ask/8952241.html&lt;/span>&lt;span class="se">\n\n&lt;/span>&lt;span class="s2">请输入：&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 过滤首尾的空格&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">link&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">31&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="s2">&amp;#34;https://www.shangxueba.com/ask/&amp;#34;&lt;/span> &lt;span class="ow">or&lt;/span> &lt;span class="n">link&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">:]&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="s2">&amp;#34;html&amp;#34;&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">网址输入有误！请重新输入！&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dataid&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">link&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">split&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;/&amp;#34;&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">replace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sa">r&lt;/span>&lt;span class="s2">&amp;#34;.html&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 提取网址最后的数字部分&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dataid&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">isdigit&lt;/span>&lt;span class="p">()):&lt;/span> &lt;span class="c1"># 根据格式，dataid 应该全部为数字，判断字符串是否全部为数字，返回 True 或者 False&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">verifynum&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">get_verifynum&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">get_answer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">verifynum&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">网址输入有误！请重新输入！&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中 requests 和 beautifulsoup 两个库需要另外安装，建议使用 pip 方式安装：&lt;/p>
&lt;pre tabindex="0">&lt;code>pip install requests
pip install beautifulsoup4
&lt;/code>&lt;/pre>&lt;h3 id="python-脚本运行流程">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#python-脚本运行流程" class="anchor-link" aria-label="python-脚本运行流程">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#contents:python-脚本运行流程" class="headings">Python 脚本运行流程&lt;/a>&lt;/h3>
&lt;p>首先复制上学吧某道题目的网址，格式类似以下&lt;a href="https://www.shangxueba.com/ask/13207771.html" target="_blank" rel="noopener">网址&lt;/a>：&lt;/p>
&lt;pre tabindex="0">&lt;code>https://www.shangxueba.com/ask/13207771.html
&lt;/code>&lt;/pre>&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-website.png" alt="shangxueba-website.png">&lt;span class="caption">※ 网页示例&lt;/span>&lt;/p>
&lt;p>运行 Python 脚本，将刚复制的网址粘贴进来。回车后会自动下载验证码图片存为 temp.png，然后自动读取图片并展示（实际上是生成了新的临时图片文件再打开），如果没有自动展示验证码图片，可以手动打开同目录下的 temp.png 图片查看。在命令行窗口输入验证码图片中的计算结果即可获取题目详情以及正确答案。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-answer.jpg" alt="shangxueba-answer.jpg">&lt;span class="caption">※ 输入验证码显示答案&lt;/span>&lt;/p>
&lt;h2 id="绕过验证码显示图片答案">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#绕过验证码显示图片答案" class="anchor-link" aria-label="绕过验证码显示图片答案">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#contents:绕过验证码显示图片答案" class="headings">绕过验证码，显示图片答案&lt;/a>&lt;/h2>
&lt;p>在查看网页源代码的时候，发现里面有一个跳转代码，即遇到移动设备访问的时候，会自动跳转到移动端 &lt;a href="http://m.shangxueba.com/ask/" target="_blank" rel="noopener">m.shangxueba.com/ask/&lt;/a> 页面。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-mobile.png" alt="shangxueba-mobile.png">&lt;span class="caption">※ 网页源代码&lt;/span>&lt;/p>
&lt;p>通过移动设备进入该网站后点击「查看答案」，不需要输入验证码查看，不过仍会有三次查询限制。除此之外，还有一个问题，有的题目答案中含有图片，因此之前的脚本无法在命令行窗口中显示答案。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-web-answer-by-picture.png" alt="shangxueba-web-answer-by-picture.png">&lt;span class="caption">※ 引用图片的答案&lt;/span>&lt;/p>
&lt;p>于是，在直接删减掉验证码模块的同时，顺便解决了答案中有图片的问题，完整 Python 代码如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">random&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">urllib3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">urllib3&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">disable_warnings&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 这句和上面一句是为了忽略 https 安全验证警告，参考：https://www.cnblogs.com/ljfight/p/9577783.html&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">bs4&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">webbrowser&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">get_question&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">link&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;https://m.shangxueba.com/ask/&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">dataid&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;.html&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">get&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">link&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">soup&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;html.parser&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">try&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">description&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">soup&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">find&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">attrs&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="s2">&amp;#34;name&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;description&amp;#34;&lt;/span>&lt;span class="p">})[&lt;/span>&lt;span class="s1">&amp;#39;content&amp;#39;&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="c1"># 抓取题干内容&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">description&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">description&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="s1">&amp;#39;上学吧提供&amp;#39;&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 页面错误的话，显示的内容是：上学吧提供考研、公务员、司法、会计、金融等各种资格考试认证学习资料,视频课程,真题,模拟试题分享下载服务和培训服务&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">description&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="s2">&amp;#34;无法获取题目内容！&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">except&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 有的时候网址出错会弹JavaScript弹框：该问题不存在或未审核&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="s2">&amp;#34;该问题不存在或未审核！&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">get_answer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;id&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;action&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;showZuiJia&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">r&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">session&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">post&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;https://m.shangxueba.com/ask/ask_getzuijia.aspx&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">data&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="n">data&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 核查验证码正确性&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">soup&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">BeautifulSoup&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;html.parser&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">ans&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">soup&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">select&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;.replyCon&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ans&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">images&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">ans&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">select&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;img&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 有的题目答案中有图片，例如：https://www.shangxueba.com/ask/9710781.html&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">images&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 有的答案中图片出错，链接为：http://www.shangxueba.com/exam/images/onErrorImg.jpg&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">with&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;shangxueba_answer.html&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">f&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">ans&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">webbrowser&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;shangxueba_answer.html&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="s2">&amp;#34;答案中有图片，已自动打开答案网页文件。如没有自动打开网页，可以手动打开 shangxueba_answer.html&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">ans&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">text&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="s2">&amp;#34;答案获取失败！请检查链接是否正确。&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">if&lt;/span> &lt;span class="vm">__name__&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;__main__&amp;#39;&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;*&amp;#34;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">上学吧答案神器（绕过验证码 + 破解IP限制）&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">by Tsing @Zhihu 2019.04.02&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s2">&amp;#34;*&amp;#34;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">while&lt;/span> &lt;span class="kc">True&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">headers&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">update&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="s2">&amp;#34;X-Forwarded-For&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">125&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">))})&lt;/span> &lt;span class="c1"># 这一句是整个程序的关键，通过修改 X-Forwarded-For 信息来欺骗 ASP 站点对于 IP 的验证。&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">link&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">input&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">请输入上学吧网站上某道题目的网址，例如：https://www.shangxueba.com/ask/8952241.html&lt;/span>&lt;span class="se">\n\n&lt;/span>&lt;span class="s2">请输入：&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">strip&lt;/span>&lt;span class="p">()&lt;/span> &lt;span class="c1"># 过滤首尾的空格&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">link&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">31&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="s2">&amp;#34;https://www.shangxueba.com/ask/&amp;#34;&lt;/span> &lt;span class="ow">or&lt;/span> &lt;span class="n">link&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="p">:]&lt;/span> &lt;span class="o">!=&lt;/span> &lt;span class="s2">&amp;#34;html&amp;#34;&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">网址输入有误！请重新输入！&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">dataid&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">link&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">split&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;/&amp;#34;&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">replace&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sa">r&lt;/span>&lt;span class="s2">&amp;#34;.html&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s2">&amp;#34;&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 提取网址最后的数字部分&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">dataid&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">isdigit&lt;/span>&lt;span class="p">()):&lt;/span> &lt;span class="c1"># 根据格式，dataid 应该全部为数字，判断字符串是否全部为数字，返回 True 或者 False&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">题目：&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">get_question&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n\n&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="n">get_answer&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">s&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">dataid&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s1">&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="mi">45&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">网址输入有误！请重新输入！&lt;/span>&lt;span class="se">\n&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">continue&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>运行 Python 脚本，然后输入上学吧上的题目网址，直接出答案。对于答案中有图片的情况，会将答案中的图片和文字写成一个 HTML 文件，然后自动调用网页浏览器打开。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-crack-answer.jpg" alt="shangxueba-crack-answer.jpg">&lt;span class="caption">※ 输出答案&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-crack-answer-by-picture.jpg" alt="shangxueba-crack-answer-by-picture.jpg">&lt;span class="caption">※ 输出答案图片&lt;/span>&lt;/p>
&lt;h2 id="验证码自动识别">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#验证码自动识别" class="anchor-link" aria-label="验证码自动识别">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#contents:验证码自动识别" class="headings">验证码自动识别&lt;/a>&lt;/h2>
&lt;p>在完成上述脚本之后，可以考虑，要是可以利用程序自动识别验证码并计算结果，效率就可以大大提高。于是，通过对验证码图片进行切图、二值化、去噪、建立模板矩阵、匹配识别等操作，可以很快识别出验证码中的数字和数学运算。&lt;/p>
&lt;p>首先通过分析，所有的验证码图片都是 325 × 81 像素的，其中的数学运算只有加（+）、减（-）、乘（×）三种，两个数字的范围都是 0 到 9，且数字的位置固定不变。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-verification-code.jpg" alt="shangxueba-verification-code.jpg">&lt;span class="caption">※ 验证码&lt;/span>&lt;/p>
&lt;p>这样很容易就可以切出两个数字部分&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">crop_image&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">image&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 裁切图片&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cropped_image1&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">crop&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">34&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">60&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">58&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="c1"># 第一个数字的切图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cropped_image1&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;cropped_image1.png&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cropped_image2&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">crop&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="mi">176&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">202&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">58&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="c1"># 第一个数字的切图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">cropped_image2&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">save&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;cropped_image2.png&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>可以看出切得还是不错的，而且每个数字图片的尺寸都是宽 26 像素，高 38 像素：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-verification-code-cut.jpg" alt="shangxueba-verification-code-cut.jpg">&lt;span class="caption">※ 切出数字&lt;/span>&lt;/p>
&lt;p>然后转成灰度图并进行二值化：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">convert&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;L&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="c1"># 转成灰度图&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">binarizing&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="n">threshold&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 遍历像素点，以一定阈值为界限，把图片变成二值图像，要么纯黑0，要么纯白255。参考：https://www.jianshu.com/p/41127bf90ca9&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">&amp;lt;&lt;/span> &lt;span class="n">threshold&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">img&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>所谓二值化，就是遍历灰度图的像素点，以一定阈值为界限（本例中使用的是 200），使得图片的像素点要么为纯黑 0，要么为纯白 255，下图是二值化之后的图片：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-verification-code-binary.jpg" alt="shangxueba-verification-code-binary.jpg">&lt;span class="caption">※ 二值化处理&lt;/span>&lt;/p>
&lt;p>然后进行噪点去除：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">del_other_dots&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">w&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">size&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 最左列和最右列&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># print(pixdata[0, i]) # 最左边一列的像素点信息&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># print(pixdata[w-1, i]) # 最右边一列的像素点信息&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 最上行和最下行&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># print(pixdata[i, 0]) # 最上边一行的像素点信息&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># print(pixdata[i, h-1]) # 最下边一行的像素点信息&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 遍历除了四个边界之外的像素黑点&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="c1"># 统计某个黑色像素点周围九宫格中白块的数量（最多8个）&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">&amp;gt;&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;位置：(&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;, &amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;)----&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">h&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 最左列和最右列&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">i&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">w&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 最上行和最下行&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">2&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">h&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">255&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="n">img&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>所谓的噪点去除，就是删除那些孤立的点以及与主图没有交集的点。首先判断上下左右四个边界上的点，例如对于最左边一列上的黑色点，如果其右边相邻的点是白色的，那么就就是噪点，将其变为白色，其他三条边类似。对于内部的每个点而言，通过判断其周围最近的 8 个点（九宫格）中白色点的个数，如果个数大于 3，就判定为孤立点，将其变为白色。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-verification-code-denoise.jpg" alt="shangxueba-verification-code-denoise.jpg">&lt;span class="caption">※ 去躁处理&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-verification-code-denoise-contrast.jpg" alt="shangxueba-verification-code-denoise-contrast.jpg">&lt;span class="caption">※ 去躁前后对比&lt;/span>&lt;/p>
&lt;p>下面，我们需要获得数字 0 到 9 的的全部图片并进行去噪点，所以需要大量的验证码图片，可以利用下面的脚本批量下载验证码图片：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 批量下载验证码图片&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">time&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">random&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">requests&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">urllib3&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">urllib3&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">disable_warnings&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">s&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">requests&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">session&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">50&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">s&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">headers&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">update&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="s2">&amp;#34;X-Forwarded-For&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">.&lt;/span>&lt;span class="si">%d&lt;/span>&lt;span class="s2">&amp;#34;&lt;/span>&lt;span class="o">%&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">120&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">125&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="n">random&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">randint&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">200&lt;/span>&lt;span class="p">))})&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">filename&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;temp&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;.png&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">with&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;wb+&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="n">f&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">r&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">content&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">time&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">sleep&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下图为下载到的 50 张验证码图片，涵盖了所有的数字。对这 50 张验证码图片进行批量切图、转灰度图、二值化、去除噪点：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-all-verification-code-denoise.png" alt="shangxueba-all-verification-code-denoise.png">&lt;span class="caption">※ 处理前后对比&lt;/span>&lt;/p>
&lt;p>从中挑选出噪点去除效果最好图片的作为模板，0 到 9 这 10 个数字各一个，分别遍历这几个模板图片的像素点并存为 0-1 矩阵：首先创建一个 26 列 38 行的二维数组（所有元素都为 0），遇到黑色像素点就将 0 变成 1，此处需要注意二维数组中坐标与像素点坐标是相反的。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 验证码数字模板 0-1 矩阵的创建&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">num_info_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span> &lt;span class="c1"># 这个数组用以存储全部数字的 0-1 矩阵&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">filename&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;.png&amp;#39;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">filename&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">num_info&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[([&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">*&lt;/span> &lt;span class="mi">26&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">38&lt;/span>&lt;span class="p">)]&lt;/span> &lt;span class="c1"># 创建一个宽度为26，高度为38的二维数组，参考：https://www.cnblogs.com/btchenguang/archive/2012/01/30/2332479.html&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">38&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">:&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="c1"># print(x, y)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">num_info&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">1&lt;/span> &lt;span class="c1"># 注意二维数组中坐标是相反的&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">num_info_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">num_info&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># for i in range(10):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># print(num_info_list[i])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;1.txt&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="s1">&amp;#39;w&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">write&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">num_info_list&lt;/span>&lt;span class="p">))&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">f&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">close&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>下图左侧是将 5.png 转换成 0-1 矩阵的结果。然后将这个记录了所有数字矩阵信息的大数组写在程序里面作为比对模板，将需要识别的验证码图片读取所有像素点的信息，并与 10 个 0-1 矩阵进行比对，如果图片中黑色像素点出现的位置对应的矩阵点数值也是 1，就算匹配成功。然后分别记录下这张图片与 10 个矩阵的匹配数，匹配数最大的那个矩阵对应的数字就是这张验证码的识别结果。示意图如下图右侧：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-picture-to-matrix.png" alt="shangxueba-picture-to-matrix.png">&lt;span class="caption">※ 图片像素点转化为矩阵&lt;/span>&lt;/p>
&lt;p>下面是匹配识别代码&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 验证码的比对与识别&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">PIL&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">Image&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">num_info_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[[&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">8&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">matrix&lt;/span> &lt;span class="mi">9&lt;/span> &lt;span class="p">]]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># num_info_list[i] 就表示是数字 i 的 0-1 矩阵&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># 由于文章篇幅所限，这里不再给出数字 0~9 的矩阵详细代码，这里仅用文字「matrix x」替代，完整代码参见该页脚注 &lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">img&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">Image&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">open&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;test.png&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">count_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span> &lt;span class="c1"># 记录当前图片像素信息与每一个 0-1 序列的匹配程度&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">for&lt;/span> &lt;span class="n">i&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">38&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">num_info_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">i&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 图片中黑色像素点出现的位置对应的矩阵点也是 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">print&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;当前图片的识别结果：&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="p">))))&lt;/span> &lt;span class="c1"># 找到匹配数最大的那个元素的序号，而序号和数字是相同的。&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>识别准确度还不错，而且识别一张图片的时间不到 3 毫秒。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-number-recognition.jpg" alt="shangxueba-number-recognition.jpg">&lt;span class="caption">※ 图片识别&lt;/span>&lt;/p>
&lt;p>然后进行批量识别图片，下面是 50 张验证码数字图片（已经切图并进行二值化和消除噪点）：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-50-number.jpg" alt="shangxueba-50-number.jpg">&lt;span class="caption">※ 50 张数字图片&lt;/span>&lt;/p>
&lt;p>在当前的 50 张数字图片范围内，识别准确率为 100%。&lt;/p>
&lt;p>同理可以实现三种运算符的识别。为了提高效率，选定一个 20*20 像素的小区域，位置如下图所示，这样裁剪出来的图案区分度足够大。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-operator-cut.jpg" alt="shangxueba-operator-cut.jpg">&lt;span class="caption">※ 验证码中的运算符&lt;/span>&lt;/p>
&lt;p>进行批量切图之后同样进行二值化和去噪点，然后选出三张最好的图片作为模板建立运算符号的 0-1 矩阵。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-operator-denoise.jpg" alt="shangxueba-operator-denoise.jpg">&lt;span class="caption">※ 运算符去躁&lt;/span>&lt;/p>
&lt;p>利用模板矩阵，实现了运算符号识别率 100%。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-operator-recognition.jpg" alt="shangxueba-operator-recognition.jpg">&lt;span class="caption">※ 运算符识别&lt;/span>&lt;/p>
&lt;p>基于以上成功实践，下面对整张验证码图片识别出数字和运算符号，然后输出计算结果。通过优化代码结构和删除不必要的文件读写，大大提高了程序运行效率。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">check_num_match&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 检查数字的匹配程度&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span> &lt;span class="c1"># 记录当前图片像素信息与每一个 0-1 序列的匹配程度&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">n&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">10&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">38&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">26&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">num_info_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 图片中黑色像素点出现的位置对应的矩阵点也是 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">str&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="p">))))&lt;/span> &lt;span class="c1"># 找到匹配数最大的那个元素的序号，而序号和数字是相同的。&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">def&lt;/span> &lt;span class="nf">check_opt_match&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">img&lt;/span>&lt;span class="p">):&lt;/span> &lt;span class="c1"># 检查运算符号的匹配程度&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count_list&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[]&lt;/span> &lt;span class="c1"># 记录当前图片像素信息与每一个 0-1 序列的匹配程度&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">pixdata&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">img&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">load&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">n&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">3&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="mi">0&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">y&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">for&lt;/span> &lt;span class="n">x&lt;/span> &lt;span class="ow">in&lt;/span> &lt;span class="nb">range&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">20&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="n">pixdata&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">y&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="ow">and&lt;/span> &lt;span class="n">opt_info_list&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="n">n&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">y&lt;/span>&lt;span class="p">][&lt;/span>&lt;span class="n">x&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="c1"># 图片中黑色像素点出现的位置对应的矩阵点也是 1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="mi">1&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">append&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">n&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">count_list&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">index&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nb">max&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">count_list&lt;/span>&lt;span class="p">))&lt;/span> &lt;span class="c1"># 找到匹配数最大的那个元素的序号，为0则为加法，为1则为减法，为2则为乘法&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;+&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elif&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;-&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">elif&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="n">n&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="p">):&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;*&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>综合上述代码，另外还加入了多线程，一个不需要手动输入验证码的全程自动化的「上学吧答案神器」脚本就诞生了。运行速度非常快，基本在 0.6 秒左右。&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shangxueba-crack-source-code.jpg" alt="shangxueba-crack-source-code.jpg">&lt;span class="caption">※ 部分源代码&lt;/span>&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/shagnxueba-crack-script.jpg" alt="shagnxueba-crack-script.jpg">&lt;span class="caption">※ 脚本运行效果&lt;/span>&lt;/p>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>原文链接：&lt;a href="https://blog.csdn.net/qq_41861526/article/details/85573479" target="_blank" rel="noopener">Python 突破上学吧的 IP 限制&lt;/a>。&amp;#160;&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>完整的匹配识别代码下载地址：&lt;a href="https://guanqr.com/uploads/shangxueba-number-recognition.zip">shangxueba-number-recognition.zip&lt;/a>。&amp;#160;&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>上学吧网站已对该漏洞进行了修复，取消了三次免费看答案的功能，不再开放免费查看答案的入口，导致获取不到最佳答案返回值，目前此方法已失效，仅作参考学习使用，这里不再提供脚本的下载地址。&amp;#160;&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/computer/shangxueba-crack/" target="_blank" rel="noopener">https://guanqr.com/tech/computer/shangxueba-crack/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/computer/">computer</category><category domain="https://guanqr.com/tags/image-processing/">图像处理</category><category domain="https://guanqr.com/tags/python/">Python</category></item><item><title>
两浙无两，孤山不孤</title><link>https://guanqr.com/life/school/the-establish-of-qiushi-college/</link><guid isPermaLink="true">https://guanqr.com/life/school/the-establish-of-qiushi-college/</guid><pubDate>Sat, 04 May 2019 22:38:29 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p style="text-indent:0">&lt;span class="drop-cap">上&lt;/span>城区，杭州最为繁华的的区域之一，在这里高楼大厦星罗棋布，马路上也是车水马龙。但就在这浓郁的都市氛围中，恰恰有这样一座「矮小」的建筑。坐北朝南，单檐歇山顶，青瓦白墙，加之精美的雕饰，无不散发着庄重的气息。这就是浙江大学前身——求是书院旧址普慈寺大殿。在这大殿背后，更是有一段不为人知的往事。&lt;/p>
&lt;p>晚清时期，洋务派掀起了一场以「自强」、「求富」为口号的洋务运动，但这并没有使中国走向富国强兵的道路。光绪二十二年（1896 年），正值甲午战败，慈禧太后却仍挪用建设海军的经费去建造颐和园。清廷的腐败无能再一次刺痛了无数爱国志士的神经，他们上下求索，找寻救亡图存之路。教育救国，培养人才，冀以振兴中华，是当时社会各界的共同愿望。&lt;/p>
&lt;p>这一年，林启调任杭州知府。「请罢颐和园之役，以疏民困」，三年前，担任御史的他因上书反对慈禧太后营造颐和园被贬为衢州知府，如今又被调至杭州。面对内忧外患，曾经担任陕西学政的林启主张教育救国。他认为旧式书院「只空谈义理，溺志词章」，不能适应革新图强的需要。于是，他为时任浙江巡抚的廖寿丰起草了《浙江巡抚廖寿丰奏为浙江省城专设书院兼课中西实学事恭折》，提出「居今日而图治，以培养人才为第一义。居今日而育材，以讲求实学为第一义」，得到了清廷的批准。早在衢州任上，他就创办了十余所学校，而这一次在杭州，他更要好好利用这次机会。&lt;/p>
&lt;p>光绪二十三年（1897 年），林启利用被查封的普慈寺作为校址创办了一所新式学堂——求是书院，书院「以讲求实学为第一义」，倡导「务求实学，存是去非」。中间原大殿作为办公室，两边的寺屋作为教室和宿舍。作为自己在杭州创办的第一所新式学堂，林启格外重视。亲自担任总办，负责确定章程，聘请海内外名家来杭讲学，购置大批图书与仪器设备。&lt;/p>
&lt;p>在对新生的招考上，林启要求严格。他不仅要求学生有较好的文化基础，还要求学生学风正派，行诣笃实。经过紧密筹划和准备，求是书院于这一年四月二十三日（1897 年5 月 21 日）举行了开学典礼。首年招收「举贡生监」30 名，第二年又扩充学额，分设内、外两院，以原来的 30 名为内院生，另招外院生 60 名。这些学生大多怀揣新思想，渴望新知识，同样希望能够救国救民。虽然人数不多，但他们中却涌现了陈独秀、蒋百里、邵裴子等许多优秀人才。邵裴子评价求是书院「为浙江革命思想重要源泉之一」。求是书院成立不过三年而校内革命思想已蓬勃发展，后来参加革命的亦有其人，成为本省及全国革命史上不可或缺之一部分。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/lin-qi.jpg" alt="lin-qi.jpg">&lt;span class="caption">※ 林启&lt;/span>&lt;/p>
&lt;p>求是书院主张洋为中用，邀请了许多外国学者执教，并聘请了王令赓担任总教习，加之国内很多新学问家的加入，其中就包括维新派学者宋恕以及高啸桐，一时间书院名家云集。书院除了传授国文，还开设了数学、物理、化学、史地、博物、音乐等现代课程以及造船、种植、矿物、制造等技术科目，旨在培养文理兼长、手脑并用的新型人才。&lt;/p>
&lt;p>此外，新成立的求是书院也成为了孕育、传播新思想的根据地。在这里，赫胥黎的《天演论》、黄宗羲的《明夷待访录》、王船山的《黄书》以及陶拙存的《求己录》等都被列为了必读书目。戊戌变法失败后，守旧派一度企图解散书院，林启再次挺身而出「愿意身家性命担保」，书院得以安然无恙。&lt;/p>
&lt;p>书院首创了派学生出国留学的制度，创办初期的几年间，就有几十名优秀学生前往日本等国学习。这也成为了学院保护有维新革命思想学生的方式，外院生蒋百里曾因作诗吊唁唐才常险被除名，书院也借机将其送往日本，转而进入士官学校学习。&lt;/p>
&lt;p>1900 年，也就是书院成立的第三年，创始人兼总办林启于任上因病去世，葬于杭州，他对杭州教育事业的贡献也被这里的百姓所铭记，立林社纪念。为追述其功绩，有后人题词曰：「树人百年，树木十年，树谷一年，两浙无两；处士千古，少尉千古，太守千古，孤山不孤」。&lt;/p>
&lt;p>次年，书院更名为浙江求是大学堂。之后先后名为浙江大学堂，浙江高等学堂，浙江高等学校，国立第三中山大学，并于 1928 年正式更名为国立浙江大学。尽管校名几经变更，但其蕴含的「求是」之精神始终未变，并照耀着百年浙大人的「求是」之魂。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/qiushi-college.png" alt="qiushi-college.png">&lt;span class="caption">※ 求是书院旧址&lt;/span>&lt;/p>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/life/school/the-establish-of-qiushi-college/" target="_blank" rel="noopener">https://guanqr.com/life/school/the-establish-of-qiushi-college/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/life/">life</category><category domain="https://guanqr.com/life/school/">school</category><category domain="https://guanqr.com/tags/hangzhou/">杭城</category><category domain="https://guanqr.com/tags/history/">历史</category><category domain="https://guanqr.com/tags/zju/">浙里</category></item><item><title>
Hexo-NexT 主题个性优化</title><link>https://guanqr.com/tech/website/hexo-theme-next-customization/</link><guid isPermaLink="true">https://guanqr.com/tech/website/hexo-theme-next-customization/</guid><pubDate>Sat, 04 May 2019 00:00:39 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/hexo-theme-next.png" alt="hexo-theme-next.png">&lt;/p>
&lt;h2 id="写在前面">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#写在前面" class="anchor-link" aria-label="写在前面">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:写在前面" class="headings">写在前面&lt;/a>&lt;/h2>
&lt;p>从最初建立该博客到现在，我参考了许多使用 NexT 主题的博主们的文章，对 NexT.Muse 主题进行了一次又一次的优化与深层次的魔改。在此感谢这些分享自己建站教程的博主们。秉承着开源共享精神，我也将我在优化博客主题时使用到的方法分享出来。这些内容大都是我从互联网搜集汇总的优化方法，也有一小部分是我个人的修改。&lt;/p>
&lt;p>在本文中，我会比较细致地讲述 Hexo 博客的搭建，NexT 主题的安装和配置，以及个性优化的内容。本文文章篇幅较长，为了方便阅读，在开头添加了文章目录，目录与各段落标题之间相互链接，可双向跳转。&lt;/p>
&lt;div class="notice notice-note" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/>&lt;/svg>&lt;/div>&lt;p>注意：目前我的博客已经从 Hexo 迁移到了 Hugo，因此我并没有过多地关注 NexT 主题在 2019 年 11 月后的更新内容。本文适用的 NexT 版本范围大致为 v7.0.0 至 v7.5.0，文中所讲的一些东西，可能随着 NexT 主题的更新，成为主题自带的一部分，或被主题抛弃；也可能自身就存在一定的错误，因此本文的内容仅供参考。如果在搭建博客的过程中遇到问题，请参考&lt;a href="https://theme-next.js.org/" target="_blank" rel="noopener">官方文档&lt;/a>的相关说明或者在&lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">主题仓库&lt;/a>提交 Issues。&lt;/p>&lt;/div>
&lt;h2 id="搭建-hexo-博客">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#搭建-hexo-博客" class="anchor-link" aria-label="搭建-hexo-博客">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:搭建-hexo-博客" class="headings">搭建 Hexo 博客&lt;/a>&lt;/h2>
&lt;p>目前网上已经有很多关于如何搭建 Hexo 博客的教程了，所以此处我只进行概述，诸如博客和主题的更新方法等问题请自行谷歌搜索。&lt;/p>
&lt;h3 id="在本地安装-hexo">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#在本地安装-hexo" class="anchor-link" aria-label="在本地安装-hexo">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:在本地安装-hexo" class="headings">在本地安装 Hexo&lt;/a>&lt;/h3>
&lt;p>请直接参考 &lt;a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">Hexo 官方文档&lt;/a>。安装好 Hexo 后，先任意目录新建个文件夹，然后进入这个文件夹，输入命令初始化博客文件夹：&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo init
&lt;/code>&lt;/pre>&lt;p>等待构建完毕，如果出现橙色的 WARN 没关系，只要不出现红色的 ERROR 就行。然后输入命令：&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo g &amp;amp;&amp;amp; hexo s
&lt;/code>&lt;/pre>&lt;p>点开 &lt;a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/&lt;/a>，如果显示出一个简陋的博客页面，恭喜你！已经在本地搭建好博客了，下面要做的就是部署博客还有挑选一个好看的主题。&lt;/p>
&lt;h3 id="博客的部署方式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#博客的部署方式" class="anchor-link" aria-label="博客的部署方式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:博客的部署方式" class="headings">博客的部署方式&lt;/a>&lt;/h3>
&lt;h4 id="github-pages">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#github-pages" class="anchor-link" aria-label="github-pages">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:github-pages" class="headings">GitHub Pages&lt;/a>&lt;/h4>
&lt;p>GitHub Pages 是开源协作社区 GitHub 的一个服务，免费，方便，可以自定义域名，支持 HTTPS，但仓库大小限制为 1GB，一个月 100GB 流量。&lt;/p>
&lt;p>首先在 GitHub 上创建一个仓库，仓库名为 &lt;code>username.github.io&lt;/code>。&lt;code>username&lt;/code> 为你的 GitHub 账号用户名。这里要注意，仓库名必须按照这样的格式进行填写。&lt;/p>
&lt;p>将 Hexo 部署到 GitHub Pages 需要借助一个插件：hexo-deployer-git，进入博客文件夹根目录下，进行插件的安装：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-deployer-git --save
&lt;/code>&lt;/pre>&lt;p>然后，在站点配置文件 &lt;code>_config.yml&lt;/code> 中编辑：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># Deployment
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">## Docs: https://hexo.io/docs/deployment.html
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">deploy:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- type:
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ type: git
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ repository: https://github.com/username/username.github.io.git
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ branch: master
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>repository&lt;/code> 即为你之前创建的仓库地址。将其中的 &lt;code>username&lt;/code> 改成你的 GitHub 用户名即可，然后执行下面的命令：&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo clean &amp;amp;&amp;amp; hexo g &amp;amp;&amp;amp; hexo d
&lt;/code>&lt;/pre>&lt;p>之后可能需要输入你的 GitHub 的用户名和密码，按照提示进行操作，完成后打开浏览器，输入你的博客网站：&lt;code>username.github.io&lt;/code>，即可访问博客。如果想要开启 HTTPS，则进入仓库的设置页面的 GitHub Pages 设定项，开启「Enforce HTTPS」。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/github-pages-enforce-https.png" alt="github-pages-enforce-https.png">&lt;/p>
&lt;p>如果你想要自定义域名，那么首先需要在域名商中购买一个域名，再设置域名的，添加 A 记录到 GitHub 的 IP；再将你想要使用的（二级）域名添加 CNAME 记录到你的博客原地址 &lt;code>username.github.io&lt;/code>；最后在博客文件夹下的 &lt;code>source&lt;/code> 文件夹下新建一个 CNAME 文件，用记事本打开，在其中添加你要使用的域名，执行 &lt;code>hexo clean &amp;amp;&amp;amp; hexo g &amp;amp;&amp;amp; hexo d&lt;/code> 将博客部署一次即可。&lt;/p>
&lt;h4 id="netlify">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#netlify" class="anchor-link" aria-label="netlify">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:netlify" class="headings">Netlify&lt;/a>&lt;/h4>
&lt;p>除此之外，你也可以考虑通过 Netlify 实现博客的自动部署和持续集成，具体的做法请参考我的文章《&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/">博客通过 Netlify 实现持续集成&lt;/a>》。&lt;/p>
&lt;h2 id="基本功能配置">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#基本功能配置" class="anchor-link" aria-label="基本功能配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:基本功能配置" class="headings">基本功能配置&lt;/a>&lt;/h2>
&lt;p>博客的建立最关键的就是选择主题，NexT 主题是目前使用人数最多的 Hexo 博客主题。如果你想要尝试其他主题，可以去 Hexo Themes 慢慢找。对于在 GitHub 上 Star 较多的几个主题，我都有尝试过，对于这些主题的简要分析可以参考我的这一篇&lt;a href="https://guanqr.com/tech/website/hexo-theme/">文章&lt;/a>。最终我选择 NexT 的原因正是它简洁、功能齐全、更新维护速度快。&lt;/p>
&lt;h3 id="安装-next-主题">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#安装-next-主题" class="anchor-link" aria-label="安装-next-主题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:安装-next-主题" class="headings">安装 NexT 主题&lt;/a>&lt;/h3>
&lt;p>目前在 GitHub 上面有三个 NexT 主题的仓库，一个是 v6.0.0 之前版本的&lt;a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">个人仓库&lt;/a>。因为主题原作者停止维护该主题，所以有高人另起炉灶，单独创立了一个名为 &lt;a href="https://github.com/theme-next/" target="_blank" rel="noopener">theme-next&lt;/a> 的团队，v6.0.0 至 v7.8.0 版本主题在这个&lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">仓库&lt;/a>中。然而，因 theme-next 团队管理者自 2019 年 10 月起长期不在线，管理者也没有给其他成员足够的权限，导致仓库管理出现很多问题，所以自 2020 年 5 月起，theme-next 团队部分成员迁移至 &lt;a href="https://github.com/next-theme/" target="_blank" rel="noopener">next-theme&lt;/a>，新团队开发的 NexT 版本为 v8.0.0 版本。因此目前 NexT 主题共有三个仓库：&lt;/p>
&lt;ul>
&lt;li>2014-2017：&lt;a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">https://github.com/iissnan/hexo-theme-next&lt;/a>&lt;/li>
&lt;li>2018-2019：&lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">https://github.com/theme-next/hexo-theme-next&lt;/a>&lt;/li>
&lt;li>2020：&lt;a href="https://github.com/next-theme/hexo-theme-next" target="_blank" rel="noopener">https://github.com/next-theme/hexo-theme-next&lt;/a>&lt;/li>
&lt;/ul>
&lt;p>我发现到目前为止，还有很多人选择从旧仓库下载只有 v5 版本的主题，无视仓库停止维护的公告，依旧在旧仓库中发起很多早已解决的 issues，真是令人哭笑不得。所以为了避免一些不必要的麻烦，在这里我还是要提醒各位读者，请从新仓库下载最新版本的主题，以防主题版本太旧，从而与 Hexo 版本或是环境之间发生冲突。&lt;/p>
&lt;div class="notice notice-tip" >
&lt;div class="notice-title">&lt;svg xmlns="http://www.w3.org/2000/svg" class="icon notice-icon" viewBox="0 0 512 512">&lt;path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/>&lt;/svg>&lt;/div>&lt;p>由于目前 NexT 主题有三个仓库，文中的一些超链接可能因为仓库的迁移而发生变化，个人无法做到及时更新，并且如果在文中详细描述的话，这里是 theme-next，那里是 next-theme，可能有些混乱，所以就不再更改，如果出现链接错误请自行访问仓库查找。&lt;/p>&lt;/div>
&lt;p>你可以选择直接 &lt;code>clone&lt;/code> 主分支（master）的最新版本主题文件到 Hexo 的主题文件夹（&lt;code>themes&lt;/code>）中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">$ &lt;span class="nb">cd&lt;/span> hexo
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>或者到 Releases 中下载每月月初发布的&lt;a href="https://github.com/theme-next/hexo-theme-next/releases" target="_blank" rel="noopener">发行版&lt;/a>主题，将压缩文件中的内容解压至主题文件夹下的 &lt;code>next&lt;/code> 文件夹中。&lt;/p>
&lt;p>然后在站点配置文件 &lt;code>_config.yml&lt;/code> 中修改主题名称：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/_config.yml&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Themes: https://hexo.io/themes/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">theme&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">next&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我比较喜欢下载和更新发行版的主题，因为版本明确，便于管理。不过对于 NexT 主题来说，发行版和主分支的版本并没有什么区别，发行版只是一个每月月初的「总结」罢了。虽然发行版是稳定的版本，不过主分支的版本一定会解决一些在当前发行版中可能出现的 BUG，或许也会添加一些新的功能，当然也不可避免一些新 BUG 的出现。所以这两种版本到底选择哪一个，只能看你自己的想法了。&lt;/p>
&lt;h3 id="站点配置文件">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#站点配置文件" class="anchor-link" aria-label="站点配置文件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:站点配置文件" class="headings">站点配置文件&lt;/a>&lt;/h3>
&lt;p>首先，请认真查看 &lt;a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="noopener">Hexo 官方文档&lt;/a>的说明，基本上每一处的设置都有较为详细的解释。我在这里也给出我的设定，这里 Hexo 版本为 v4.0.0，其他版本的配置基本相同。这里还需要提醒一下，各项参数名称的 &lt;code>:&lt;/code> 为半角字符，且其后需要一个空格再写内容。另外，不要随意添加任何内容，除非是安装一些特定的插件，需要在这里进行一些参数的设定，因为这类操作可能会影响到博客的生成。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文件位置：~/_config.yml&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Hexo version: v4.0.0&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Hexo Configuration&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Docs: https://hexo.io/docs/configuration.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Source: https://github.com/hexojs/hexo/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Site&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 网站标题、副标题、网站描述、关键词、作者、语言等基本信息的配置&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">title&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">荷戟独彷徨&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">subtitle&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">The Sound of Silence&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">description&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">啼鸟怨年华&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">keywords&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">author&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Guanqr&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">language&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">zh-CN&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">timezone&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Asia/Shanghai&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># URL&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## If your site is put in a subdirectory, set url as &amp;#39;http://yoursite.com/child&amp;#39; and root as &amp;#39;/child/&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 博客的网址及文章 URL 结构，默认在根目录&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 如果你想要将博客设定在一个子目录，如 &amp;#39;http://yoursite.com/blog&amp;#39;，则将 root 设定为该子目录的名称 &amp;#39;/child/&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 建议博客的 URL 结构在博客建立初期就规划好，因为当你写的文章被搜索引擎收录以及被读者收藏后，再更改结构，会对你的网站访问造成一定影响&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">url&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://guanqr.com/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">root&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 详细参数请查看：https://hexo.io/docs/permalinks.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 这里默认的路径太不利于 SEO，建议修改成较短的链接。比如 &amp;#39;year:month:day/:title/&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 或者你也可以考虑使用一些插件，直接生成永久链接，如 hexo-abbrlink 插件：https://github.com/rozbo/hexo-abbrlink&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">permalink&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="l">year/:month/:day/:title/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">permalink_defaults&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Directory&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 这里是设定一些基本文件夹的名称，如资源文件夹等。&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">source_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">source&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">public_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">public&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">tag_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">tags&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">archive_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">archives&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">category_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">categories&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">code_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">downloads/code&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">i18n_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="l">lang&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## skip_render 是为了避免在执行 &amp;#39;hexo generate&amp;#39; 命令后将一些你不想转义的文件转成 HTML 格式。&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 比如 README.md，你可以将这些文件名填写在括号内，格式为 [README.md, Post1.md, Post2.md]&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">skip_render&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="l">README.md]&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Writing&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">new_post_name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="l">title.md&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># File name of new posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">default_layout&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">post&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">titlecase&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Transform title into titlecase&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">external_link&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Open external links in new tab&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">filename_case&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">render_drafts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## post_asset_folder 设置为 true 后，当你新建一个 post 的时候，会在同级目录生成一个相同名字的文件夹&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">post_asset_folder&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">relative_link&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">future&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 代码高亮设置&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">highlight&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">line_number&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 代码自动高亮&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">auto_detect&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">tab_replace&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Home page setting&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># path: Root path for your blogs index page. (default = &amp;#39;&amp;#39;)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># per_page: Posts displayed per page. (0 = disable pagination)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># order_by: Posts order. (Order by date descending by default)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">index_generator&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">per_page&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">10&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">order_by&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>-&lt;span class="l">date&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Category &amp;amp; Tag&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">default_category&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">uncategorized&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## URL 中的分类和标签「翻译」成英文&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 参见：https://github.com/hexojs/hexo/issues/1162&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">category_map&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">tag_map&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Date / Time format&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Hexo uses Moment.js to parse and display date&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## You can customize the date format as defined in&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## http://momentjs.com/docs/#/displaying/format/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">date_format&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">YYYY-MM-DD&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">time_format&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">HH:mm:ss&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Pagination&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Set per_page to 0 to disable pagination&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">per_page&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">10&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">pagination_dir&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">page&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Extensions&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Plugins: https://hexo.io/plugins/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Themes: https://hexo.io/themes/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">theme&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">next&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Deployment&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Docs: https://hexo.io/docs/deployment.html&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## Dependency: https://github.com/hexojs/hexo-deployer-git&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c">## 设定执行 &amp;#39;hexo deploy&amp;#39; 命令后提交的代码仓库地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">deploy&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">type&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">git&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">repo&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://github.com/guanqr/guanqr.github.io.git&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">branch&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">master&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="主题配置文件">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#主题配置文件" class="anchor-link" aria-label="主题配置文件">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:主题配置文件" class="headings">主题配置文件&lt;/a>&lt;/h3>
&lt;p>NexT 主题的配置文件内容有很多，因为该主题有很多扩展功能。在配置主题各项功能之前，我建议先阅读 &lt;a href="https://theme-next.js.org/" target="_blank" rel="noopener">NexT 官方网站&lt;/a>&lt;sup id="fnref:2">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:2" class="footnote-ref" role="doc-noteref">[2]&lt;/a>&lt;/sup>的相关文档说明。主题配置文件内容过长，为了排版美观以及阅读方便，这里我只对一些关键配置和容易出现问题地方进行说明，一些我认为不太重要的配置就不再提及。不同版本之间的配置文件可能有微小变化，这里仅供参考。&lt;/p>
&lt;h4 id="自定义配置">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#自定义配置" class="anchor-link" aria-label="自定义配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:自定义配置" class="headings">自定义配置&lt;/a>&lt;/h4>
&lt;p>对应配置文件中的 &lt;code>custom_file_path&lt;/code> 内容，如果你需要在网站的 &lt;code>&amp;lt;head&amp;gt;&lt;/code>、&lt;code>&amp;lt;body&amp;gt;&lt;/code> 等部位添加自己的代码，无需直接修改主题文件，NexT 主题拥有多样自由的注入功能，这一部分的说明参见下一章节「&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#%e7%bd%91%e9%a1%b5%e6%a0%b7%e5%bc%8f%e5%b8%83%e5%b1%80">网页样式布局&lt;/a>」&lt;/p>
&lt;h4 id="页脚信息">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#页脚信息" class="anchor-link" aria-label="页脚信息">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:页脚信息" class="headings">页脚信息&lt;/a>&lt;/h4>
&lt;p>在网页的底部显示版权信息，包括年份、图标、作者信息，是否显示 Hexo 及其版本、NexT 及其版本，还有备案信息。这里的图标我设置成了心形，颜色为红色（&lt;code>#ff0000&lt;/code>），并且添加了动画效果：&lt;code>animated: true&lt;/code>。这里的图标名称需要填写 &lt;a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome&lt;/a> 中提供的图标名称。如果你想要添加任何自定义内容，比如添加一句话，可以考虑在 &lt;code>~/source/_data/&lt;/code> 路径下建立 &lt;code>footer.swig&lt;/code> 文件，在该文件下添加内容。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">footer&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Specify the date when the site was setup. If not defined, current year will be used.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">since&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">2019&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Icon between year and copyright info.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">icon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># `heart` is recommended with animation in red (#ff0000).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">name&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">heart&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If you want to animate the icon, set it to true.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">animated&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Change the color of icon, using Hex Code.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s2">&amp;#34;#ff0000&amp;#34;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If not defined, `author` from Hexo `_config.yml` will be used.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">copyright&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Guanqr&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">powered&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Hexo link (Powered by Hexo).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Version info of Hexo after Hexo link (vX.X.X).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">version&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">theme&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Theme &amp;amp; scheme info link (Theme - NexT.scheme).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Version info of NexT after scheme info (vX.X.X).&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">version&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">beian&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">icp&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># The digit in the num of gongan beian.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">gongan_id&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># The full num of gongan beian.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">gongan_num&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># The icon for gongan beian. See: http://www.beian.gov.cn/portal/download&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">gongan_icon_url&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="导航目录配置">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#导航目录配置" class="anchor-link" aria-label="导航目录配置">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:导航目录配置" class="headings">导航目录配置&lt;/a>&lt;/h4>
&lt;h5 id="一级目录">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#一级目录" class="anchor-link" aria-label="一级目录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:一级目录" class="headings">一级目录&lt;/a>&lt;/h5>
&lt;p>你可以在此处设置目录选项的名称和所在文件夹的位置，以及对应的图标，这里的图标同样需要对应 Font Awesome 中图标的名称。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">menu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">home&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/ || home&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#about: /about/ || user&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#tags: /tags/ || tags&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#categories: /categories/ || th&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">archives&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/archives/ || archive&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#schedule: /schedule/ || calendar&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#sitemap: /sitemap.xml || sitemap&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#commonweal: /404/ || heartbeat&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>以 &lt;code>home: / || home&lt;/code> 为例，第一个 &lt;code>home&lt;/code> 为该目录选项的名称，此处可以先设置成英文，然后在 &lt;code>~/themes/next/languages/zh-CN.yml&lt;/code> 下对应的 &lt;code>menu:&lt;/code> 下添加对应的中文，格式为 &lt;code>home: 首页&lt;/code>。&lt;code>home:&lt;/code> 后填写的是该页面的文件夹位置，&lt;code>/&lt;/code> 即为网站的根目录。&lt;code>||&lt;/code> 后的 &lt;code>home&lt;/code> 即为图标名称。&lt;/p>
&lt;p>如果你要建立标签页面和分类页面，首先需要去掉 &lt;code>tags&lt;/code> 和 &lt;code>categories&lt;/code> 前的注释，然后在 &lt;code>~/source/&lt;/code> 文件夹下建立该页面，对应名称为 &lt;code>tags&lt;/code> 和 &lt;code>categories&lt;/code>。可以执行以下命令生成：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">hexo new page tags
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">hexo new page categories
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后可以发现在 &lt;code>~/source/&lt;/code> 文件夹中生成了对应名称的文件夹，在该文件夹下会有一个 &lt;code>index.md&lt;/code> 文件，打开该文件，在如下所示位置添加内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">&lt;span class="gs">---
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gs">&lt;/span>title:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">date:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ type: &amp;#34;name&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>&lt;span class="gs">---
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中，在 &lt;code>name&lt;/code> 处，标签页面就替换为 &lt;code>tags&lt;/code>，分类页面替换为 &lt;code>categories&lt;/code>。填写对应类型后，主题会根据类型对页面进行渲染，前提是 NexT 主题支持你设定的这种类型。不同类型格式的模板存放在 &lt;code>~/themes/next/layout/&lt;/code> 文件夹下，你也可以自己写一个类型模板存放在此处。&lt;/p>
&lt;p>如果你想要在目录中建立其他页面的链接入口，比如友情链接，可以添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">menu:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ links: /links/ || user-plus
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对应在 &lt;code>~/source/&lt;/code> 文件夹下建立名为 &lt;code>links&lt;/code> 的页面，此时你会发现该链接的名称为英文名 &lt;code>links&lt;/code>，如果你想要就改成中文，可以直接在此处直接将 &lt;code>links&lt;/code> 修改为中文 &lt;code>友链&lt;/code>，不过另一种通用的方法就是在主题的语言包文件中添加对应的翻译。在 &lt;code>zh-CN.yml&lt;/code> 文件中的如下位置添加对应翻译：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/themes/next/languages/zh-CN.yml
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">menu:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ links: 友链
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h5 id="多级目录">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#多级目录" class="anchor-link" aria-label="多级目录">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:多级目录" class="headings">多级目录&lt;/a>&lt;/h5>
&lt;p>NexT 主题支持多级目录，但是官网并没有直接给出配置的方法，因此很少见到有人使用，具体的样式可以参考官方网站的 &lt;a href="https://theme-next.js.org/docs/" target="_blank" rel="noopener">Docs&lt;/a> 页面，其上方的样式即为二级目录和三级目录。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-title.png" alt="hexo-theme-next-title.png">&lt;span class="caption">※ 多级目录样式&lt;/span>&lt;/p>
&lt;p>就以官方网站的 Docs 页面为例，其配置文件的目录设定内容为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">menu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">News&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/ || bullhorn&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Docs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">default&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/docs/ || book&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Getting Started&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">default&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/getting-started/ || flag&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Installation&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/installation.html || download&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Deployment&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/deployment.html || upload&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Data Files&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/data-files.html || wrench&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Update from 5.x&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/update-from-v5.html || retweet&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Theme Settings&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">default&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/theme-settings/ || star&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Footer&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/footer.html || sun-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Sidebar&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/sidebar.html || bars&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/posts.html || pencil-square-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Custom Pages&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/custom-pages.html || file-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">SEO&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/seo.html || external-link-square&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Front Matter&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/front-matter.html || header&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Third Party Services&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">default&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/third-party-services/ || plug&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Math Equations&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/math-equations.html || superscript&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Comment Systems&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/comments.html || comments-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Statistics and Analytics&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/statistics-and-analytics.html || bar-chart&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Post Widgets&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/post-widgets.html || share-square&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Search Services&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/search-services.html || search-plus&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Chat Services&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/chat-services.html || comment&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">External Libraries&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/external-libraries.html || puzzle-piece&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Tag Plugins&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">default&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/tag-plugins/ || rocket&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Note&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/note.html || comment&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Tabs&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/tabs.html || columns&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">PDF&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/pdf.html || file-pdf-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Mermaid&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/mermaid.html || tasks&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Label&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/label.html || font&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Video&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/video.html || video-camera&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Button&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/button.html || square&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Caniuse&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/caniuse.html || signal&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Group Pictures&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/group-pictures.html || file-image-o&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Advanced Settings&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/advanced-settings.html || cogs&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">FAQ&amp;#39;s&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/faqs.html || life-ring&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Troubleshooting&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/troubleshooting.html || bug&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">archives&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/archives/ || archive&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>也就是说，在一级目录 &lt;code>Docs&lt;/code> 下，我们想要创建 &lt;code>Getting Started&lt;/code>、&lt;code>Theme Settings&lt;/code> 等二级目录页面，那么需要作出如下修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">menu:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- Docs: /docs/ || book
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ Docs:
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ default: /docs/ || book
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>即将当前目录默认页面的名称改为 &lt;code>default&lt;/code>。然后再在 &lt;code>default&lt;/code> 同级下添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">Docs:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> default: /docs/ || book
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ Getting Started: /getting-started/ || flag
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ Theme Settings: /theme-settings/ || star
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>我们需要在 &lt;code>~/source/docs/&lt;/code> 文件夹下创建对应的文件夹 &lt;code>Getting Started&lt;/code> 和 &lt;code>Theme Settings&lt;/code>，文件夹中创建对应的 &lt;code>index.md&lt;/code> 文件，该文件即为其二级目录对应页面内容的存放文件。&lt;/p>
&lt;p>同样，创建三级目录的时候，需要将对应的二级目录默认页面改为 &lt;code>default&lt;/code>，然后在同级下添加同样格式的内容，在此不再赘述。如果你还没有明白是怎么设定的，可以研究一下 NexT 官方网站的源码仓库文件的存放位置。&lt;/p>
&lt;h4 id="文章元数据">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#文章元数据" class="anchor-link" aria-label="文章元数据">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:文章元数据" class="headings">文章元数据&lt;/a>&lt;/h4>
&lt;p>文章元数据即每一篇文章标题下的写作时间、更新时间等信息。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Post meta display settings&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">post_meta&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">item_text&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">created_at&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">updated_at&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">another_day&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">categories&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Post wordcount display settings&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependencies: https://github.com/theme-next/hexo-symbols-count-time&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">symbols_count_time&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">separated_meta&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">item_text_post&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">item_text_total&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">awl&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">2&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">wpm&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">275&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对于 &lt;code>symbols_count_time&lt;/code>，即文章字数与阅读时长统计的信息，需要依赖 hexo-symbols-count-time 插件。具体的配置方法可参考该插件的&lt;a href="https://github.com/theme-next/hexo-symbols-count-time" target="_blank" rel="noopener">说明文档&lt;/a>。这里提醒一下，该项功能的设定还需要在&lt;em class="emphasis-point">站点配置文件&lt;/em>中添加以下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">symbols_count_time&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">symbols&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">time&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_symbols&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_time&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">exclude_codeblock&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果没有添加上述内容，则无法显示统计信息。&lt;/p>
&lt;h4 id="相关文章">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#相关文章" class="anchor-link" aria-label="相关文章">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:相关文章" class="headings">相关文章&lt;/a>&lt;/h4>
&lt;p>在文章的末尾添加相关（推荐）文章。因为我使用的并非是 &lt;a href="https://github.com/tea3/hexo-related-popular-posts" target="_blank" rel="noopener">hexo-related-popular-posts&lt;/a> 这一款插件，而是 &lt;a href="https://github.com/huiwang/hexo-recommended-posts" target="_blank" rel="noopener">hexo-recommended-posts&lt;/a>，关于该项功能的设置我并没有研究过，所以此处的具体设置请看官方说明。如果想要使用 hexo-recommended-posts 插件请看&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#%e6%96%87%e6%9c%ab%e6%b7%bb%e5%8a%a0%e7%9b%b8%e5%85%b3%e6%96%87%e7%ab%a0">下文&lt;/a>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Related popular posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependencies: https://github.com/tea3/hexo-related-popular-posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">related_posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">title&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Custom header, leave empty to use the default one&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">display_in_home&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">params&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">maxCount&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#PPMixingRate: 0.0&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#isDate: false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#isImage: false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#isExcerpt: false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="在线编辑">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#在线编辑" class="anchor-link" aria-label="在线编辑">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:在线编辑" class="headings">在线编辑&lt;/a>&lt;/h4>
&lt;p>因为 Hexo 博客并没有后端数据库，正常情况下无法在线编辑，这里的在线编辑功能需要借助 GitHub 与提供自动部署博客服务以实现持续集成的平台，这里我推荐使用 GitHub 与 Netlify 的组合。即你只需要将你的博客文件夹上传至代码仓库（因为在线编辑功能编辑的是你的原始 Markdown 文件），不用自己执行 &lt;code>hexo generate &amp;amp;&amp;amp; hexo deploy&lt;/code> 命令，而是让 Netlify 帮助你进行自动部署。有关使用 Netlify 实现博客持续集成的方法请看我的这一篇&lt;a href="https://guanqr.com/tech/website/deploy-blog-to-netlify/">文章&lt;/a>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Post edit&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependencies: https://github.com/hexojs/hexo-deployer-git&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">post_edit&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">url&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://github.com/guanqr/guanqr.com/edit/master/source/&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Link for fork &amp;amp; edit&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>该项功能的具体效果可以参考 &lt;a href="https://theme-next.js.org/" target="_blank" rel="noopener">NexT 官方网站&lt;/a>，每一篇文章的右上角都有一个「笔头」图标，点击就会跳转到你的 GitHub 仓库的该篇文章的位置，实现在线编辑。&lt;/p>
&lt;h4 id="标签页面">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#标签页面" class="anchor-link" aria-label="标签页面">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:标签页面" class="headings">标签页面&lt;/a>&lt;/h4>
&lt;p>标签页面的标签云可以自己设定最大和最小的字号，以及颜色的过渡。这里我给出适合我的主题的配色方案：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># TagCloud settings for tags page.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">tagcloud&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># All values below are same as default, change them by yourself&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">min&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">12&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Minimun font size in px&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">max&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">30&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Maxium font size in px&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">start&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s2">&amp;#34;#FF69B4&amp;#34;&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Start color (hex, rgba, hsla or color keywords)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">end&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s2">&amp;#34;#8A2BE2&amp;#34;&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># End color (hex, rgba, hsla or color keywords)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">amount&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">200&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># Amount of tags, change it if you have more than 200 tags&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="代码框主题">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#代码框主题" class="anchor-link" aria-label="代码框主题">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:代码框主题" class="headings">代码框主题&lt;/a>&lt;/h4>
&lt;p>大部分人写博客文章的时候都会插入代码。选用一个适合自己风格的代码框主题必不可少。NexT 主题提供了多种风格的代码框供你选择。我个人推荐的是最简洁的 &lt;code>normal&lt;/code> 亮色主题和 &lt;code>night&lt;/code> 暗色主题。另外，你也可以设置是否启用「复制」按钮，「复制」按钮也可选择不同的风格。我推荐使用默认的 &lt;code>default&lt;/code> 和 Mac 主题风格 &lt;code>mac&lt;/code>。不过貌似 &lt;code>mac&lt;/code> 风格对于一些 NexT 主题代码框特有样式支持地并不太完美，需要自己添加 CSS 样式。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">codeblock&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Code Highlight theme&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># See: https://github.com/chriskempson/tomorrow-theme&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">highlight_theme&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">normal&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Add copy button on codeblock&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">copy_button&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Show text copy result.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">show_result&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Available values: default | flat | mac&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">style&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">default&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="数学公式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#数学公式" class="anchor-link" aria-label="数学公式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:数学公式" class="headings">数学公式&lt;/a>&lt;/h4>
&lt;p>支持 MathJax 和 KaTeX 两种加载数学公式的方法，使用语法都是 LaTeX 语法。不过 MathJax 的功能比较全面，KaTeX 的加载速度比较快。不过有一点要注意，不论是用哪一个方式，我都推荐替换默认渲染器。&lt;/p>
&lt;p>MathJax 使用 hexo-renderer-pandoc 或者 hexo-renderer-kramed；KaTeX 使用 hexo-renderer-markdown-it-plus 或者 hexo-renderer-markdown-it。&lt;/p>
&lt;p>默认的 &lt;code>per_page: true&lt;/code> 的意思是，只用当你在文章设定中添加 &lt;code>mathjax: ture&lt;/code>，才会在当前页面中加载公式渲染。如果你使用的是 KaTeX，还要注意，过长的公式会超出页面边框，可能需要自行添加 CSS 样式对长公式进行滚动浏览。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Math Formulas Render Support&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">math&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Default (true) will load mathjax / katex script on demand.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># That is it only render those page which has `mathjax: true` in Front-matter.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">per_page&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">mathjax&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># See: https://mhchem.github.io/MathJax-mhchem/&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">mhchem&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">katex&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">copy_tex&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="pjax">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#pjax" class="anchor-link" aria-label="pjax">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:pjax" class="headings">PJAX&lt;/a>&lt;/h4>
&lt;p>该项功能的作用是：跳转到同网站另一个页面的时候，前后两个页面相同的元素不再重复加载，进而节省了加载的时间，加快访问速度。该项功能依赖官方提供的 &lt;a href="https://github.com/theme-next/theme-next-pjax" target="_blank" rel="noopener">PJAX 插件&lt;/a>。开启 PJAX 后或多或少会出现出现浏览上的 BUG，特别是一些使用 JavaScript 的地方。我没有深入研究过该项功能的原理，所以也无法修复一些出现的 BUG。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Easily enable fast Ajax navigation on your website.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependencies: https://github.com/theme-next/theme-next-pjax&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For moreinformation: https://github.com/MoOx/pjax&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">pjax&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="图片浏览">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#图片浏览" class="anchor-link" aria-label="图片浏览">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:图片浏览" class="headings">图片浏览&lt;/a>&lt;/h4>
&lt;p>实现该功能的基础是在文章中&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#%e5%9b%be%e7%89%87">插入图片&lt;/a>。该项功能的效果是：点击文中插图，图片能够放大，有幻灯片的效果。目前 NexT 提供了两款插件 fancybox 和 mediumzoom，两款插件开启一个即可。两款插件的效果不同，各有各的特点，我推荐使用 mediumzoom。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For more information: https://fancyapps.com/fancybox&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">fancybox&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># A JavaScript library for zooming images like Medium.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Do not enable both `fancybox` and `mediumzoom`.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># For more information: https://github.com/francoischalifour/medium-zoom&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">mediumzoom&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="评论系统">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#评论系统" class="anchor-link" aria-label="评论系统">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:评论系统" class="headings">评论系统&lt;/a>&lt;/h4>
&lt;p>参见文章《&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-comments/">Hexo-NexT 主题添加评论系统&lt;/a>》。&lt;/p>
&lt;h4 id="访客统计">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#访客统计" class="anchor-link" aria-label="访客统计">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:访客统计" class="headings">访客统计&lt;/a>&lt;/h4>
&lt;h5 id="leancloud">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#leancloud" class="anchor-link" aria-label="leancloud">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:leancloud" class="headings">Leancloud&lt;/a>&lt;/h5>
&lt;p>访客统计功能使用的也是 Leancloud。创建应用的过程与&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#valine">上文&lt;/a> Valine 评论系统相同，只不过创建的 Class 名称要改为 Counter。这里有一个 &lt;a href="https://github.com/theme-next/hexo-leancloud-counter-security" target="_blank" rel="noopener">hexo-leancloud-counter-security&lt;/a> 插件用来修复访客统计的一个漏洞，使访客统计更安全准确，因为我并没有使用该项功能，所以在此不再做详细说明。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Show number of visitors to each article.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># You can visit https://leancloud.cn to get AppID and AppKey.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">leancloud_visitors&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">app_id&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># &amp;lt;app_id&amp;gt;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">app_key&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># &amp;lt;app_key&amp;gt;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If you don&amp;#39;t care about security in leancloud counter and just want to use it directly&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># (without hexo-leancloud-counter-security plugin), set `security` to `false`.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">security&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">betterPerformance&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h5 id="不蒜子">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#不蒜子" class="anchor-link" aria-label="不蒜子">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:不蒜子" class="headings">不蒜子&lt;/a>&lt;/h5>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-busuanzi.png" alt="hexo-theme-next-busuanzi.png">&lt;/p>
&lt;p>不蒜子的统计准确程度不如 Leancloud，不过它能够统计网站总访客量与访问量，显示在页脚。如果你使用了 Leancloud 统计文章访问量，那么 &lt;code>post_views&lt;/code> 可以设定为 &lt;code>false&lt;/code>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Show Views / Visitors of the website / page with busuanzi.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Get more information on http://ibruce.info/2015/04/04/busuanzi&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">busuanzi_count&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_visitors&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_visitors_icon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">user&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_views&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">total_views_icon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">eye&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">post_views&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">post_views_icon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">eye&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="网页样式布局">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#网页样式布局" class="anchor-link" aria-label="网页样式布局">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:网页样式布局" class="headings">网页样式布局&lt;/a>&lt;/h2>
&lt;p>在对 NexT 主题的个性优化中，如果想要添加一些个性化的内容，就需要对内部代码进行修改。主题提供了许多注入点，可以通过注入点插入自己想要的东西，而不会对原有的主题内部文件进行大量的修改。这样便于以后主题的升级，避免一系列的错误发生。NexT 主题更新到 v7.2.0 后，&lt;a href="https://github.com/theme-next/hexo-theme-next/pull/868" target="_blank" rel="noopener">PR #868&lt;/a> 简化了自定义内容的添加方法，删除了以前版本中所用的 &lt;code>css/_custom.styl&lt;/code> 自定义 CSS 样式文件。如果想要修改样式或者在 HTML 中的 &lt;code>&amp;lt;head&amp;gt;&lt;/code>、&lt;code>&amp;lt;body&amp;gt;&lt;/code> 等部位插入代码。即直接在博客 &lt;code>sourse&lt;/code> 资源文件夹下新建自定义文件 &lt;code>_data/xxx&lt;/code> 实现该功能。&lt;/p>
&lt;p>在主题配置文件 &lt;code>_config.yml&lt;/code> 中，写道：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Define custom file paths.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Create your custom files in site directory `source/_data` and uncomment needed files below.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">custom_file_path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#head: source/_data/head.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#header: source/_data/header.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#sidebar: source/_data/sidebar.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#postMeta: source/_data/post-meta.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#postBodyEnd: source/_data/post-body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#footer: source/_data/footer.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#bodyEnd: source/_data/body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#variable: source/_data/variables.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#mixin: source/_data/mixins.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#style: source/_data/styles.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果需要自定义 CSS 样式，需要将上述代码中 &lt;code>custom_file_path:&lt;/code> 下的 &lt;code>#style: source/_data/styles.styl&lt;/code> 注释取消，然后根据该自定义文件存放路径创建相应文件 &lt;code>styles.styl&lt;/code>，在该文件中添加自定义内容。同样，如果需要在 &lt;code>&amp;lt;head&amp;gt;&lt;/code> 中添加内容，比如修改字体时引入 Google Fonts 以及分析博客数据时引入 Google Analytics，则需要新建 &lt;code>head.swig&lt;/code> 文件，在其中添加自定义内容即可。在 &lt;code>post.swig&lt;/code> 中添加的文章结尾样式，可以直接添加在 &lt;code>post-body-end.swig&lt;/code> 文件中。如果你在这里还没有明白到底该如何设定，没关系，下面的具体教程中我会详细地说明。&lt;/p>
&lt;p>除了 &lt;code>custom_file_path&lt;/code>，NexT 主题还提供了更加灵活的自定义方式（&lt;code>theme_inject&lt;/code>），更多可以阅读&lt;a href="https://theme-next.js.org/docs/advanced-settings#Injects" target="_blank" rel="noopener">文档&lt;/a>。如果你需要在主题目录下自定义文件，可以尝试下载 &lt;a href="https://github.com/jiangtj/hexo-theme-plus" target="_blank" rel="noopener">hexo-theme-plus&lt;/a> 插件，该插件会将你的自定义文件替换主题文件夹内的同目录同名文件。具体使用方法可以参考这篇&lt;a href="https://www.dnocm.com/articles/beechnut/hexo-git-submodule/" target="_blank" rel="noopener">文章&lt;/a>。&lt;/p>
&lt;p>目前网络中的大部分优化教程都是依据旧版主题进行设定的，因此，一些使用最新版本主题的读者根据旧版设定进行操作的话，可能会报错。为了体现本文的与时俱进，本文中采用的即为&lt;em class="emphasis-point">新版的设定方式&lt;/em>，旧版的设定方式在这里不再提及，请采用旧版主题的读者参考过去版本的官方说明文档。&lt;/p>
&lt;h3 id="基本修改方法">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#基本修改方法" class="anchor-link" aria-label="基本修改方法">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:基本修改方法" class="headings">基本修改方法&lt;/a>&lt;/h3>
&lt;p>NexT 主题最大的特点就是主题基础颜色简单，白加黑的简单组合为我们提供了能够随心所欲进行自定义的空间。修改颜色、修改图形、修改动画……这些都能够实现。控制这些自定义样式布局的文件即为 &lt;code>styles.styl&lt;/code>。该文件在主题安装后并不存在，需要你自己建立。首先，你需要在主题配置文件 &lt;code>_config.yml&lt;/code> 中，将下面一栏的注释删除：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">custom_file_path:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- #style: source/_data/styles.styl
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ style: source/_data/styles.styl
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在你的在博客根目录下的 &lt;code>source&lt;/code> 文件夹下新建 &lt;code>_data&lt;/code> 文件夹，在该文件夹下创建名为 &lt;code>styles.styl&lt;/code> 的文件。这里需要注意，不要将 &lt;code>source&lt;/code> 文件夹创建在主题文件夹中。&lt;/p>
&lt;p>该文件有什么作用呢？你可以将自定义的 CSS 样式写入该文件中，这些自定义样式会覆盖主题原有的样式设定。那么该如何自定义样式呢？你只需要一个工具——浏览器。这里我推荐使用 Google 的 Chrome 浏览器，通过浏览器打开你的网站，右键，点击「检查」或者按键盘上的「F12」键，进入&lt;a href="https://developers.google.com/web/tools/chrome-devtools/" target="_blank" rel="noopener">调试模式&lt;/a>。然后点击窗口右上角的小箭头定位元素，定位到你需要修改的元素区域，调试台就会显示这一元素的 CSS 代码，在这里修改你想要的样式，再将其 Copy 到 &lt;code>styles.styl&lt;/code> 中就可以了。&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/hexo-theme-next-f12.png" alt="hexo-theme-next-f12.png">&lt;span class="caption">※ 进行调试&lt;/span>&lt;/p>
&lt;p>如果你此前并未接触过 CSS，为了避免一些错误的发生，建议你先去&lt;a href="https://www.w3school.com.cn/index.html" target="_blank" rel="noopener">这里&lt;/a>学习一下 HTML 和 CSS 的基本语法。这里举一个例子，比如主题的目录元素：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">menu&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">.15&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>{}&lt;/code> 前面的是 HTML 的元素名，&lt;code>{}&lt;/code> 里面的是这个元素的 CSS 样式。&lt;code>margin&lt;/code> 以及 &lt;code>padding&lt;/code> 控制着该元素的区域大小，&lt;code>box-shadow&lt;/code> 控制着放置该元素的区域阴影大小。&lt;/p>
&lt;p>所以如果你在一个网站中看到了自己喜欢的元素样式，直接「F12」，选中该元素，Copy 代码到自己博客，再进行一些样式的微调以适应自己的博客即可。如果你不熟悉 HTML 和 CSS 的语法定义，就可能会找不准元素，而找不准元素不仅可能达不到预期效果，还可能会产生一些新的 Bugs，所以这里还是建议你先阅读一下上文推荐的教程。&lt;/p>
&lt;h3 id="我的-stylesstyl">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#我的-stylesstyl" class="anchor-link" aria-label="我的-stylesstyl">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:我的-stylesstyl" class="headings">我的 styles.styl&lt;/a>&lt;/h3>
&lt;p>在这里附上我的 &lt;code>styles.styl&lt;/code> 文件：&lt;a href="https://guanqr.com/uploads/styles.zip">styles.zip&lt;/a>。建议你不要完全复制我的样式，因为我已经从 Hexo 迁移到了 Hugo，对 NexT 主题的样式修改仅停留在了 &lt;code>v7.4.1&lt;/code> 版本前后。有可能我的博客主题版本与你的不同，不同版本的主题之间有些元素的名称不同，直接使用我的代码可能会出现错误。一步一步耐心地边调试边修改才能达到最佳效果。&lt;/p>
&lt;h3 id="修改字体">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#修改字体" class="anchor-link" aria-label="修改字体">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:修改字体" class="headings">修改字体&lt;/a>&lt;/h3>
&lt;p>参见文章《&lt;a href="https://guanqr.com/tech/website/web-font-guide/">网站字体优化方案&lt;/a>》。&lt;/p>
&lt;h3 id="归档页面添加十二生肖">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#归档页面添加十二生肖" class="anchor-link" aria-label="归档页面添加十二生肖">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:归档页面添加十二生肖" class="headings">归档页面添加十二生肖&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/add-chinese-zodiac-to-next-title.jpg" alt="add-chinese-zodiac-to-next-title.jpg">&lt;/p>
&lt;p>在归档页面的年份后添加十二生肖的图案，具体样式可以参考我的文章目录页面。&lt;/p>
&lt;p>由于 NexT 主题的模板文件内容更新地很快，所以不同版本之间的配置可能不太一样，这里我提供最直接的修改方法，如果你对于主题的代码结构有深入研究的话，可以尝试自己优化一下这部分内容， 比如单独建立一个 &lt;code>chinese-zodiac.swig&lt;/code> 的文件，再在主题文件中引入配置。&lt;/p>
&lt;p>首先是在&lt;a href="https://guanqr.com/uploads/chinese-zodiac.zip">这里&lt;/a>下载十二生肖字体。下载后将解压的三个字体文件全部放在根目录 &lt;code>~/source/fonts/&lt;/code> 下（若无 &lt;code>fonts&lt;/code> 文件夹请自建）。&lt;/p>
&lt;p>然后编辑主题中的 &lt;code>post-collapse.swig&lt;/code> 文件，做如下修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置~/themes/next/layout/_macro/post-collapse.swig
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{%- if year !== current_year %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- set current_year = year %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;collection-year&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- &amp;lt;{%- if theme.seo %}h2{% else %}h1{%- endif %} class=&amp;#34;collection-header&amp;#34;&amp;gt;{{ current_year }}&amp;lt;/{%- if theme.seo %}h2{% else %}h1{%- endif %}&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ &amp;lt;{%- if theme.seo %}h2{% else %}h1{%- endif %} class=&amp;#34;collection-header&amp;#34;&amp;gt;{{ current_year }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;div class=&amp;#34;chinese-zodiac&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 0 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-monkey&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 1 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-rooster&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 2 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-dog&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 3 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-pig&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 4 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-rat&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 5 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-ox&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 6 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-tiger&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 7 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-rabbit&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 8 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-dragon&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 9 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-snake&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 10 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-horse&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- if current_year % 12 == 11 %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;i class=&amp;#34;symbolic-animals icon-goat&amp;#34;&amp;gt;&amp;lt;/i&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- endif %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ &amp;lt;/{%- if theme.seo %}h2{% else %}h1{%- endif %}&amp;gt;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{%- endif %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后再添加自定义样式到 &lt;code>~/source/_data/styles.styl&lt;/code> 中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">chinese-zodiac&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">float&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">right&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">@&lt;/span>&lt;span class="k">font-face&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s1">&amp;#39;chinese-zodiac&amp;#39;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-display&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">swap&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;/fonts/chinese-zodiac.eot&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;/fonts/chinese-zodiac.eot&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;embedded-opentype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;/fonts/chinese-zodiac.woff2&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff2&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;/fonts/chinese-zodiac.woff&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-weight&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">font-style&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">normal&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">symbolic-animals&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">normal&lt;/span> &lt;span class="kc">normal&lt;/span> &lt;span class="kc">normal&lt;/span> &lt;span class="mi">14&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">1&lt;/span> &lt;span class="n">chinese-zodiac&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inherit&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="n">text-rendering&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">auto&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kp">-webkit-&lt;/span>&lt;span class="n">font-smoothing&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">antialiased&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kp">-moz-&lt;/span>&lt;span class="n">osx-font-smoothing&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">grayscale&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-dragon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e806&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-tiger&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e809&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-pig&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e810&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-horse&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e813&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-rat&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e816&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-goat&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e818&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-snake&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e820&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-ox&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e822&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-dog&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e825&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-rabbit&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e826&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-monkey&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e829&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">icon-rooster&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s1">&amp;#39;\e82f&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加球形标签云样式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加球形标签云样式" class="anchor-link" aria-label="添加球形标签云样式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加球形标签云样式" class="headings">添加球形标签云样式&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/tag-cloud.gif" alt="tag-cloud.gif">&lt;span class="caption">※ 标签云样式&lt;/span>&lt;/p>
&lt;p>首先要确保你已经开启标签功能。目前有一个标签云插件可以提供这样的效果：&lt;a href="https://github.com/MikeCoder/hexo-tag-cloud" target="_blank" rel="noopener">hexo-tag-cloud&lt;/a>。执行 &lt;code>npm install hexo-tag-cloud --save&lt;/code> 进行安装。插件安装完成后，你可以自定义标签云的位置，比如显示在侧栏，或者显示在标签页面。比如选择显示在标签页面，则在 &lt;code>~/themes/next/layout/page.swig&lt;/code> 中，添加如下所示代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/themes/next/layout/page.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% if site.tags.length &amp;gt; 1 %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span> &lt;span class="na">charset&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;utf-8&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ url_for(&amp;#39;/js/tagcloud.js&amp;#39;) }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span> &lt;span class="na">charset&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;utf-8&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ url_for(&amp;#39;/js/tagcanvas.js&amp;#39;) }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;widget-wrap&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">h3&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;widget-title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Tag Cloud&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">h3&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;myCanvasContainer&amp;#34;&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;widget tagcloud&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">canvas&lt;/span> &lt;span class="na">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;250&amp;#34;&lt;/span> &lt;span class="na">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;250&amp;#34;&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;resCanvas&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width=100%&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ list_tags() }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">canvas&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endif %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后，你可以选择在博客根目录配置文件 &lt;code>_config.yml&lt;/code> 中添加如下的配置项进行更细致的设定:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># hexo-tag-cloud&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">tag_cloud&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">textFont&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">Trebuchet MS, Helvetica&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">textColor&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#333&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">textHeight&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">25&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">outlineColor&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#E2E1D1&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">maxSpeed&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">0.5&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加线状动态背景">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加线状动态背景" class="anchor-link" aria-label="添加线状动态背景">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加线状动态背景" class="headings">添加线状动态背景&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/dynamic-bg.gif" alt="dynamic-bg.gif">&lt;span class="caption">※ 动画示例&lt;/span>&lt;/p>
&lt;p>如果你对主题自带的动画效果不满意，也可以考虑这一种动画。&lt;/p>
&lt;p>首先在 &lt;code>~/themes/next/layout/_layout.swig&lt;/code> 文件中的 &lt;code>&amp;lt;body&amp;gt;&lt;/code> 里添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/themes/next/layout/_layout.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;bg_content&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">canvas&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;canvas&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">canvas&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在该文件末尾添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/themes/next/layout/_layout.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/js/dynamic_bg.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在&lt;a href="https://guanqr.com/uploads/dynamic-bg.zip">这里&lt;/a>下载 &lt;code>dynamic_bg.js&lt;/code> 文件，将其解压到 &lt;code>~/themes/next/source/js/&lt;/code> 中，该文件是背景动画脚本。最后再添加自定义样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">copy&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">bg_content&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">fixed&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">top&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">-1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加网站崩溃欺骗">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加网站崩溃欺骗" class="anchor-link" aria-label="添加网站崩溃欺骗">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加网站崩溃欺骗" class="headings">添加网站崩溃欺骗&lt;/a>&lt;/h3>
&lt;p>访问别人博客的时候，发现有些博客的标题名称会发生变化，当你离开该博客访问其他网页的时候，标题会变成「页面崩溃」的警告，从而「迫使」你返回博客查看情况，实际上当然无事发生。&lt;/p>
&lt;p>目前 NexT 主题提供了一个插件可以达到这种效果：&lt;a href="https://github.com/theme-next/hexo-next-title" target="_blank" rel="noopener">hexo-next-title&lt;/a>。首先通过 &lt;code>npm install theme-next/hexo-next-title --save&lt;/code> 安装该插件，然后在主题配置文件 &lt;code>_config.yml&lt;/code> 中添加以下配置：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Change title and favicon when window is hidden and visible.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">title_change&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Enabling this feature on non-desktop devices may not be a good choice, but it depends on you.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">onmobile&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Enable random title or not.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Basically `random: true` means you have several titles to display and `random: false` means you have only one title to display.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># When `random: true`, YOU MUST FOLLOW the format which has been commented in two title options below.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># When `random: false`, please fill in the same line of the title option, like `title: one title`.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">random&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Restore the original title after the specified time in milliseconds.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">timeout&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">2019&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Options when window is hidden.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">hidden&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">favicon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/images/favicon-32x32-next.png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">title&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- 404&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- φ(*￣0￣)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- Waiting for you.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Options when window is visible.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">visible&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">favicon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">/images/favicon-32x32-next.png&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">title&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- 200&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- (✿◡‿◡)&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#- Welcome back!&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体样式根据自己的喜好进行设定即可。&lt;/p>
&lt;p>如果你不想使用插件的话，下面是直接修改主题文件的方法。&lt;/p>
&lt;/p>
&lt;p>首先在 &lt;code>~/theme/next/source/js/&lt;/code> 文件夹下创建 &lt;code>crash_cheat.js&lt;/code>，添加代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="cm">/* 所在目录：~/theme/next/source/js/ */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm">/* 崩溃欺骗 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">OriginTitle&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kd">var&lt;/span> &lt;span class="nx">titleTime&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">addEventListener&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;visibilitychange&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">hidden&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">$&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;[rel=&amp;#34;icon&amp;#34;]&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">attr&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;href&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;/images/favicon_1.ico&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;╭(°A°`)╮ 页面崩溃啦 ~&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">clearTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">titleTime&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">$&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;[rel=&amp;#34;icon&amp;#34;]&amp;#39;&lt;/span>&lt;span class="p">).&lt;/span>&lt;span class="nx">attr&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;href&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;/favicon.ico&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;(ฅ&amp;gt;ω&amp;lt;*ฅ) 噫又好了~&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">OriginTitle&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">titleTime&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">setTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="p">()&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">OriginTitle&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span> &lt;span class="mi">2000&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 &lt;code>~/theme/next/layout/_layout.swig&lt;/code> 文件的末尾添加引用：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/theme/next/layout/_layout.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/js/crash_cheat.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加点击爱心特效">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加点击爱心特效" class="anchor-link" aria-label="添加点击爱心特效">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加点击爱心特效" class="headings">添加点击爱心特效&lt;/a>&lt;/h3>
&lt;p>首先在 &lt;code>~/themes/next/source/js/&lt;/code> 下新建文件 &lt;code>clicklove.js&lt;/code>，接着把以下的代码拷贝粘贴到该文件中：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="cm">/* 所在目录：~/themes/next/source/js/ */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="o">!&lt;/span>&lt;span class="kd">function&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">n&lt;/span>&lt;span class="p">(){&lt;/span>&lt;span class="nx">c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;.heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: &amp;#39;&amp;#39;;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}&amp;#34;&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nx">o&lt;/span>&lt;span class="p">(),&lt;/span>&lt;span class="nx">r&lt;/span>&lt;span class="p">()}&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">r&lt;/span>&lt;span class="p">(){&lt;/span>&lt;span class="k">for&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="o">&amp;lt;&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="o">++&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">alpha&lt;/span>&lt;span class="o">&amp;lt;=&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="o">?&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">body&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">removeChild&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">el&lt;/span>&lt;span class="p">),&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">splice&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">))&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">y&lt;/span>&lt;span class="o">--&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">scale&lt;/span>&lt;span class="o">+=&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="mi">004&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">alpha&lt;/span>&lt;span class="o">-=&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="mi">013&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">el&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">style&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cssText&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;left:&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">x&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;px;top:&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">y&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;px;opacity:&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">alpha&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;;transform:scale(&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">scale&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;,&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">scale&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;) rotate(45deg);background:&amp;#34;&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">[&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">color&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;;z-index:99999&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="nx">requestAnimationFrame&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">r&lt;/span>&lt;span class="p">)}&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">o&lt;/span>&lt;span class="p">(){&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">t&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;function&amp;#34;&lt;/span>&lt;span class="o">==&lt;/span>&lt;span class="k">typeof&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">onclick&lt;/span>&lt;span class="o">&amp;amp;&amp;amp;&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">onclick&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">onclick&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kd">function&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="o">&amp;amp;&amp;amp;&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">(),&lt;/span>&lt;span class="nx">i&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">)}}&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">i&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">createElement&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;div&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">className&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;heart&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">d&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">({&lt;/span>&lt;span class="nx">el&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">x&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">clientX&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">y&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">clientY&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="mi">5&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">scale&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">alpha&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nx">color&lt;/span>&lt;span class="o">:&lt;/span>&lt;span class="nx">s&lt;/span>&lt;span class="p">()}),&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">body&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">appendChild&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">)}&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">c&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">a&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">createElement&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;style&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s2">&amp;#34;text/css&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>&lt;span class="k">try&lt;/span>&lt;span class="p">{&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">appendChild&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">createTextNode&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">))}&lt;/span>&lt;span class="k">catch&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">styleSheet&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">cssText&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">}&lt;/span>&lt;span class="nx">t&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementsByTagName&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;head&amp;#34;&lt;/span>&lt;span class="p">)[&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">].&lt;/span>&lt;span class="nx">appendChild&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">a&lt;/span>&lt;span class="p">)}&lt;/span>&lt;span class="kd">function&lt;/span> &lt;span class="nx">s&lt;/span>&lt;span class="p">(){&lt;/span>&lt;span class="k">return&lt;/span>&lt;span class="s2">&amp;#34;rgb(&amp;#34;&lt;/span>&lt;span class="o">+~~&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">random&lt;/span>&lt;span class="p">())&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;,&amp;#34;&lt;/span>&lt;span class="o">+~~&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">random&lt;/span>&lt;span class="p">())&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;,&amp;#34;&lt;/span>&lt;span class="o">+~~&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">Math&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">random&lt;/span>&lt;span class="p">())&lt;/span>&lt;span class="o">+&lt;/span>&lt;span class="s2">&amp;#34;)&amp;#34;&lt;/span>&lt;span class="p">}&lt;/span>&lt;span class="kd">var&lt;/span> &lt;span class="nx">d&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="p">[];&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">requestAnimationFrame&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kd">function&lt;/span>&lt;span class="p">(){&lt;/span>&lt;span class="k">return&lt;/span> &lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">requestAnimationFrame&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">webkitRequestAnimationFrame&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">mozRequestAnimationFrame&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">oRequestAnimationFrame&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">msRequestAnimationFrame&lt;/span>&lt;span class="o">||&lt;/span>&lt;span class="kd">function&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">){&lt;/span>&lt;span class="nx">setTimeout&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">e&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">1e3&lt;/span>&lt;span class="o">/&lt;/span>&lt;span class="mi">60&lt;/span>&lt;span class="p">)}}(),&lt;/span>&lt;span class="nx">n&lt;/span>&lt;span class="p">()}(&lt;/span>&lt;span class="nb">window&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="nb">document&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 &lt;code>~/theme/next/layout/_layout.swig&lt;/code> 文件的末尾添加引用：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/theme/next/layout/_layout.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/js/clicklove.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加评论输入特效">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加评论输入特效" class="anchor-link" aria-label="添加评论输入特效">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加评论输入特效" class="headings">添加评论输入特效&lt;/a>&lt;/h3>
&lt;p>首先在&lt;a href="https://guanqr.com/uploads/activate-power-mode.zip">这里&lt;/a>脚本，解压文件至 &lt;code>~/themes/next/source/js/&lt;/code> 文件夹中。然后在 &lt;code>~/themes/next/layout/_layout.swig&lt;/code> 的末尾添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/themes/next/layout/_layout.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;/js/activate-power-mode.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">POWERMODE&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">colorful&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">POWERMODE&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">shake&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">body&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">addEventListener&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;input&amp;#39;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">POWERMODE&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中：&lt;/p>
&lt;pre tabindex="0">&lt;code>POWERMODE.colorful = true; // 控制开启 / 开启礼花特效
POWERMODE.shake = false; // 控制开启 / 关闭屏幕震动特效
&lt;/code>&lt;/pre>&lt;h3 id="添加页脚微信订阅">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加页脚微信订阅" class="anchor-link" aria-label="添加页脚微信订阅">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加页脚微信订阅" class="headings">添加页脚微信订阅&lt;/a>&lt;/h3>
&lt;p>主题默认的微信订阅功能显示在文章的末尾，个人感觉有些难看，所以我并没有使用主题提供的微信订阅功能，而是将微信订阅的二维码放在了页脚。因为看到很多网站都是在页脚有个微信的 LOGO，鼠标移动到上面便会显示二维码，这样感觉很棒。&lt;/p>
&lt;p>首先需要在 &lt;code>~/sourse/_data/footer.swig&lt;/code> 中添加以下代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/sourse/_data/footer.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;weixin-box&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;weixin-menu&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;weixin-hover&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;weixin-description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>微信扫一扫，订阅本博客&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后添加自定义样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/sourse/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 自定义的页脚微信订阅号样式 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-box&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">43&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.35&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-menu&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">relative&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">cursor&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">pointer&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">url&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sx">https://wechat-logo.svg&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-hover&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.35&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">url&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="sx">https://qrcode.svg&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-repeat&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">no-repeat&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">all&lt;/span> &lt;span class="mf">0.35&lt;/span>&lt;span class="kt">s&lt;/span> &lt;span class="kc">ease-in-out&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">z-index&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1024&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-menu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-hover&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">170&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">150&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-description&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">absolute&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">12&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">all&lt;/span> &lt;span class="mf">0.35&lt;/span>&lt;span class="kt">s&lt;/span> &lt;span class="nb">cubic-bezier&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-menu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">weixin-description&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">opacity&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>替换其中的链接为图片存放地址。图片务必用矢量图 SVG 格式，否则手机上显示效果很差，其它内容请根据自己的情况更改。微信 LOGO 图片（SVG 格式）代码如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">svg&lt;/span> &lt;span class="na">xmlns&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;http://www.w3.org/2000/svg&amp;#34;&lt;/span> &lt;span class="na">width&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;2500&amp;#34;&lt;/span> &lt;span class="na">height&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;2500&amp;#34;&lt;/span> &lt;span class="na">viewBox&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;0 0 300 300&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">path&lt;/span> &lt;span class="na">fill&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#2DC100&amp;#34;&lt;/span> &lt;span class="na">d&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;M300 255c0 24.854-20.147 45-45 45H45c-24.854 0-45-20.146-45-45V45C0 20.147 20.147 0 45 0h210c24.853 0 45 20.147 45 45v210z&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">g&lt;/span> &lt;span class="na">fill&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;#FFF&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">path&lt;/span> &lt;span class="na">d&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;M200.803 111.88c-24.213 1.265-45.268 8.605-62.362 25.188-17.271 16.754-25.155 37.284-23 62.734-9.464-1.172-18.084-2.462-26.753-3.192-2.994-.252-6.547.106-9.083 1.537-8.418 4.75-16.488 10.113-26.053 16.092 1.755-7.938 2.891-14.889 4.902-21.575 1.479-4.914.794-7.649-3.733-10.849-29.066-20.521-41.318-51.232-32.149-82.85 8.483-29.25 29.315-46.989 57.621-56.236 38.635-12.62 82.054.253 105.547 30.927 8.485 11.08 13.688 23.516 15.063 38.224zm-111.437-9.852c.223-5.783-4.788-10.993-10.74-11.167-6.094-.179-11.106 4.478-11.284 10.483-.18 6.086 4.475 10.963 10.613 11.119 6.085.154 11.186-4.509 11.411-10.435zm58.141-11.171c-5.974.11-11.022 5.198-10.916 11.004.109 6.018 5.061 10.726 11.204 10.652 6.159-.074 10.83-4.832 10.772-10.977-.051-6.032-4.981-10.79-11.06-10.679z&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">path&lt;/span> &lt;span class="na">d&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;M255.201 262.83c-7.667-3.414-14.7-8.536-22.188-9.318-7.459-.779-15.3 3.524-23.104 4.322-23.771 2.432-45.067-4.193-62.627-20.432-33.397-30.89-28.625-78.254 10.014-103.568 34.341-22.498 84.704-14.998 108.916 16.219 21.129 27.24 18.646 63.4-7.148 86.284-7.464 6.623-10.15 12.073-5.361 20.804.884 1.612.985 3.653 1.498 5.689zm-87.274-84.499c4.881.005 8.9-3.815 9.085-8.636.195-5.104-3.91-9.385-9.021-9.406-5.06-.023-9.299 4.318-9.123 9.346.166 4.804 4.213 8.69 9.059 8.696zm56.261-18.022c-4.736-.033-8.76 3.844-8.953 8.629-.205 5.117 3.772 9.319 8.836 9.332 4.898.016 8.768-3.688 8.946-8.562.19-5.129-3.789-9.364-8.829-9.399z&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">g&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">svg&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>微信订阅号的二维码可以通过这个&lt;a href="https://cli.im/weixin" target="_blank" rel="noopener">网站&lt;/a>进行转换，下载 SVG 格式的就可以了。&lt;/p>
&lt;h3 id="添加阿里图标支持">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加阿里图标支持" class="anchor-link" aria-label="添加阿里图标支持">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加阿里图标支持" class="headings">添加阿里图标支持&lt;/a>&lt;/h3>
&lt;p>因为 NexT 主题是采用了 Font Awesome 图标，且版本较为落后，并未包含如知乎、豆瓣这类中国大陆的社交网站图标。所以需要加入另一种图标的支持，使得博客可以显示出自定义的图标。当然你也可以在 Font Awesome 的 GitHub 项目中提交你想要的图标的请求 Issues，等待官方的更新。&lt;/p>
&lt;p>首先，前往&lt;a href="http://www.iconfont.cn/" target="_blank" rel="noopener">阿里巴巴矢量库&lt;/a>挑选需要的图标，在图标上点击加入 &lt;i class="fa fa-shopping-cart">&lt;/i> 购物车。然后，进入个人购物车，选择你挑选的图标，下方会有一个「下载代码」的选项，将代码下载下来。将下载的文件解压后，找到 &lt;code>iconfont.css&lt;/code> 文件，打开后将其中的所有内容都复制加入到主题 CSS 自定义文件中的任意位置。这里需要修改部分内容，使得图标样式可以和主题样式保持一致。在这样设置好以后，就可以在博客需要额外图标的地方使用 &lt;code>&amp;lt;i class=&amp;quot;iconfont icon-xxx&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&lt;/code> 的进行引用了。但是这里有一个问题，如果想在侧边栏的社交网站列表里加入知乎、豆瓣这类图标，就不是这样引用了。因为主题配置文件中，对侧边栏的社交网站图标的引用省略了 &lt;code>class&lt;/code> 的部分内容，将其加入到了 &lt;code>layout&lt;/code> 的模版里，所以现在不能直接填写 &lt;code>zhihu&lt;/code> 或者 &lt;code>icon-zhihu&lt;/code> 到主题配置文件中，所以我们需要重新设置一下自定义样式。&lt;/p>
&lt;p>因为阿里巴巴矢量库里有多个知乎、豆瓣的图标，大小不一，即使设置了字体大小页可能无法和原始图像大小一致，在主题 CSS 自定义文件中可以直接加入以下内容使图标显示一致：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 知乎豆瓣图标 font-class引用 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">@&lt;/span>&lt;span class="k">font-face&lt;/span> &lt;span class="p">{&lt;/span>&lt;span class="nt">font-family&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;iconfont&amp;#34;&lt;/span>&lt;span class="o">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;iconfont.eot?t=1528847148903&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span> &lt;span class="c">/* IE9*/&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">src&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;iconfont.eot?t=1528847148903#iefix&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;embedded-opentype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="c">/* IE6-IE8 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAYUAAsAAAAACIgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kimY21hcAAAAYAAAABmAAABnM+nbGdnbHlmAAAB6AAAAigAAAJIGJn6FGhlYWQAAAQQAAAALwAAADYRrDxZaGhlYQAABEAAAAAcAAAAJAfeA4VobXR4AAAEXAAAABAAAAAQD+kAAGxvY2EAAARsAAAACgAAAAoBmgDsbWF4cAAABHgAAAAfAAAAIAETAF1uYW1lAAAEmAAAAUUAAAJtPlT+fXBvc3QAAAXgAAAAMQAAAEIxfhjKeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzbxdzwv4EhhrmBoQEozAiSAwAx0A0oeJzFkNEJwCAMRC/GFikdpZ+lOE+/OoKzOVDWsEn0xwk8eTE5DiIC2ACwcikRoA8E06suuc843I94dE56gt5FstTWps5EnkjesSVpxzLRutWzTq/3mOy/y0CfKLljvtQOwg+NwxM7AAB4nB3PzWvTcBjA8d/z+zVJX5MmaV6aNk2T2KZbu9Y1bWqna1mVwqas9QVlB6F1Igi+4GkwBu6gIOhh1wq+IMIEbx487aCC4MF/wKO6g568emk03cP38PBcHj6IQujfd3JAVCSiElpEZ9AQIaDLYLFYB9NpVHEZJJOSlBRLHNsxGduqkmVQLDol171GUaEZmgMWcuCadc+pYgeajQ4+CXVZB0hntItCISuQPYiqTu6hv4ZfgWTYWa6z4K9Wuql6XgxvxQUhLQhPwjRFhTEOcSzcVuQIFYnS/muK06QDYw4bEE872rmNRD4jjB817ugFJQKwuwtiJs/ud3mND9rRZFFIM8lEWNUS9rEUbB3GVDGuF3+iYEhg/Uw+kC46hU6jtcDpVqEMXhfcRtExO9AqHmForxXsriIzNguSywITRMuzY5DSgRowXkvkXaXl8sRmHJt3YfQRC3if4NALOuH/ApmnLqQVVcfZWLzNXcEY3oncV0bm5M5lgucXzueSucQbzMZ25gXqd1/ffro63FTTh7BuFVZWxtQSFdqwQsbw0uJSJESRcnt7PZNs4spVo3KtDzGCS+382dIn3K08Nroe3J9uDof42fRtr4ejM2voCLxHZmoRKUhHSDQlE7yW4/Im7zKyYktmE5qmBIGdZh7gv9Mwtmrl5XvTl7eWj1f+kPx0Au/9b7U2XC/1CBpMn/dHc3DC/1LqjwcDyE0m/o+7oxs3g0//AcOlaXN4nGNgZGBgAGI3hpVx8fw2Xxm4WRhA4LpbjQ6C/n+UhYHZHsjlYGACiQIA9CsInAB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJtBAAAAAPpAAAEAAAABAAAAAAAAAAAdgDsASQAAHicY2BkYGBgYQhkYGUAASYg5gJCBob/YD4DABESAXEAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgbGCtSojM6OUpzgjsShVNyW/NCkxj4EBAF/8B44AAAA=&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;woff&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;iconfont.ttf?t=1528847148903&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;truetype&amp;#39;&lt;/span>&lt;span class="o">),&lt;/span> &lt;span class="c">/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">url&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;iconfont.svg?t=1528847148903#iconfont&amp;#39;&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="nt">format&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="s1">&amp;#39;svg&amp;#39;&lt;/span>&lt;span class="o">);&lt;/span> &lt;span class="c">/* iOS 4.1- */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 以上是下载来自阿里巴巴矢量库的图标数据 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 以下代码相对下载下来的代码做了部分修改 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">fa-custom&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-family&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="s2">&amp;#34;iconfont&amp;#34;&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">inherit&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">normal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kp">-webkit-&lt;/span>&lt;span class="n">font-smoothing&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">antialiased&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kp">-moz-&lt;/span>&lt;span class="n">osx-font-smoothing&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">grayscale&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">zhihu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;\e6ba&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">douban&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">before&lt;/span> &lt;span class="p">{&lt;/span> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;\e638&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>举个例子，在主题配置文件中，社交账号图标设置好以后，类似是以下这样的格式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">social&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Twitter&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://twitter.com/user_id || twitter&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">GitHub&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://github.com/user_id || github&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Zhihu&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://www.zhihu.com/people/user_id || custom zhihu&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">Douban&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://www.douban.com/people/user_id/ || custom douban&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="添加友情链接页面">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#添加友情链接页面" class="anchor-link" aria-label="添加友情链接页面">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:添加友情链接页面" class="headings">添加友情链接页面&lt;/a>&lt;/h3>
&lt;p>&lt;img src="https://guanqr.com/images/blogroll-old-style.png" alt="blogroll-old-style.png">&lt;/p>
&lt;p>NexT 主题自带的友情链接的位置是在侧栏的 Social Link 中，位置不太明显，而且容量比较小，不美观。因此可以自定义一个特定的页面，单独显示友情链接&lt;sup id="fnref:3">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:3" class="footnote-ref" role="doc-noteref">[3]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>首先，在 &lt;code>~/themes/next/layout/&lt;/code> 目录下新建一个 &lt;code>links.swig&lt;/code> 文件，并写入以下内容：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt"> 10
&lt;/span>&lt;span class="lnt"> 11
&lt;/span>&lt;span class="lnt"> 12
&lt;/span>&lt;span class="lnt"> 13
&lt;/span>&lt;span class="lnt"> 14
&lt;/span>&lt;span class="lnt"> 15
&lt;/span>&lt;span class="lnt"> 16
&lt;/span>&lt;span class="lnt"> 17
&lt;/span>&lt;span class="lnt"> 18
&lt;/span>&lt;span class="lnt"> 19
&lt;/span>&lt;span class="lnt"> 20
&lt;/span>&lt;span class="lnt"> 21
&lt;/span>&lt;span class="lnt"> 22
&lt;/span>&lt;span class="lnt"> 23
&lt;/span>&lt;span class="lnt"> 24
&lt;/span>&lt;span class="lnt"> 25
&lt;/span>&lt;span class="lnt"> 26
&lt;/span>&lt;span class="lnt"> 27
&lt;/span>&lt;span class="lnt"> 28
&lt;/span>&lt;span class="lnt"> 29
&lt;/span>&lt;span class="lnt"> 30
&lt;/span>&lt;span class="lnt"> 31
&lt;/span>&lt;span class="lnt"> 32
&lt;/span>&lt;span class="lnt"> 33
&lt;/span>&lt;span class="lnt"> 34
&lt;/span>&lt;span class="lnt"> 35
&lt;/span>&lt;span class="lnt"> 36
&lt;/span>&lt;span class="lnt"> 37
&lt;/span>&lt;span class="lnt"> 38
&lt;/span>&lt;span class="lnt"> 39
&lt;/span>&lt;span class="lnt"> 40
&lt;/span>&lt;span class="lnt"> 41
&lt;/span>&lt;span class="lnt"> 42
&lt;/span>&lt;span class="lnt"> 43
&lt;/span>&lt;span class="lnt"> 44
&lt;/span>&lt;span class="lnt"> 45
&lt;/span>&lt;span class="lnt"> 46
&lt;/span>&lt;span class="lnt"> 47
&lt;/span>&lt;span class="lnt"> 48
&lt;/span>&lt;span class="lnt"> 49
&lt;/span>&lt;span class="lnt"> 50
&lt;/span>&lt;span class="lnt"> 51
&lt;/span>&lt;span class="lnt"> 52
&lt;/span>&lt;span class="lnt"> 53
&lt;/span>&lt;span class="lnt"> 54
&lt;/span>&lt;span class="lnt"> 55
&lt;/span>&lt;span class="lnt"> 56
&lt;/span>&lt;span class="lnt"> 57
&lt;/span>&lt;span class="lnt"> 58
&lt;/span>&lt;span class="lnt"> 59
&lt;/span>&lt;span class="lnt"> 60
&lt;/span>&lt;span class="lnt"> 61
&lt;/span>&lt;span class="lnt"> 62
&lt;/span>&lt;span class="lnt"> 63
&lt;/span>&lt;span class="lnt"> 64
&lt;/span>&lt;span class="lnt"> 65
&lt;/span>&lt;span class="lnt"> 66
&lt;/span>&lt;span class="lnt"> 67
&lt;/span>&lt;span class="lnt"> 68
&lt;/span>&lt;span class="lnt"> 69
&lt;/span>&lt;span class="lnt"> 70
&lt;/span>&lt;span class="lnt"> 71
&lt;/span>&lt;span class="lnt"> 72
&lt;/span>&lt;span class="lnt"> 73
&lt;/span>&lt;span class="lnt"> 74
&lt;/span>&lt;span class="lnt"> 75
&lt;/span>&lt;span class="lnt"> 76
&lt;/span>&lt;span class="lnt"> 77
&lt;/span>&lt;span class="lnt"> 78
&lt;/span>&lt;span class="lnt"> 79
&lt;/span>&lt;span class="lnt"> 80
&lt;/span>&lt;span class="lnt"> 81
&lt;/span>&lt;span class="lnt"> 82
&lt;/span>&lt;span class="lnt"> 83
&lt;/span>&lt;span class="lnt"> 84
&lt;/span>&lt;span class="lnt"> 85
&lt;/span>&lt;span class="lnt"> 86
&lt;/span>&lt;span class="lnt"> 87
&lt;/span>&lt;span class="lnt"> 88
&lt;/span>&lt;span class="lnt"> 89
&lt;/span>&lt;span class="lnt"> 90
&lt;/span>&lt;span class="lnt"> 91
&lt;/span>&lt;span class="lnt"> 92
&lt;/span>&lt;span class="lnt"> 93
&lt;/span>&lt;span class="lnt"> 94
&lt;/span>&lt;span class="lnt"> 95
&lt;/span>&lt;span class="lnt"> 96
&lt;/span>&lt;span class="lnt"> 97
&lt;/span>&lt;span class="lnt"> 98
&lt;/span>&lt;span class="lnt"> 99
&lt;/span>&lt;span class="lnt">100
&lt;/span>&lt;span class="lnt">101
&lt;/span>&lt;span class="lnt">102
&lt;/span>&lt;span class="lnt">103
&lt;/span>&lt;span class="lnt">104
&lt;/span>&lt;span class="lnt">105
&lt;/span>&lt;span class="lnt">106
&lt;/span>&lt;span class="lnt">107
&lt;/span>&lt;span class="lnt">108
&lt;/span>&lt;span class="lnt">109
&lt;/span>&lt;span class="lnt">110
&lt;/span>&lt;span class="lnt">111
&lt;/span>&lt;span class="lnt">112
&lt;/span>&lt;span class="lnt">113
&lt;/span>&lt;span class="lnt">114
&lt;/span>&lt;span class="lnt">115
&lt;/span>&lt;span class="lnt">116
&lt;/span>&lt;span class="lnt">117
&lt;/span>&lt;span class="lnt">118
&lt;/span>&lt;span class="lnt">119
&lt;/span>&lt;span class="lnt">120
&lt;/span>&lt;span class="lnt">121
&lt;/span>&lt;span class="lnt">122
&lt;/span>&lt;span class="lnt">123
&lt;/span>&lt;span class="lnt">124
&lt;/span>&lt;span class="lnt">125
&lt;/span>&lt;span class="lnt">126
&lt;/span>&lt;span class="lnt">127
&lt;/span>&lt;span class="lnt">128
&lt;/span>&lt;span class="lnt">129
&lt;/span>&lt;span class="lnt">130
&lt;/span>&lt;span class="lnt">131
&lt;/span>&lt;span class="lnt">132
&lt;/span>&lt;span class="lnt">133
&lt;/span>&lt;span class="lnt">134
&lt;/span>&lt;span class="lnt">135
&lt;/span>&lt;span class="lnt">136
&lt;/span>&lt;span class="lnt">137
&lt;/span>&lt;span class="lnt">138
&lt;/span>&lt;span class="lnt">139
&lt;/span>&lt;span class="lnt">140
&lt;/span>&lt;span class="lnt">141
&lt;/span>&lt;span class="lnt">142
&lt;/span>&lt;span class="lnt">143
&lt;/span>&lt;span class="lnt">144
&lt;/span>&lt;span class="lnt">145
&lt;/span>&lt;span class="lnt">146
&lt;/span>&lt;span class="lnt">147
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 所在目录：~/themes/next/layout/ --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% block content %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {######################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### LINKS BLOCK ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {######################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;links&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">style&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">links-content&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-top&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">1&lt;/span>&lt;span class="kt">rem&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">link-navigation&lt;/span>&lt;span class="p">::&lt;/span>&lt;span class="nd">after&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">content&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34; &amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">clear&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">both&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">240&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">rem&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition-duration&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">0.15&lt;/span>&lt;span class="kt">s&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">rem&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">flex&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">@&lt;/span>&lt;span class="k">media&lt;/span> &lt;span class="o">(&lt;/span>&lt;span class="nt">max-width&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="nt">767px&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">nth-child&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nt">odd&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">float&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">left&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">nth-child&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nt">even&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">float&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">left&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">nth-child&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nt">odd&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">float&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">left&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">nth-child&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nt">even&lt;/span>&lt;span class="o">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">float&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">right&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transform&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">scale&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mf">1.1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.12&lt;/span>&lt;span class="p">),&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">6&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.04&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">ava&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">rem&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">rem&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-right&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">4&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">card-header&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">italic&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">overflow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">card-header&lt;/span> &lt;span class="nt">a&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">normal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#2bbc8a&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-weight&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">bold&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-decoration&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">card-header&lt;/span> &lt;span class="nt">a&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#a166ab&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-decoration&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">card&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">card-header&lt;/span> &lt;span class="p">.&lt;/span>&lt;span class="nc">info&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="kc">normal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mh">#a3a3a3&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="mi">14&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">min-width&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">overflow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">hidden&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">white-space&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">nowrap&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">span&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">focus-links&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">normal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">position&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">unset&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">7&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">11&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#42c02e&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">40&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">24&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">22&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#42c02e&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">span&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">focus-links&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#318024&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">friends-btn&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#555&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#fff&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inset&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span>&lt;span class="mf">.35&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">none&lt;/span>&lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">transition-property&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">unset&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inherit&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">.&lt;/span>&lt;span class="nc">friends-btn&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="nd">hover&lt;/span>&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">rgb&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">255&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="cp">!important&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">15&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">box-shadow&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inset&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">10&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="nb">rgba&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mf">0.35&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-image&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">linear-gradient&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">90&lt;/span>&lt;span class="kt">deg&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">#a166ab&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">#ef4e7b&lt;/span> &lt;span class="mi">25&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">#f37055&lt;/span> &lt;span class="mi">50&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">#ef4e7b&lt;/span> &lt;span class="mi">75&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mh">#a166ab&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inherit&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">style&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;links-content&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;link-navigation&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% for link in theme.mylinks %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;card&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">img&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;ava&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ link.avatar }}&amp;#34;&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;card-header&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ link.site }}&amp;#34;&lt;/span> &lt;span class="na">target&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;_blank&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span> {{ link.nickname }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&lt;/span> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ link.site }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;focus-links&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>关注&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;info&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ link.info }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% endfor %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ page.content }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {##########################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### END LINKS BLOCK ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {##########################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endblock %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中的样式可以根据个人喜好进行更改。&lt;/p>
&lt;p>然后，修改 &lt;code>~/themes/next/layout/page.swig&lt;/code> 文件，在如下所示位置处进行添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;span class="lnt">68
&lt;/span>&lt;span class="lnt">69
&lt;/span>&lt;span class="lnt">70
&lt;/span>&lt;span class="lnt">71
&lt;/span>&lt;span class="lnt">72
&lt;/span>&lt;span class="lnt">73
&lt;/span>&lt;span class="lnt">74
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">{% extends &amp;#39;_layout.swig&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% import &amp;#39;_macro/sidebar.swig&amp;#39; as sidebar_template with context %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% block title %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- set page_title_suffix = &amp;#39; | &amp;#39; + title %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- if page.type === &amp;#39;categories&amp;#39; and not page.title %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- __(&amp;#39;title.category&amp;#39;) + page_title_suffix }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- elif page.type === &amp;#39;tags&amp;#39; and not page.title %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- __(&amp;#39;title.tag&amp;#39;) + page_title_suffix }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {%- elif page.type === &amp;#39;links&amp;#39; and not page.title %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {{- __(&amp;#39;title.links&amp;#39;) + page_title_suffix }}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> {%- elif page.type === &amp;#39;schedule&amp;#39; and not page.title %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- __(&amp;#39;title.schedule&amp;#39;) + page_title_suffix }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- else %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{- page.title + page_title_suffix }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- endif %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% endblock %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% block content %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;posts-expand&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {##################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### PAGE BLOCK ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {##################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;post-block&amp;#34; lang=&amp;#34;{{ page.lang or page.language or config.language }}&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% include &amp;#39;_partials/page/page-header.swig&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {#################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### PAGE BODY ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {#################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;post-body{%- if page.direction and page.direction.toLowerCase() === &amp;#39;rtl&amp;#39; %} rtl{%- endif %}&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- if page.type === &amp;#39;tags&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;tag-cloud&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;tag-cloud-title&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ _p(&amp;#39;counter.tag_cloud&amp;#39;, site.tags.length) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;tag-cloud-tags&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% elif page.type === &amp;#39;categories&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;category-all-page&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;category-all-title&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ _p(&amp;#39;counter.categories&amp;#39;, site.categories.length) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;category-all&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ list_categories() }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {% elif page.type === &amp;#39;links&amp;#39; %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ {% include &amp;#39;links.swig&amp;#39; %}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> {% elif page.type === &amp;#39;schedule&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;div class=&amp;#34;event-list&amp;#34;&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% include &amp;#39;_scripts/pages/schedule.swig&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% else %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ page.content }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {%- endif %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {#####################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### END PAGE BODY ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {#####################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% include &amp;#39;_partials/page/breadcrumb.swig&amp;#39; %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {######################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {### END PAGE BLOCK ###}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {######################}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &amp;lt;/div&amp;gt;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endblock %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% block sidebar %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {{ sidebar_template.render(true) }}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endblock %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>接着创建一个新页面：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-sh" data-lang="sh">&lt;span class="line">&lt;span class="cl">hexo new page &lt;span class="s2">&amp;#34;links&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这样在 &lt;code>~/source/&lt;/code> 目录下会生成一个 &lt;code>links&lt;/code> 文件夹，打开其中的 &lt;code>index.md&lt;/code> 文件，在标题头中写入 &lt;code>type = &amp;quot;links&amp;quot;&lt;/code> 这个属性头，如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">title: 友情链接
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">date: 2019-09-29 13:08:43
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ type: &amp;#34;links&amp;#34;
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果要想在菜单栏中显示该页面的中文名称的话，不要忘记在语言配置 &lt;code>zh-CN.yml&lt;/code> 文件中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/themes/next/languages/zh-CN.yml
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">menu:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> home: 首页
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> archives: 归档
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> categories: 分类
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> tags: 标签
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> about: 关于
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> search: 搜索
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> schedule: 日程表
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> sitemap: 站点地图
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> commonweal: 公益404
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ links: 友链
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最后，在主题配置文件 &lt;code>~/themes/next/_config.yml&lt;/code> 文件中按照以下格式添加友链：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 友情链接&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">mylinks&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">nickname&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 昵称&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">avatar&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 头像地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">site&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#友链地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">info&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#相关说明&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>- &lt;span class="nt">nickname&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 昵称&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">avatar&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># 头像地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">site&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#友链地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">info&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#相关说明&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="文章内容美化">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#文章内容美化" class="anchor-link" aria-label="文章内容美化">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:文章内容美化" class="headings">文章内容美化&lt;/a>&lt;/h2>
&lt;h3 id="主题自带样式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#主题自带样式" class="anchor-link" aria-label="主题自带样式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:主题自带样式" class="headings">主题自带样式&lt;/a>&lt;/h3>
&lt;p>主题自带的一些标签功能如 Note、Tabs、Button 等在官方文档的 &lt;a href="https://theme-next.js.org/docs/tag-plugins/" target="_blank" rel="noopener">Tag Plugins&lt;/a> 中有详细的说明。请仔细阅读官方文档进行配置与使用。由于目前本博客从 Hexo 迁移到了 Hugo，主题也不再是 NexT，因此主题部分自带功能的展示效果受到一定限制，这里不再进行详细说明和展示。&lt;/p>
&lt;p>请注意，在你使用 Centered Quote 文本居中引用标签功能的时候，如果你使用了插件 &lt;a href="https://github.com/theme-next/hexo-filter-optimize" target="_blank" rel="noopener">hexo-filter-optimize&lt;/a> 为博客加速，那么可能会对该功能的效果造成一定的影响，对该问题的具体分析可参见我的文章《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》。&lt;/p>
&lt;h3 id="自定义样式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#自定义样式" class="anchor-link" aria-label="自定义样式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:自定义样式" class="headings">自定义样式&lt;/a>&lt;/h3>
&lt;p>由于是自定义的样式，故要自己将 CSS 代码加到 &lt;code>styles.styl&lt;/code> 中，下文的自定义样式都是如此。点击&lt;a href="http://www.divcss5.com/rumen/r3.shtml" target="_blank" rel="noopener">这里&lt;/a>了解一些 CSS 中 &lt;code>id&lt;/code> 和 &lt;code>class&lt;/code> 的知识&lt;sup id="fnref:4">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:4" class="footnote-ref" role="doc-noteref">[4]&lt;/a>&lt;/sup>。&lt;/p>
&lt;h4 id="引用样式">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#引用样式" class="anchor-link" aria-label="引用样式">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:引用样式" class="headings">引用样式&lt;/a>&lt;/h4>
&lt;p>需加入 &lt;code>styles.styl&lt;/code> 的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;span class="lnt">9
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/sourse/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 自定义的引用样式 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">blockquote&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nc">question&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#555&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-left&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">4&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="kc">solid&lt;/span> &lt;span class="nb">rgb&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">16&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">152&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">173&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">rgb&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">227&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">242&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">253&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin-bottom&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;ul>
&lt;li>文字颜色改 &lt;code>color&lt;/code> 的值&lt;/li>
&lt;li>背景色改 &lt;code>background-color&lt;/code> 的值&lt;/li>
&lt;li>边框颜色和粗细改 &lt;code>border-left&lt;/code> 的值&lt;/li>
&lt;/ul>
&lt;p>效果：&lt;/p>
&lt;blockquote class="question">内容&lt;/blockquote>
&lt;p>源码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">blockquote&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;question&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>内容&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">blockquote&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h4 id="数字块">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#数字块" class="anchor-link" aria-label="数字块">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:数字块" class="headings">数字块&lt;/a>&lt;/h4>
&lt;p>需加入 &lt;code>styles.styl&lt;/code> 的代码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/sourse/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 自定义的数字块 */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nt">span&lt;/span>&lt;span class="p">#&lt;/span>&lt;span class="nn">inline-toc&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">inline-block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">border-radius&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">80&lt;/span>&lt;span class="kt">%&lt;/span> &lt;span class="mi">100&lt;/span>&lt;span class="kt">%&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span> &lt;span class="mi">20&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">background-color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="nb">rgb&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">227&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">242&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="mi">253&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#555&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">padding&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">0.05&lt;/span>&lt;span class="kt">em&lt;/span> &lt;span class="mf">0.4&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">5&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">2&lt;/span>&lt;span class="kt">px&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="kt">px&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">line-height&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mf">1.5&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;span id="inline-toc">1.&lt;/span>左边是效果。&lt;/p>
&lt;p>源码：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;inline-toc&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>1.&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="插入图片">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#插入图片" class="anchor-link" aria-label="插入图片">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:插入图片" class="headings">插入图片&lt;/a>&lt;/h3>
&lt;p>图片可以选择通过上传到图床再引入图床链接的方式载入，或者直接将图片存放在博客文件夹中载入。如果想将图片上传到图床，我不推荐使用一些免费的图床，因为这些图床可能不太稳定，图片很可能会挂掉，我推荐使用&lt;a href="https://www.aliyun.com/product/oss/" target="_blank" rel="noopener">阿里云储存对象 OSS 服务&lt;/a>。如果选择直接将图片存放至博客文件夹中，我建议你在 &lt;code>~/source/&lt;/code> 文件夹内新建一个 &lt;code>images&lt;/code> 文件夹来存放图片，或者在每一篇文章存放的 &lt;code>~/source/_posts&lt;/code> 文件夹下存放图片。&lt;/p>
&lt;p>通过修改博客配置文件 &lt;code>_config.yml&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">post_asset_folder&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>将 &lt;code>_config.yml&lt;/code> 文件中的配置项 &lt;code>post_asset_folder&lt;/code> 设为 &lt;code>true&lt;/code> 后，执行命令 &lt;code>hexo new post_name&lt;/code>，在 &lt;code>~/source/_posts/&lt;/code> 中会生成文章 &lt;code>post_name.md&lt;/code> 和同名文件夹 &lt;code>post_name&lt;/code>。将图片资源放在 &lt;code>post_name&lt;/code> 中，文章就可以使用相对路径引用图片资源了。&lt;/p>
&lt;p>图片载入的方式可直接使用 Markdown 的语法：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">![&lt;span class="nt">images&lt;/span>](&lt;span class="na">images.png&lt;/span>)
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在 &lt;code>()&lt;/code> 内填写图片的路径，注意相对路径与绝对路径的问题。&lt;/p>
&lt;p>如果你想要一次载入多个图片，NexT 官方也提供了特有的标签语句，请参考官方文档的&lt;a href="https://theme-next.js.org/docs/tag-plugins/group-pictures" target="_blank" rel="noopener">使用方法&lt;/a>。&lt;/p>
&lt;p>另外，有一个图片的插件：&lt;a href="https://github.com/xcodebuild/hexo-asset-image" target="_blank" rel="noopener">hexo-asset-image&lt;/a>。很多 Hexo 博客搭建教程中都有推荐使用该插件载入图片，我认为根本没必要使用这个插件，更何况这个插件或多或少存在一些路径的问题。&lt;/p>
&lt;p>在该插件的 v.1.0.0 版本中，如果你采用的是 &lt;code>yourname.github.io&lt;/code> 域名，生成的 HTML 文件中图片引用地址为 &lt;code>/.io//imagename.jpg/&lt;/code>；如果你设置为 &lt;code>yourname.github.io/blog/&lt;/code> 这样的地址，生成的 HTML 文件中图片引用地址为 &lt;code>/blog/blog/imagename.jpg/&lt;/code>。在该插件的 &lt;a href="https://github.com/xcodebuild/hexo-asset-image/issues/47" target="_blank" rel="noopener">Issues&lt;/a> 中，有人提出问题的解决方案。打开博客文件夹下的 &lt;code>node_modules/hexo-asset-image/index.js&lt;/code>，即该插件的安装位置，修改第 24 行代码，如下所示：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/node_modules/hexo-asset-image/index.js
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">else {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ var endPos = link.length-1;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>&lt;span class="gd">- var endPos = link.lastIndexOf(&amp;#39;.&amp;#39;);
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span> }
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对于图片的说明文字部分，正常情况下，不论你使用下面两种方式中的任何一种，图片下方都不会出现文字说明。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">![&lt;span class="nt">Alt text&lt;/span>](&lt;span class="na">/path/to/img.jpg&lt;/span>)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">![&lt;span class="nt">Alt text&lt;/span>](&lt;span class="na">/path/to/img.jpg &amp;#34;Optional title&amp;#34;&lt;/span>)
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>对于 Markdown 图片引用的代码，主要有三个部分：&lt;/p>
&lt;ol>
&lt;li>&lt;code>Alt text&lt;/code>，替代文本，图片无法显示时读者看到的就是它&lt;/li>
&lt;li>&lt;code>/path/to/img.jpg&lt;/code>，URL，即图片的链接&lt;/li>
&lt;li>&lt;code>Optional title&lt;/code>，图片的标题&lt;/li>
&lt;/ol>
&lt;p>添加的 &lt;code>Optional title&lt;/code> 会变成图片的 title 属性，当你将鼠标停靠在图片上面，就会显示所写的内容，我们需要给图片添加的说明文自就可以利用这个属性。然而，对于这个属性，在电脑上还好，但在手机上就惨了，手机上哪来的鼠标啊？所以自己添加的说明文字在手机上根本不会显示的，而就算在电脑上，也需要另外的交互——鼠标停留——才会显示，不够直观。&lt;/p>
&lt;p>如果你使用了 NexT 主题的&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#%e5%9b%be%e7%89%87%e6%b5%8f%e8%a7%88">图片浏览功能&lt;/a>中的 fancybox，则会在图片下方渲染出图片的说明文字。不过，如果你不想使用 fancybox，却也想渲染图片的说明文字，就必须对 Hexo 的渲染组件进行修改。&lt;/p>
&lt;p>首先在你的博客站点根目录下打开 &lt;code>node_modules&lt;/code> 文件夹，然后搜索 &lt;code>marked&lt;/code> 文件夹，，进入该文件夹，编辑 &lt;code>lib/marked.js&lt;/code> 文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/node_modules/marked/lib/marked.js
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Renderer.prototype.image = function(href, title, text) {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- if (href === null) {
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- return text;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">-}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ if (this.options.baseUrl &amp;amp;&amp;amp; !originIndependentUrl.test(href)) {
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ href = resolveUrl(this.options.baseUrl, href);
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ }
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ var out = &amp;#39;&amp;lt;img src=&amp;#34;&amp;#39; + href + &amp;#39;&amp;#34; alt=&amp;#34;&amp;#39; + text + &amp;#39;&amp;#34;&amp;#39;;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> if (title) {
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- out += &amp;#39; title=&amp;#34;&amp;#39; + title + &amp;#39;&amp;#34;&amp;#39;;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ out += &amp;#39;&amp;gt;&amp;#39; + &amp;#39;&amp;lt;i class=&amp;#34;img-caption&amp;#34;&amp;gt;&amp;#39; + &amp;#39;◎ &amp;#39; + title + &amp;#39;&amp;lt;/i&amp;#39;;
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> }
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> out += this.options.xhtml ? &amp;#39;/&amp;gt;&amp;#39; : &amp;#39;&amp;gt;&amp;#39;;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> return out;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">};
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>上面将会删除 &lt;code>title&lt;/code>，如果你不想，可以自行修改。然后，往 &lt;code>styles.styl&lt;/code> 添加 CSS 样式：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-css" data-lang="css">&lt;span class="line">&lt;span class="cl">&lt;span class="c">/* 文件位置：~/source/_data/styles.styl */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">.&lt;/span>&lt;span class="nc">img-caption&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-style&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">normal&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">margin&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mi">0&lt;/span> &lt;span class="mf">.7&lt;/span>&lt;span class="kt">em&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-size&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">90&lt;/span>&lt;span class="kt">%&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">color&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mh">#555&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">display&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">block&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-align&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="kc">center&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">text-indent&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">0&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">font-family&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="n">STKaiti&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="kc">serif&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最终呈现的效果就和我的博客图片说明文字效果一样。&lt;/p>
&lt;h3 id="插入音乐">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#插入音乐" class="anchor-link" aria-label="插入音乐">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:插入音乐" class="headings">插入音乐&lt;/a>&lt;/h3>
&lt;p>首先，你可以直接使用 HTML 的标签，格式如下，其中 &lt;code>music-url&lt;/code> 替换为你需要加载的音乐即可：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">audio&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;music-url&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;&amp;#34;&lt;/span> &lt;span class="na">controls&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;controls&amp;#34;&lt;/span> &lt;span class="na">loop&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;loop&amp;#34;&lt;/span> &lt;span class="na">preload&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;meta&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Your browser does not support the audio tag.&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">audio&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>当然，网易云音乐的外链很好用，不仅有可以单曲，还能有歌单。在网易云音乐的播放列表中有生成外链播放器，配置好样式直接复制代码插入文章即可。但是有一些音乐因为版权原因放不了，还有就是不完全支持 https，导致小绿锁不见了。要解决这些缺点，就需要安装插件。&lt;/p>
&lt;p>这里推荐 &lt;a href="https://github.com/MoePlayer/hexo-tag-aplayer" target="_blank" rel="noopener">hexo-tag-aplayer&lt;/a>，&lt;a href="https://github.com/MoePlayer/APlayer" target="_blank" rel="noopener">APlayer&lt;/a> 播放器的 Hexo 标签插件。安装：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-tag-aplayer --save
&lt;/code>&lt;/pre>&lt;p>载入标签格式如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">aplayer&lt;/span> &lt;span class="s2">&amp;#34;歌曲名&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;歌手名&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;https://什么什么什么.mp3&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;https://封面图.jpg&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;lrc:https://歌词.lrc&amp;#34;&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>还可以支持歌单：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">aplayerlist&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;autoplay&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">false&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;showlrc&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">3&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;mutex&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;music&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;歌曲名&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;歌手名&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;url&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://什么什么什么.mp3&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;pic&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://封面图.jpg&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;lrc&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://歌词.lrc&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;title&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;歌曲名&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;author&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;歌手名&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;url&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://什么什么什么.mp3&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;pic&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://封面图.jpg&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="s2">&amp;#34;lrc&amp;#34;&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;https://歌词.lrc&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">endaplayerlist&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>具体的参数设置可以参考该插件的 &lt;a href="https://web.archive.org/web/20190226111008/https://github.com/MoePlayer/hexo-tag-aplayer" target="_blank" rel="noopener">README&lt;/a> 和这插件的 Aplayer 的&lt;a href="https://web.archive.org/web/20190226111008/https://aplayer.js.org/" target="_blank" rel="noopener">官方文档&lt;/a>。&lt;/p>
&lt;p>另外，该插件与 &lt;a href="https://github.com/theme-next/hexo-filter-optimize" target="_blank" rel="noopener">hexo-filter-optimize&lt;/a> 插件共同使用会出现 BUG，对该问题的具体分析可参见我的文章《&lt;a href="https://guanqr.com/tech/website/speed-up-hexo/">加速 Hexo 博客的方法及遇到的问题&lt;/a>》。&lt;/p>
&lt;h3 id="插入视频">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#插入视频" class="anchor-link" aria-label="插入视频">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:插入视频" class="headings">插入视频&lt;/a>&lt;/h3>
&lt;p>可以直接用 HTML 的标签，写法如下：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">video&lt;/span> &lt;span class="na">poster&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://封面图.jpg&amp;#34;&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://什么什么什么.mp4&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;&amp;#34;&lt;/span> &lt;span class="na">controls&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;controls&amp;#34;&lt;/span> &lt;span class="na">loop&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;loop&amp;#34;&lt;/span> &lt;span class="na">preload&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;meta&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Your browser does not support the video tag.&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">video&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>如果想用插件的话，这里推荐 &lt;a href="https://github.com/MoePlayer/hexo-tag-dplayer" target="_blank" rel="noopener">hexo-tag-dplayer&lt;/a>，和音乐播放器 Aplayer 属于同一系列插件，是 &lt;a href="https://github.com/MoePlayer/DPlayer" target="_blank" rel="noopener">Dplayer&lt;/a> 播放器的 Hexo 标签插件，支持弹幕。&lt;/p>
&lt;p>安装：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-tag-dplayer --save
&lt;/code>&lt;/pre>&lt;p>在文章中的写法：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">dplayer&lt;/span> &lt;span class="s2">&amp;#34;url=https://什么什么什么.mp4&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;https://封面图.jpg&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;api=https://api.prprpr.me/dplayer/&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;id=&amp;#34;&lt;/span> &lt;span class="s2">&amp;#34;loop=false&amp;#34;&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>要使用弹幕，必须有 &lt;code>api&lt;/code> 和 &lt;code>id&lt;/code> 两项。&lt;/p>
&lt;h3 id="插入脚注">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#插入脚注" class="anchor-link" aria-label="插入脚注">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:插入脚注" class="headings">插入脚注&lt;/a>&lt;/h3>
&lt;p>Markdown 基本语法中并不包含脚注语法，但是脚注作为一种常见的文本格式，对于文字编辑工作者，特别是喜欢插入引文的人而言，有着很大的使用需求。所以 Multi-Markdown 在其扩充语法集中增添了脚注的语法。大部分的 Markdown 编辑器现在都采用了该语法来渲染脚注。但 Hexo 的默认渲染器是不支持脚注语法的。&lt;/p>
&lt;p>为了实现脚注功能，可以通过替换默认渲染器或者安装插件。目前我了解到的有两款插件:&lt;/p>
&lt;ol>
&lt;li>&lt;a href="https://github.com/LouisBarranqueiro/hexo-footnotes" target="_blank" rel="noopener">hexo-footnotes&lt;/a>&lt;/li>
&lt;li>&lt;a href="https://github.com/quentin-chen/hexo-reference" target="_blank" rel="noopener">hexo-reference&lt;/a>&lt;/li>
&lt;/ol>
&lt;p>第一款插件已经停止维护，但亲测第一款还是可以用的。我之前使用的是第二款插件，这一款插件最大的特点是能够在做脚注的原文角标处弹出悬浮窗。但该插件存在一个小 BUG，在移动端或者屏幕较窄的情况下，悬浮窗会超出页面边界。&lt;/p>
&lt;p>如果需要替换渲染器，可以替换为 &lt;a href="https://github.com/hexojs/hexo-renderer-markdown-it" target="_blank" rel="noopener">hexo-renderer-markdown-it&lt;/a> 或者 &lt;a href="https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus" target="_blank" rel="noopener">hexo-renderer-markdown-it-plus&lt;/a>。由于我一直使用的是默认渲染器，所以这里不再进行详细说明。&lt;/p>
&lt;p>对于上述两款插件，根据喜好选择一款插件安装：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-footnotes --save
npm install hexo-reference --save
&lt;/code>&lt;/pre>&lt;p>如果要添加脚注，使用格式如下：&lt;/p>
&lt;pre tabindex="0">&lt;code>这是我的博客[^1]。
[^1]: 地址：https://blog.guanqr.com。
&lt;/code>&lt;/pre>&lt;h3 id="插入动态图表">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#插入动态图表" class="anchor-link" aria-label="插入动态图表">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:插入动态图表" class="headings">插入动态图表&lt;/a>&lt;/h3>
&lt;p>&lt;a href="http://echarts.baidu.com/index.html" target="_blank" rel="noopener">ECharts&lt;/a>，一个纯 JavaScript 的图表库，可以流畅的运行在 PC 和移动设备上。ECharts 作为国产工具，在语言上对中文开发者有着天然的优势，官方文档对每一个细节、参数、配置都有详尽的说明，对于新手非常的友好。另外一个重要的方面，就是 ECharts 的图表颜值很高，默认的主题和配色可以呈现出优雅漂亮的图表&lt;sup id="fnref:5">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:5" class="footnote-ref" role="doc-noteref">[5]&lt;/a>&lt;/sup>。&lt;/p>
&lt;p>Hexo 的 &lt;a href="https://github.com/kchen0x/hexo-tag-echarts3" target="_blank" rel="noopener">ECharts 插件&lt;/a>是博主 &lt;a href="https://kchen.cc/" target="_blank" rel="noopener">KChen&lt;/a> 根据周旅军的原型插件开发的。进入博客根目录安装插件：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-tag-echarts3 --save
&lt;/code>&lt;/pre>&lt;p>在文章中使用 ECharts 时，格式为：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">echarts&lt;/span> &lt;span class="mi">400&lt;/span> &lt;span class="s1">&amp;#39;85%&amp;#39;&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="cm">/* TODO option goes here */&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">endecharts&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>其中 &lt;code>echarts&lt;/code> 是标签名，不需要更改，&lt;code>400&lt;/code> 是图表容器的高度，&lt;code>85%&lt;/code> 是图表容器的相对宽度。而在 &lt;code>tag&lt;/code> 之间的部分，则是需要自己填充的图表数据了。&lt;/p>
&lt;p>比如：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;span class="lnt">28
&lt;/span>&lt;span class="lnt">29
&lt;/span>&lt;span class="lnt">30
&lt;/span>&lt;span class="lnt">31
&lt;/span>&lt;span class="lnt">32
&lt;/span>&lt;span class="lnt">33
&lt;/span>&lt;span class="lnt">34
&lt;/span>&lt;span class="lnt">35
&lt;/span>&lt;span class="lnt">36
&lt;/span>&lt;span class="lnt">37
&lt;/span>&lt;span class="lnt">38
&lt;/span>&lt;span class="lnt">39
&lt;/span>&lt;span class="lnt">40
&lt;/span>&lt;span class="lnt">41
&lt;/span>&lt;span class="lnt">42
&lt;/span>&lt;span class="lnt">43
&lt;/span>&lt;span class="lnt">44
&lt;/span>&lt;span class="lnt">45
&lt;/span>&lt;span class="lnt">46
&lt;/span>&lt;span class="lnt">47
&lt;/span>&lt;span class="lnt">48
&lt;/span>&lt;span class="lnt">49
&lt;/span>&lt;span class="lnt">50
&lt;/span>&lt;span class="lnt">51
&lt;/span>&lt;span class="lnt">52
&lt;/span>&lt;span class="lnt">53
&lt;/span>&lt;span class="lnt">54
&lt;/span>&lt;span class="lnt">55
&lt;/span>&lt;span class="lnt">56
&lt;/span>&lt;span class="lnt">57
&lt;/span>&lt;span class="lnt">58
&lt;/span>&lt;span class="lnt">59
&lt;/span>&lt;span class="lnt">60
&lt;/span>&lt;span class="lnt">61
&lt;/span>&lt;span class="lnt">62
&lt;/span>&lt;span class="lnt">63
&lt;/span>&lt;span class="lnt">64
&lt;/span>&lt;span class="lnt">65
&lt;/span>&lt;span class="lnt">66
&lt;/span>&lt;span class="lnt">67
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-javascript" data-lang="javascript">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">echarts&lt;/span> &lt;span class="mi">400&lt;/span> &lt;span class="s1">&amp;#39;85%&amp;#39;&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">title&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">text&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;某站点用户访问来源&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">subtext&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;纯属虚构&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">x&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;center&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">tooltip&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">trigger&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;item&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">formatter&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;{a} &amp;lt;br/&amp;gt;{b} : {c} ({d}%)&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">legend&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">orient&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;vertical&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">x&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;left&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;直接访问&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;邮件营销&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;联盟广告&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;视频广告&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;搜索引擎&amp;#34;&lt;/span>&lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">toolbox&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">feature&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">mark&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">dataView&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">readOnly&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">restore&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">saveAsImage&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">show&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">calculable&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="kc">true&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">series&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;访问来源&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">type&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;pie&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">radius&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;55%&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">center&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;50%&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;60%&amp;#34;&lt;/span>&lt;span class="p">],&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">data&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="p">[&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">335&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;直接访问&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">310&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;邮件营销&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">234&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;联盟广告&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">135&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;视频广告&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">},&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">value&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="mi">1548&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">name&lt;/span>&lt;span class="o">:&lt;/span> &lt;span class="s2">&amp;#34;搜索引擎&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">]&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>&lt;span class="o">%&lt;/span> &lt;span class="nx">endecharts&lt;/span> &lt;span class="o">%&lt;/span>&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>效果为：&lt;/p>
&lt;p>&lt;img src="https://guanqr.com/images/echarts-tushuo.gif" alt="echarts-tushuo.gif">&lt;/p>
&lt;p>如果按照不能正确绘制图表，请照下面的指导修改一下 ECharts 的模板文件。用编辑器打开博客目录下 &lt;code>~/node_modules/hexo-tag-echarts/echarts-template.html&lt;/code> 文件。作如下修改：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;&amp;lt;%- id %&amp;gt;&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;width: &amp;lt;%- width %&amp;gt;;height: &amp;lt;%- height %&amp;gt;px;margin: 0 auto&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">+ &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://echarts.baidu.com/dist/echarts.common.min.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">type&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text/javascript&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">...&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>有一种很便捷的使用 ECharts 图表的方法。&lt;a href="https://tushuo.baidu.com/" target="_blank" rel="noopener">百度·图说&lt;/a>是 ECharts 团队开发的另一款非常方便的工具，提供 UI 界面给你快速的绘制和定义图表，然后导出为代码、图片以及其他格式。&lt;/p>
&lt;h3 id="段落标题添加锚点">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#段落标题添加锚点" class="anchor-link" aria-label="段落标题添加锚点">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:段落标题添加锚点" class="headings">段落标题添加锚点&lt;/a>&lt;/h3>
&lt;p>上文中提到的 &lt;a href="https://github.com/hexojs/hexo-renderer-markdown-it" target="_blank" rel="noopener">hexo-renderer-markdown-it&lt;/a> 渲染器可以实现标题的锚点功能。如果你使用的是该渲染器，那么，参考官方&lt;a href="https://github.com/hexojs/hexo-renderer-markdown-it/wiki/Advanced-Configuration" target="_blank" rel="noopener">说明&lt;/a>可对锚点进行配置。在博客的配置文件 &lt;code>_config.yml&lt;/code> 里对渲染器进行配置的代码中有：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;span class="lnt">8
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Markdown-it config&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">markdown&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">anchors&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">level&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">2&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">collisionSuffix&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;v&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">permalink&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">permalinkClass&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">header-anchor&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">permalinkSymbol&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">¶&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>这就是对锚点进行配置的内容。不过使用这种方法添加锚点最大的问题就是，在文章目录中每一章节标题前也会显示锚点的图案，这样显得比较难看，即：&lt;/p>
&lt;pre tabindex="0">&lt;code>1. ¶第一章
1.1 ¶第一节
2. ¶第二章
&lt;/code>&lt;/pre>&lt;p>在这里我推荐一个更好的插件，是 NexT 官方制作的一个锚点插件：&lt;a href="https://github.com/theme-next/hexo-theme-next-anchor" target="_blank" rel="noopener">hexo-theme-next-anchor&lt;/a>。&lt;/p>
&lt;p>如果你使用了 hexo-renderer-markdown-it，为了使插件之间不冲突，可以先设置好 hexo-renderer-markdown-it 的功能：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"> anchors:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> level: 2
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> collisionSuffix: &amp;#39;v&amp;#39;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- permalink: true
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ permalink: false
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span> permalinkClass: header-anchor
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> permalinkSymbol: ¶
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后再安装该插件：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-theme-next-anchor
&lt;/code>&lt;/pre>&lt;p>如果你使用的是 Hexo 默认渲染器 hexo-renderer-marked，则可忽略上述步骤。&lt;/p>
&lt;p>然后在主题的配置文件 &lt;code>_config.yml&lt;/code> 中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yml" data-lang="yml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">anchor&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">color&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#0e83cd&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">position&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">right&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># If left, anchors will always be visible.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">margin&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">7px &lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">text&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="s1">&amp;#39;#&amp;#39;&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">icon&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># If true, the `text` option will be ignored.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># By default, NexT has built-in FontAwesome support.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># This option means `font-family: FontAwesome`, so DO Not change it.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c"># Also you can choose ForkAwesome, but that&amp;#39;s another story.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">font&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">FontAwesome&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">content&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">\f0c1&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c"># CSS content for FontAwesome &amp;amp; ForkAwesome.&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>根据自己的喜好进行设定即可。&lt;/p>
&lt;h3 id="文末添加相关文章">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#文末添加相关文章" class="anchor-link" aria-label="文末添加相关文章">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:文末添加相关文章" class="headings">文末添加相关文章&lt;/a>&lt;/h3>
&lt;p>实现该功能的插件有两个：&lt;/p>
&lt;div class="table-container">&lt;table>
&lt;thead>
&lt;tr>
&lt;th>插件&lt;/th>
&lt;th>说明&lt;/th>
&lt;th>特点&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>&lt;a href="https://github.com/tea3/hexo-related-popular-posts" target="_blank" rel="noopener">hexo-related-popular-posts&lt;/a>&lt;/td>
&lt;td>最新版本已集成，可以在主题配置文件&lt;code>_config.yml&lt;/code>中配置。&lt;/td>
&lt;td>可以利用 Google Analytics API 将高浏览量（热门）的文章按配置比例加入推荐列表。&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>&lt;a href="https://github.com/huiwang/hexo-recommended-posts" target="_blank" rel="noopener">hexo-recommended-posts&lt;/a>&lt;/td>
&lt;td>主题尚未集成，但插件本身支持自动显示，自定义位置请查看 README。&lt;/td>
&lt;td>可以与其它博客相关联，不限于自己博客。&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>&lt;/div>
&lt;p>我使用的是第二个插件，因此这里主要讲解第二个插件的设定方法。&lt;/p>
&lt;p>进入博客根目录安装插件：&lt;/p>
&lt;pre tabindex="0">&lt;code>npm install hexo-recommended-posts --save
&lt;/code>&lt;/pre>&lt;p>在编辑完新的文章之后，使用如下命令获取推荐列表&lt;/p>
&lt;pre tabindex="0">&lt;code>hexo recommend
&lt;/code>&lt;/pre>&lt;p>如果你对默认显示的位置和样式不满意，可以进行自定义设定。在博客根目录的 &lt;code>_config.yml&lt;/code> 添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 推荐文章&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependency: https://github.com/huiwang/hexo-recommended-posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">recommended_posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">server&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">https://api.truelaurel.com&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#后端推荐服务器地址&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">timeoutInMillis&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">10000&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#服务时长，超过此时长，则使用离线推荐模式&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">internalLinks&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">5&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#内部文章数量&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">externalLinks&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="c">#外部文章数量&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">fixedNumber&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">autoDisplay&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">false&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#自动在文章底部显示推荐文章&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#excludePattern: []&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="c">#titleHtml: &amp;lt;div class=&amp;#34;note primary&amp;#34;&amp;gt;&amp;lt;p&amp;gt;相关文章&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt; #自定义标题&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在主题根目录的 &lt;code>_config.yml&lt;/code> 添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># Recommended posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="c"># Dependency: https://github.com/huiwang/hexo-recommended-posts&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">recommended_posts&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enabled&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在主题语言包中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl"># 文件位置：~/theme/next/languages/zh-CN.yml
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> copyright:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> author: 本文作者
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> link: 本文链接
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> license_title: 版权声明
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> license_content: &amp;#34;本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！&amp;#34;
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">+ recommended_posts: 推荐文章
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gi">&lt;/span>page:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> totally: 共有
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> tags: 标签
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在主题配置文件中开启 &lt;code>post-body&lt;/code> 后的自定义文件，并在 &lt;code>~/source/_data/&lt;/code> 下新建文件 &lt;code>post-body-end.swig&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-diff" data-lang="diff">&lt;span class="line">&lt;span class="cl">custom_file_path:
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">- #postBodyEnd: source/_data/post-body-end.swig
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="gd">&lt;/span>&lt;span class="gi">+ postBodyEnd: source/_data/post-body-end.swig
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在 &lt;code>post-body-end.swig&lt;/code> 中添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/post-body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% if theme.recommended_posts.enabled and not is_index %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;post-body&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;note primary&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;recommended_posts&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% set recommended_posts = recommended_posts(post, site) %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% if recommended_posts.length &amp;gt; 0 %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">h4&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ __(&amp;#39;post.recommended_posts&amp;#39;) }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">h4&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">ul&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% for link in recommended_posts %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">a&lt;/span> &lt;span class="na">href&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;{{ link.permalink }}&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>{{ link.title }}&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">a&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">li&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% endfor %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">ul&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% endif %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{% endif %}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>在该文件中修改自己喜欢的样式即可。&lt;/p>
&lt;h3 id="文末添加结束标语">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#文末添加结束标语" class="anchor-link" aria-label="文末添加结束标语">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:文末添加结束标语" class="headings">文末添加结束标语&lt;/a>&lt;/h3>
&lt;p>同样需要在 &lt;code>post-body-end.swig&lt;/code> 文件中添加内容，开启自定义文件的功能参考&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#%e6%96%87%e6%9c%ab%e6%b7%bb%e5%8a%a0%e7%9b%b8%e5%85%b3%e6%96%87%e7%ab%a0">上文&lt;/a>。&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;span class="lnt">5
&lt;/span>&lt;span class="lnt">6
&lt;/span>&lt;span class="lnt">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/post-body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% if not is_index %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;end-slogan&amp;#34;&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text-align:center;font-size:13px;letter-spacing:10px;user-select:none;color:#bbb;&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">/&amp;gt;&lt;/span>本文结束啦&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">i&lt;/span> &lt;span class="na">class&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;fa fa-star&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">i&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>感谢您阅读&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">/&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">br&lt;/span>&lt;span class="p">/&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> {% endif %}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后打开主题配置文件 &lt;code>_config.yml&lt;/code>，添加：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="c"># 文章末尾添加「本文结束」标记&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w">&lt;/span>&lt;span class="nt">passage_end_tag&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enabled&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h3 id="文末添加今日诗词">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#文末添加今日诗词" class="anchor-link" aria-label="文末添加今日诗词">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:文末添加今日诗词" class="headings">文末添加今日诗词&lt;/a>&lt;/h3>
&lt;p>首先通过主题配置文件启用自定义文件：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;span class="lnt">4
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">custom_file_path&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">postBodyEnd&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">source/_data/post-body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">bodyEnd&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">source/_data/body-end.swig&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">style&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="l">source/_data/styles.styl&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>最基础的设置参考官方说明文档：&lt;a href="https://www.jinrishici.com/doc/#json-fast-easy" target="_blank" rel="noopener">通用简单安装代码&lt;/a>。首先在 &lt;code>~/source/_data/body-end.swig&lt;/code> 文件内引入今日诗词的 SDK：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://sdk.jinrishici.com/v2/browser/jinrishici.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>然后在 &lt;code>~/source/_data/post-body-end.swig&lt;/code> 文件内放入标签：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/post-body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;jinrishici-sentence&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>正在加载今日诗词....&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>简单使用的话不会显示作者、朝代等信息，参考官方说明文档：&lt;a href="https://www.jinrishici.com/doc/#json-fast-custom" target="_blank" rel="noopener">通用高级安装代码&lt;/a>以及&lt;a href="https://www.jinrishici.com/doc/#return" target="_blank" rel="noopener">接口返回结果格式&lt;/a>，值得注意的地方是这一句话：&lt;/p>
&lt;blockquote>
&lt;p>使用定制加载时，不要将标签的 &lt;code>id&lt;/code> 或者 &lt;code>class&lt;/code> 设置为 &lt;code>jinrishici-sentence&lt;/code>，否则 SDK 会自动加载一次。&lt;/p>&lt;/blockquote>
&lt;p>也就是说插入的标签不应该使用之前的 &lt;code>jinrishici-sentence&lt;/code>，需要重新命名。参考上一节配置的两个文件，把内容修改一下即可&lt;sup id="fnref:6">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fn:6" class="footnote-ref" role="doc-noteref">[6]&lt;/a>&lt;/sup>：&lt;/p>
&lt;p>&lt;code>body-end.swig&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt"> 1
&lt;/span>&lt;span class="lnt"> 2
&lt;/span>&lt;span class="lnt"> 3
&lt;/span>&lt;span class="lnt"> 4
&lt;/span>&lt;span class="lnt"> 5
&lt;/span>&lt;span class="lnt"> 6
&lt;/span>&lt;span class="lnt"> 7
&lt;/span>&lt;span class="lnt"> 8
&lt;/span>&lt;span class="lnt"> 9
&lt;/span>&lt;span class="lnt">10
&lt;/span>&lt;span class="lnt">11
&lt;/span>&lt;span class="lnt">12
&lt;/span>&lt;span class="lnt">13
&lt;/span>&lt;span class="lnt">14
&lt;/span>&lt;span class="lnt">15
&lt;/span>&lt;span class="lnt">16
&lt;/span>&lt;span class="lnt">17
&lt;/span>&lt;span class="lnt">18
&lt;/span>&lt;span class="lnt">19
&lt;/span>&lt;span class="lnt">20
&lt;/span>&lt;span class="lnt">21
&lt;/span>&lt;span class="lnt">22
&lt;/span>&lt;span class="lnt">23
&lt;/span>&lt;span class="lnt">24
&lt;/span>&lt;span class="lnt">25
&lt;/span>&lt;span class="lnt">26
&lt;/span>&lt;span class="lnt">27
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span> &lt;span class="na">src&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;//sdk.jinrishici.com/v2/browser/jinrishici.js&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;今日诗词 - 开始加载...&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">jinrishici&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">load&lt;/span>&lt;span class="p">((&lt;/span>&lt;span class="nx">result&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">=&amp;gt;&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">jrsc&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">getElementById&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;jrsc&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">jrsc&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;今日诗词 - 标签获取成功.&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span> &lt;span class="k">else&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;今日诗词 - 标签获取失败!&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kr">const&lt;/span> &lt;span class="nx">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">result&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">author&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">author&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">title&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s1">&amp;#39;《&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">title&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;》&amp;#39;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">content&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">content&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">substr&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">content&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">dynasty&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dynasty&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">substr&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">dynasty&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span> &lt;span class="o">-&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">jrsc&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">innerText&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">content&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39; @ &amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">dynasty&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="s1">&amp;#39;·&amp;#39;&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">author&lt;/span> &lt;span class="o">+&lt;/span> &lt;span class="nx">title&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s1">&amp;#39;今日诗词 - 载入完毕.&amp;#39;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">if&lt;/span> &lt;span class="p">(&lt;/span>&lt;span class="nx">data&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">origin&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">author&lt;/span> &lt;span class="o">==&lt;/span> &lt;span class="s1">&amp;#39;李白&amp;#39;&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="kd">let&lt;/span> &lt;span class="nx">audio&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nb">document&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">createElement&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;audio&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">audio&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">src&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="s2">&amp;#34;/ding.mp3&amp;#34;&lt;/span>&lt;span class="p">;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">audio&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">play&lt;/span>&lt;span class="p">();&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">});&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">script&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;p>&lt;code>post-body-end.swig&lt;/code>：&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;div class="table-container">&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;span class="lnt">3
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="c">&amp;lt;!-- 文件位置：~/source/_data/post-body-end.swig --&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">div&lt;/span> &lt;span class="na">style&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;text-align: center&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;&lt;/span>&lt;span class="nt">span&lt;/span> &lt;span class="na">id&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;jrsc&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>正在加载今日诗词....&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">span&lt;/span>&lt;span class="p">&amp;gt;&amp;lt;/&lt;/span>&lt;span class="nt">div&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/div>
&lt;/div>
&lt;/div>&lt;h2 id="结尾">&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#结尾" class="anchor-link" aria-label="结尾">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#contents:结尾" class="headings">结尾&lt;/a>&lt;/h2>
&lt;p>写这篇文章的初衷是为了记录我对博客主题的一些优化，通过对主题的优化我也学习了很多前端的知识。NexT 主题更新的速度实在是太快了，目前网上很多关于 NexT 主题的优化方法都是过时的。所以我就想借助这篇文章汇总一些可以在新版主题中使用的优化方法。另外，我还推荐你阅读我的其他几篇和博客搭建有关的文章，或许能够引发你对博客更深入的探索。如果你喜欢这一篇文章，请多多分享。&lt;/p>
&lt;style>
blockquote.question {
color: #555;
border-left: 4px solid rgb(16, 152, 173);
background-color: rgb(227, 242, 253);
margin-bottom: 20px;
}
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(227, 242, 253);
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}
&lt;/style>
&lt;div class="footnotes" role="doc-endnotes">
&lt;hr>
&lt;ol>
&lt;li id="fn:1">
&lt;p>图源：&lt;a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">hexo-theme-next | GitHub&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:1" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:2">
&lt;p>官方网站的 News 中会对每一个发行版相对上一版本的修改进行说明，Docs 中有主题配置的详细说明。&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:2" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:3">
&lt;p>参考：&lt;a href="https://bestzuo.cn/posts/2016690040.html" target="_blank" rel="noopener">Hexo 博客 NexT 主题自定义友情链接页面 | Sanarous&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:3" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:4">
&lt;p>参考：&lt;a href="https://qianling.pw/style/" target="_blank" rel="noopener">样式汇总 | 千灵&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:4" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:5">
&lt;p>参考：&lt;a href="https://kchen.cc/2016/11/05/echarts-in-hexo/" target="_blank" rel="noopener">在 Hexo 中插入 ECharts 动态图表 | KChen's Blog&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:5" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;li id="fn:6">
&lt;p>参考：&lt;a href="https://1v9.io/post/add-today-poetry-for-theme-next.html" target="_blank" rel="noopener">NexT 添加今日诗词 | 1v9's Blog&lt;/a>&amp;#160;&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/#fnref:6" class="footnote-backref" role="doc-backlink">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="icon footnote-icon">&lt;path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>&lt;/svg>&lt;/a>&lt;/p>
&lt;/li>
&lt;/ol>
&lt;/div>
&lt;blockquote>
&lt;p>阅读原文：&lt;a href="https://guanqr.com/tech/website/hexo-theme-next-customization/" target="_blank" rel="noopener">https://guanqr.com/tech/website/hexo-theme-next-customization/&lt;/a>&lt;/p>&lt;/blockquote></description><category domain="https://guanqr.com/tech/">tech</category><category domain="https://guanqr.com/tech/website/">website</category><category domain="https://guanqr.com/series/create-a-blog/">博客搭建</category><category domain="https://guanqr.com/tags/git/">Git</category><category domain="https://guanqr.com/tags/hexo/">Hexo</category><category domain="https://guanqr.com/tags/next/">NexT</category><category domain="https://guanqr.com/tags/typography/">排版</category></item><item><title>
科学的历史观念</title><link>https://guanqr.com/life/books/the-idea-of-history/</link><guid isPermaLink="true">https://guanqr.com/life/books/the-idea-of-history/</guid><pubDate>Wed, 24 Apr 2019 00:01:27 +0800</pubDate><author>guanqirui@zju.edu.cn (Guanqr)</author><copyright>本文採用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) 許可協議，轉載請註明出處。</copyright><description>
&lt;h2 id="作者简介">&lt;a href="https://guanqr.com/life/books/the-idea-of-history/#作者简介" class="anchor-link" aria-label="作者简介">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>作者简介&lt;/h2>
&lt;p>&lt;sup style="float:right" id="fnref:1">&lt;a href="https://guanqr.com/life/books/the-idea-of-history/#fn:1" class="footnote-ref" role="doc-noteref">[1]&lt;/a>&lt;/sup>&lt;img src="https://guanqr.com/images/robin-g-collingwood.jpg" alt="robin-g-collingwood.jpg">&lt;span class="caption">※ 柯林武德&lt;/span>&lt;/p>
&lt;p>柯林武德，英国哲学家，历史学家和美学家，毕业于牛津大学哲学系，后留校研究和任教。主要著作有《宗教与哲学》、《心灵的思辨》、《艺术原理》、《历史的观念》。&lt;/p>
&lt;h2 id="柯林武德的史观">&lt;a href="https://guanqr.com/life/books/the-idea-of-history/#柯林武德的史观" class="anchor-link" aria-label="柯林武德的史观">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon">&lt;path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>&lt;/svg>&lt;/a>柯林武德的史观&lt;/h2>
&lt;p>柯林武德将批判的历史哲学推进到了成熟的阶段，宣判了在近代历史哲学发展道路上与经典的思辨的历史哲学决裂，正式确立了历史哲学发展的另一种走向。他的一句名言：&lt;em class="emphasis-point">一切历史都是思想史&lt;/em>，代表了一种主张历史学有别于自然科学，有其学科自主性的基本理论与思想，从而与另一种主张历史学与自然科学在方法论上是统一的形成对立，并造就了当代西方史学发展的两种流向。&lt;/p>
&lt;p>那么柯林武德是怎么提出一切历史都是思想史的观点的？首先，我们需要知道，柯林武德历史哲学的主要论点之一，就是&lt;em class="emphasis-point">客观性历史与主