問題描述
- 使用了create react app webpack自動(dòng)幫助我們打包，造成了原本可以我們自己定義的打包模板html文件，我們不再并不能再對(duì)他做修改（因?yàn)樽詣?dòng)生成的項(xiàng)目中并沒有這個(gè)文件）
- 我們只能夠編輯html中<body>中的內(nèi)容。
- 因此想要修改<head>中的內(nèi)容就成了難題
矛盾點(diǎn)
以前簡(jiǎn)單的修改一個(gè)標(biāo)簽的工作現(xiàn)在卻找不地方修改。
Q1:我們?yōu)槭裁匆薷哪０逦募?/h3>
- 因?yàn)槟０逦募锌梢源_定一些html信息
- 他可以確定一個(gè)html頁(yè)面（文檔）的<head>
- title：也就是打開的tab（文檔）的名字
- base：定義當(dāng)前文檔中，所有的關(guān)于跳轉(zhuǎn)的base url和target（_blank。。。）
- link：用來將外部資源（css、img）鏈接到文檔中
- meta:定義當(dāng)前文檔的原信息（用于搜索引擎的搜索）
Q2:如何修改head中的信息？
- 方法一：通過document提供的api修改
-
document.title="your title"修改
- 方法二：使用react的第三方庫(kù)
-
react-helmet第三方庫(kù)
Q3:最終我們決定使用react-helmet，為什么？
- 因?yàn)樗梢詭椭覀冃薷乃械膆ead中的內(nèi)容，比如我們想要修改title tag中加載的圖標(biāo)。
Q4:如何修改title文字左邊logo picture？
- 通過調(diào)用
<link rel="icon" type="image/png" sizes="32x32" href="pathToimage"/>這就是link的作用引入外部資源進(jìn)入文檔。
Q5:很多資源可以被鏈接進(jìn)入文檔，那如何知道被鏈接進(jìn)來的資源放在了文檔的那個(gè)位置？比如我想要修改文檔的tab title旁邊的logo圖片，使用link引入了圖片，那么link如何才會(huì)將圖片放在我想讓他放的位置呢？
- 通過
link的rel屬性值：當(dāng)你的rel是icon 你在當(dāng)前的link中引入的資源就會(huì)自動(dòng)的放到icon的位置上
- 他可以確定一個(gè)html頁(yè)面（文檔）的<head>
- title：也就是打開的tab（文檔）的名字
- base：定義當(dāng)前文檔中，所有的關(guān)于跳轉(zhuǎn)的base url和target（_blank。。。）
- link：用來將外部資源（css、img）鏈接到文檔中
- meta:定義當(dāng)前文檔的原信息（用于搜索引擎的搜索）
-
document.title="your title"修改
-
react-helmet第三方庫(kù)
<link rel="icon" type="image/png" sizes="32x32" href="pathToimage"/>這就是link的作用引入外部資源進(jìn)入文檔。link的rel屬性值：當(dāng)你的rel是icon 你在當(dāng)前的link中引入的資源就會(huì)自動(dòng)的放到icon的位置上