avatarSara Chu

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2236

Abstract

was an issue remaining. The document used dark theme and the content in the external page used white background.</p><p id="0afe"><b>Hack 2: </b>Use dark-reader to automatically generate css for your external page</p><p id="f222">You can use <a href="https://darkreader.org/">dark-reader</a> to automatically apply dark style to your page. There are two options. First is to use dark-reader in your project via npm and apply dark theme automatically. For my case, this was a bit overkill and I choose the second option. Second option is to generate and export css file corresponding to dark theme of your external page and then adding that style-sheet to our <code>iframe</code>.</p><p id="df41">First install the <a href="https://darkreader.org/">dark-reader</a> add-on/extension to your browser. I have done it on Firefox. Then open your external page in that browser and enable the dark-mode in dark-reader add-on.</p><figure id="54a0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*akq4Mmrutw6XTVdZMY9VBQ.png"><figcaption>dark-reader add-on in Mozilla Firefox</figcaption></figure><p id="ded5">When you enable dark-mode, the dark-reader has generated and applied appropriate styling to make your page dark-themed. It works great. You can also tweak around and set brightness, and contrast as well as use developer tools to further customize the design. Once you are happy with the design, click on the dark-reader browser-action button to open the popup menu and click on settings.</p><figure id="af34"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*B_-rTeDGalYJ-Ci6nyyapg.png"><figcaption></figcaption></figure><p id="0ea2">This will open up the settings view as displayed below.</p><figure id="bac9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*dqdeQaWkTj38obrpRLEoVg.png"><figcaption></figcaption></figure><p id="1b63">Click on Manage settings and then on <b>Export Dynamic Theme</b>.</p><figure id="504a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*eoK7sNZcYxZF-xWQ3NjEIg.png"><figcaption></figcaption></figure><p id="2bb4">Great job! This will download a css file that you can add to your page to apply the styles for dark theme. Hmmm… So far so g

Options

ood. I believe most of you would do the rest of the stuff on your own, but for the sake of completeness let us add a few lines of code to the event-listeners that we created in Hack1.</p><p id="2a64">Save the css file that was downloaded by the dark-reader as <code>dark-theme.css </code>in the <code>/public</code> directory of your Next.js app. Now, add following lines inside the <code>"load"</code> event-listener.</p><div id="d14f"><pre>const link <span class="hljs-operator">=</span> doc.createElement(<span class="hljs-string">"link"</span>)<span class="hljs-comment">;</span></pre></div><div id="e451"><pre><span class="hljs-attr">link.rel</span> = <span class="hljs-string">"stylesheet"</span><span class="hljs-comment">;</span></pre></div><div id="d811"><pre><span class="hljs-attr">link.href</span> = <span class="hljs-string">"/dark-theme.css"</span><span class="hljs-comment">;</span></pre></div><div id="214b"><pre>doc.head.appendChild(link)<span class="hljs-comment">;</span></pre></div><p id="caa5">Next time when you do this, you will be able to add existing HTML files to your project with custom themes in much lesser time than the time you spent reading this document.</p><p id="3a9a">Wish you all the best and happy coding!</p><p id="ad6f">Interested in building career in web development? Checkout E-degree in JS Frameworks</p><div id="2976" class="link-block"> <a href="https://www.eduonix.com/javascript-frameworks-mini-edegree/UHJvZHVjdC00NDExNjgw"> <div> <div> <h2>JavaScript Mini E-Degree: Master JS Frameworks To The Core!</h2> <div><h3>A perfect mini-e-degree suitable for everyone who wants to master JavaScript effectively without wasting any time…</h3></div> <div><p>www.eduonix.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*OBLf0FHe3Jrk8Lbg)"></div> </div> </div> </a> </div><p id="79c1">Or my course on <a href="https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2">React + Next.js with TypeScript</a>.</p></article></body>

[溫哥華旅遊]加拿大最大、北美第三大的溫哥華唐人街 ChinaTown

位於溫哥華市區的熱鬧唐人街,不僅是加拿大最大,也是北美第三大華埠,且在2011年時被定義為是國家歷史遺跡。沿途的紅燈柱、雙語路標,會有總置身於中國的錯覺,除了那些豐富的歷史遺跡,還有著遠遠飄來的亞洲料理香味,吸引著你的味蕾。

而溫哥華為什麼會有這麼一區域呢?可以由一面面的壁畫以及獨特的建築物一一述說著早期中國先驅者的故事。

『太平洋鐵路是加拿大立國,成立聯邦政府的關鍵。1881年至1885年,多達15000名中國工人被雇用…許多工人在這段鐵路上喪命…』 — 唐人街歷史

1886年至1920年間,第一波華人移民定居於 Carrall Street 和 Pender Street。

且短短的四年間(1890年),此區域就已有1000多名的中國居民。1920年後,華埠開始興盛,電影院、學校、醫院等陸續出現,但因為排華法案的通過,唐人街一度陷入了危機,至1970年後才又慢慢的再興盛起(更多溫哥華唐人街的歷史可以參考此網站)。

『曾幾何時,唐人街是個單身漢社會,這些單身漢們居住在被劃分為多個獨立房間的房屋裡,許多男人的妻子和兒女仍在中國生活,可是人頭稅和1923年的排華法案使他們無法前往加拿大一家團聚…..』 — 唐人街的歷史

除了壁畫外,還有些舊照片述說著當時中國移民進入加國的歷史。

時至今日,唐人街已演變為吸引著來自世界各國遊客的景點之一,如果你也對這些歷史故事有興趣,又或者是對這裏的美食感興趣,就來探索一番吧!

唐人街擁有著十幾棟述說著一個世紀前當地歷史起源的建築物,而這些建築物也都一一被指定為歷史遺跡並進行了改造,甚至作為博物館開放參觀。主要歷史遺跡集中於E pender Street,如建造於1902年的CHINESE TIMES BUILDING、完工於1915年的加拿大帝國商業銀行(CIBC)、世界上最窄的建築物SAM KEE、在1972年因一場大火而僅存留大樓正面的LEE BUILDING。

歷史建築物地圖

先從最顯眼的地標開始介紹:

千禧門 VANCOUVER CHINATOWN MILLENNIUM GATE

如果看到這大大的牌樓-千禧門,就會知道正走進了唐人街,也是許多遊客們尋找的地標。建於2002年,從過去的排華至現今的中西合璧,有著時間之旅的象徵。

加拿大帝國商業銀行 CIBC

完工於1915年的加拿大帝國商業銀行,從馬路對街望過去,建築物顯得十分雄偉,且此建築物更是在20年代早期作為銀行建築的典範。

世界最窄商廈 周永職樓 SAM KEE

位於Pender Street和Carrall Street 交界的周永職樓建於1913 年,早期作為公共澡堂使用,隨後於1986年重建,並成為周永職燕梳公司辦事處(燕梳是Insurance的音譯)。乍看之下並未察覺出其狹窄,但從建築物的側面一看,才發現這建築物真的非常窄,大概僅有一人的手臂長度,且緊緊黏著一旁的建築物。

晚上整個建築物顯得更為顯眼,散發著霓虹燈光,瞬時變為許多人拍照打卡的景點,且之前還作為交響樂的表演舞台。

上海巷 Shanghai Alley

在1904年至1905年間,Carrall Street西側修建了廣州巷(Canton Alley)與上海巷(Shanghai Alley),並沿著巷子建了很多公寓、餐館等,而主要作為貿易、政治與文化活動的匯合點,有著促進唐人街成長與擴張的重要意義。

且看到了這隱藏在巷子中的展覽才知道原來孫中山先生與加拿大的華人歷史也有著密不可分的關連,孫中山先生曾於上海巷的戲院演說,使當時的戲院高朋滿座。

上海巷裡還有個西漢大銅鐘,是廣州送給溫哥華作為紀念溫哥華與廣州長達15年的合作。對於溫哥華而言,更象徵著 BC省華人最初的居住地。

陳潁川總堂 CHIN WING CHUN SOCIETY

陳潁川總堂成立於1918年,去年2018年剛好屆滿100 年的歷史。其創會的宗旨是紀念祖先且提供對社會有貢獻的事情。且這座建築更結合了中國南方嵌入式陽台的設計。

國民黨大樓 KUOMINTANG BUILDING

建於1920年,是當時中國國民黨在加拿大西部的總部,這也象徵了溫哥華在清朝結束後的中國革命歷史上發揮了重要的地位。至今日主要作為唐人街一座著名的歷史悠久建築物。

中華門 China Gate

中華文化中心前的這大牌坊- 中華門,是1986年溫哥華萬國博覽會上展覽的中國館其中的一部分,展覽結束後捐給了溫哥華市府,並移至此地作為紀念。在中華門後方的即是中山公園(隨後介紹)。

中山公園 Dr. Sun Yat-Sen Park

不同於其他流傳至今的古老建築物,但也是很值得一窺究竟的古典中式花園-「中山公園」 於1986年完工,是唐人街的主要景點之一。公園分為了收費與免費兩部分。

這是一座仿蘇州庭園的明朝樣式中國庭園,為了紀念國父孫中山而以其名字命名。庭園與身後的建築大樓形成了強烈的對比,而庭園的另一側就是付費公園區,票價依季節會有所不同,5/1至9/30門票是14CAD(大人),10/1至4/30 門票是12CAD。(官網資訊)

這充滿漢字的街道還有些什麼呢

其實來到唐人街,除了這些歷史建築之外,我更喜歡走在街上看看寫著漢字的這些招牌都賣了些什麼。像是這水果攤販賣著的砂糖橘、被翻譯為台灣菜花又或者是百家利的花椰菜。

如果想要買乾貨,像是干貝、蝦米、小魚乾、香菇等等,更可以來到唐人街購買,沿途經過時,看著許多人認真地挑選這玲琅滿目的乾貨們。

唐人街的髮廊有種復古再現的感覺,中文字總是比英文字還要更大更顯眼。

滿滿亞洲美食的唐人街

如果想一探亞洲的美食,更可以來到唐人街尋找,像是連年獲獎的柬越料理「金邊小館」、以燒臘著名的「玉龍軒酒家」、越式河粉「Hanoi Pho Restaurant」、有著西式風格的新中式料理「寶貝小館」、隱藏在購物中心裡的清粥小菜「粥麵小廚」、有著霸氣招牌的豚骨拉麵「THE RAMEN BUTCHER」、榮獲多項糕點獎項的「新城餅家」。

金邊小館
玉龍軒酒家
寶貝小館
粥麵小廚
THE RAMEN BUTCHER
新城餅家

來到唐人街,英文與中文對照的路牌絕對是這裡獨有的特色呢!

不過,建議大家盡量別走進 Carrall St與E Hastings Street交界後的E Hastings Street,遊民較多且道路較為髒亂,所以我們平時也是盡量避開這條路。

此文章由樂遊人(新聯華旅行社)贊助

直飛加拿大溫哥華 機票+飯店5晚或租車4天只要23,999元(不含稅),且現在又有早鳥優惠,再減2000元,真的超級划算啊!!!! 趕快到樂遊人網站看詳細行程吧! ▶️直飛加拿大溫哥華特惠專案

youtube 頻道和粉絲頁會分享我的溫哥華生活與旅遊! Youtube頻道 I’m Sara 粉絲頁 https://www.facebook.com/fredysara2017/

Recommended from ReadMedium