我一直在幫助我的朋友與創建個人網站的一個項目,我發現這個awesome jssor template的圖像幻燈片。它有deeply minified
,without jquery
和with jquery
三個版本。如何正確unminify JS和CSS,並在HTML5中引用它們?
我已經使用jQuery沒有經驗,所以我決定去同一個版本,而jQuery的,我在那裏度過了很多時間試圖瞭解在代碼中實際發生的情況。然後,我已經轉向深度縮小的版本,因爲沒有對css或js文件的單一引用,所有工作都很順利。現在
,該deeply minified
版本里面的樣式和腳本都寫在一行。由於它們超過30000個字符,因此我不打算將它們包含在後,但所有文件均可在上述模板鏈接中找到。
我已經使用這個css unminifier - 和這個js unminifier - 以某種方式將它們轉換成可讀和可理解的格式。之後,我創建了相應的樣式和js
文件,並在其中粘貼了未分類的代碼。我已經將文件的引用和路徑添加到html
的頭部,但由於某些原因沒有任何效果。
...
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="css/text" href="style/slidestyle.css">
<script src="js/script.js"></script>
<title></title>
</head>
...
您可能會問:「爲什麼我需要改變任何東西,如果它沒有任何改變?」。這是真的,但在那種情況下,我不知道它是如何工作的,並希望你同意我的看法,這很糟糕。
我的問題,並詢問是,如何正確unminify CSS和JS文件和後記中引用它們的HTML?我認爲以這種方式做事並不是一種常見做法,但我希望能夠理解事情的工作方式並在需要時改變它們。
更新:我想通了我的方式,並作出承諾GitHub。適用於有類似問題或想更好地理解滑塊工作原理的人。
我爲你做了一些挖掘工作:https://github.com/jssor/slider/issues/171 –
@PhilMander謝謝,沒有看到這之前。 – alljamin
它應該工作。有一件事要確認,每個滑塊都有一個id,爲了移動內聯樣式來分開css塊/文件,請指定滑塊的類名,而不是使用'#id'規則。如果仍然存在問題,請留下您工作的網址,或將您的工作寄給我。 – jssor