既存テンプレートに新しいアップデートを追加する方法
一定期間後、最新技術に基づいてプロジェクトを更新しますが、テンプレートについては、必要に応じてご自身で更新していただく必要があります。
HEAD CSS構造
以下は css 内で読み込まれるファイルです ヘッドセクション:
<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">
クレジット
注記: すべて 画像 は プレビュー 目的のみに使用され は含まれていません および 最終購入 ファイル内で使用されています。
画像提供元:
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/
IconFont
Fontawesome
Flaticon
スクロールアニメーションを非表示にする方法
以下のコードファイルパスを削除またはコメントアウトしてください: assets/js/script.js
// 15. WOW Animation
if ($('.wow').length) {
var wow = new WOW({
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true // act on asynchronously loaded content (default is true)
});
wow.init();
}
使用フォント
フォントコードは「style.css」のファイルパスにあります:assets/css/style.css
// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;
メインカラー変更オプション
ファイルパス: assets/css/style.css
// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;
スリック編集オプション
ファイルパス: assets/js/script.js
// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
$('.feedback-wrap').slick({
dots: true,
infinite: false,
autoplay: true,
fade: true,
autoplaySpeed: 5000,
arrows: false,
centerMode: false,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
});
}
詳細はリンクをご覧ください: スリックドキュメントオプション
HTML構造
一般的なテンプレート構造はテンプレート全体で同じであり、各部分はセクションID名を持つセクションの下にあります。以下は 一般的な構造:
爱游戏官网提供多元游戏内容与便捷应用入口,打造顺畅在线娱乐平台。整合多种玩法与互动板块,用户可自由切换体验,感受多样娱乐节奏。页面清晰直观,操作简单,系统稳定流畅,让娱乐更轻松舒适。
速度最適化
すべての画像(KB、MB単位)を最適化し、プレースホルダーファイルパスに従った画像サイズを使用してください: assets/images/..
- Tinypng
すべてのCSSファイルパスを圧縮してください: assets/css/..
すべてのJSファイルパスを圧縮してください: assets/js/..
画像を変更する方法
画像ファイル「パス: assets/images/...」に移動し、プレースホルダーの画像サイズと名前に従って、希望の画像と差し替えてください
はじめに
テンプレートフォルダは Sland ダウンロードしたzipファイル内にあります。テンプレートとドキュメントフォルダを見つけるには、zipファイルを解凍する必要があります。
The ファイルとフォルダの構造 以下のようになります:
- assets/css — CSSファイル用のフォルダ。
- assets/fonts — フォントファイル用のフォルダ。
- assets/images — 画像ファイル用のフォルダ。
- assets/js — Javascriptファイル用のフォルダ。
FileZillaなどのFTPクライアントを使用して、テンプレートファイルをサーバーにアップロードします。
ファイルの編集とアップロード:
個々のページは、VS Codeなどのコードエディタで開いてカスタマイズできます。すべてのカスタマイズが完了したら、ウェブサイトを公開するために、更新したプロジェクトファイルを自身のドメイン用のホスティングサーバーにアップロードする必要があります。ファイルはFileZillaなどのFTPクライアントを使用してアップロードできます。
Javascript構造
以下は JS の終わりの前に読み込まれるファイル HEADまたはBODYセクション:.
<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>