為音樂家/藝術家建立的免費網站模板,用於推廣他們的音樂並與觀眾建立聯繫。
特徵
- 可自訂的英雄圖像和響應式圖片模式
- 基於 Javascript 的音樂播放器和 YouTube 縮圖產生器針對頁面載入進行了最佳化
- 具有驗證和後端整合的郵件清單和聯絡表格
- 其他部分包括「關於」、「商品」、「新聞報道」和「節目」部分
- 專案程式碼符合 HTML 和 CSS W3C 驗證合規性(不包括黑白 CSS 外觀)
入門
注意:建議您使用使用 php 設定的本機 Web 伺服器和郵件伺服器來進行完整的測試功能。
編輯標題和導航:
- 替換為 id“logo”中您的藝術家/樂隊名稱
- 將導航連結更新為您自己的
編輯主頁部分:
- 在 style.css 中的“hero”類別中替換您的圖片名稱
- 編輯 index.html 中“home”類別中的標語、號召性用語 (CTA) 和 CTA 鏈接
編輯郵件清單:
- 請按照 David McCoy 的教學建立您自己的 Google Sheets 郵件清單:https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
- 透過 mailingList.js 中的「url」替換您新建立的Google表格鏈接
- 替換 index.html 中的號召性用語和標語
編輯關於部分:
- 將社交媒體連結更改為您自己的鏈接
- 編輯index.html中的“About”類
編輯商品部分:
- 壓縮圖片並減少像素以優化載入時間
- 將您的圖片複製到目錄 /pictures/merch
- 在 style.css 中的“.a、.b、.c”等類別中替換您的圖片名稱
- 在index.html中的“grid”類別中替換您的圖片名稱
編輯音樂部分:
- 編輯index.html中的“音樂”類
- 將音樂連結更改為您自己的
- 在 style.css 中的“music-hero”類別中替換您的圖片名稱
新增特色歌曲:
- 使用 DAW 將歌曲編輯為 30 秒的剪輯預覽,以優化載入和串流媒體時間
- 將歌曲放在 dir /music 中
- 在 musPlayer.js 中編輯數組 var“files”
- 若要在陣列中新增歌曲,請使用以下格式:“Your Song Title.mp3”
編輯新聞部分:
- 壓縮圖片並減少像素以優化載入時間
- 將圖片複製到目錄 /pictures/blog
- 在 style.css 中的“.a、.b、.c”等類別中替換您的圖片名稱
- 在index.html中的「grid」類別中替換您的圖片名稱和部落格標題
- 在 blog_(page) html 頁面中撰寫您的部落格文章。
編輯新聞部分:
編輯index.html 中的“Press”類別。
編輯影片部分:
- 導航到您想要推薦的 YouTube 視頻
- 複製 youtube 連結中「v=」後面的文本
- 將「youtube-player」類別中的 data-id 文字貼到 index.html 的「Video」類別中
編輯節目部分:
編輯index.html 中的“Shows”類別。
編輯圖片部分:
- 壓縮圖片以優化載入時間
- 將圖片複製到目錄 /pictures/gallery
- 在 style.css 中的“.a、.b、.c”等類別中替換您的圖片名稱
- 在index.html中的“grid”類別中替換您的圖片名稱
若要編輯聯絡表格:
- 在 form.php 中輸入您的電子郵件地址
- 在 form.php 中自訂您的回應訊息
編輯頁尾:
- 將頁腳連結更新為您自己的
- 在 terms.html 中替換為您的藝術家/樂團名稱
使用皮膚進行自訂!
新的黑白主題現已推出。
- 將 css/style_black_white.css 重新命名為 css/style_black_white
或者
- 將所有 html 文件的 header 中的 href 連結變更為 css/style_black_white.css
內建
- HTML5
- CSS3
- jQuery/JavaScript/AJAX
- PHP5
貢獻
向此儲存庫做出貢獻時,您可以分叉並提交拉取請求。添加您正在做的事情的描述,我會審核它。
版本控制
版本2.3.0
作者
- 馬修‧沃德倫- (http://waldronmatthew.com)
執照
該項目已根據 MIT 許可證獲得許可 - 有關詳細信息,請參閱 LICENSE.md 文件。
請遵守使用條款和網站積分頁面。
致謝
非常感謝我使用 MIT 許可程式碼的所有開發人員。它們列在「網站積分」頁面上。