Layui フレームワークを使用してレスポンシブなニュース Web サイトを開発する方法-jsチュートリアル-php.cn

Layui フレームワークを使用してレスポンシブなニュース Web サイトを開発する方法

WBOY

リリース： 2023-10-24 12:46:53

オリジナル

776 人が閲覧しました

Layui フレームワークを使用してレスポンシブなニュース Web サイトを開発する方法

Layui フレームワークを使用して応答性の高いニュース情報 Web サイトを開発する方法

はじめに:
インターネットの継続的な発展に伴い、人々がニュース情報を入手する方法は多様化しています。も変わりました。現在、インターネットを利用してニュースや情報サイトを閲覧し、あらゆる情報を入手する人が増えています。ユーザーのニーズを満たすためには、最新の応答性の高いニュースおよび情報 Web サイトを開発する必要があります。この記事では、Layui フレームワークを使用してこの目標を達成する方法を説明し、具体的なコード例を示します。

1. Layui フレームワークの紹介:
Layui は、豊富なコンポーネントときめ細かい UI 制御機能を提供する、jQuery ベースのフロントエンド UI フレームワークです。 Layui フレームワークは互換性が高く、簡単に開始でき、レスポンシブデザインをサポートしているため、ニュースや情報 Web サイトの開発に非常に適しています。

2. プロジェクトのセットアップ:

環境の準備: Node.js と Git をインストールしてプロジェクト環境をセットアップし、npm コマンドを使用して Layui をインストールする必要があります。フレームワーク。
プロジェクトを初期化します。新しいフォルダーを作成し、コマンドラインにそのディレクトリを入力します。次に、次のコマンドを実行します。

npm init
npm install layui

ログイン後にコピー

HTML ファイルの作成: プロジェクトディレクトリに新しい HTML ファイルを作成し、index.html という名前を付けます。 Layui フレームワークの CSS ファイルと JS ファイルをファイルにインポートします。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>新闻资讯网站</title>
    <link rel="stylesheet" href="node_modules/layui-src/dist/css/layui.css">
    <script src="node_modules/layui-src/dist/layui.js"></script>
</head>
<body>
<!-- 编写HTML结构 -->
</body>
</html>

ログイン後にコピー

3. Web サイトのレイアウト:

ナビゲーションバー: Layui フレームワークの nav コンポーネントを使用して、応答性の高いナビゲーションバーを作成します。サンプルコードは次のとおりです。

<div class="layui-nav layui-layout-admin">
    <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item layui-this"><a href="">首页</a></li>
        <li class="layui-nav-item"><a href="">新闻</a></li>
        <li class="layui-nav-item"><a href="">资讯</a></li>
    </ul>
</div>

ログイン後にコピー

メインコンテンツ: Layui フレームワークのコンテナコンポーネントを使用して、応答性の高いメインコンテンツ領域を作成します。サンプルコードは次のとおりです。

<div class="layui-container">
    <!-- 内容区域 -->
</div>

ログイン後にコピー

4. 動的データの読み込み:

Ajax を使用して、バックエンドからニュースデータを取得します。

サンプルコードは次のとおりです。

layui.use('jquery', function(){
    var $ = layui.jquery;
    $.ajax({
        url: 'news_api.php',
        type: 'get',
        dataType: 'json',
        success: function(data){
            // 处理数据
        },
        error: function(){
            // 处理错误
        }
    });
});

ログイン後にコピー

Layui フレームワークのテンプレートエンジンlaytpl を使用してデータをレンダリングします。

サンプルコードは次のとおりです。

layui.use(['laytpl'], function(){
    var laytpl = layui.laytpl;
    var data = [
        {title: '新闻标题1', content: '新闻内容1'},
        {title: '新闻标题2', content: '新闻内容2'},
        {title: '新闻标题3', content: '新闻内容3'}
    ];
    var tpl = document.getElementById('news_template').innerHTML;
    laytpl(tpl).render(data, function(html){
        document.getElementById('news_list').innerHTML = html;
    });
});

ログイン後にコピー

HTML にテンプレートとデータ配置を追加します。

サンプルコードは次のとおりです:

<script type="text/html" id="news_template">
    {{# layui.each(d, function(index, item){ }}
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">{{ item.title }}</div>
                <div class="layui-card-body">{{ item.content }}</div>
            </div>
        </div>
    </div>
    {{# }); }}
</script>
<div id="news_list"></div>

ログイン後にコピー

5. レスポンシブレイアウト:

Layui フレームワークのグリッドコンポーネントを使用して、レスポンシブレイアウトを実装します。さまざまな画面の設定さまざまなデバイスに対応するための以下の列の数。

サンプルコードは次のとおりです。

<div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">新闻标题1</div>
            <div class="layui-card-body">新闻内容1</div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">新闻标题2</div>
            <div class="layui-card-body">新闻内容2</div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">新闻标题3</div>
            <div class="layui-card-body">新闻内容3</div>
        </div>
    </div>
</div>

ログイン後にコピー

メディアクエリを使用して、さまざまな画面の列数を設定します。

サンプルコードは次のとおりです:

@media screen and (max-width: 767px){
    .layui-col-xs12{
        width: 100%;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .layui-col-sm6{
        width: 50%;
    }
}
@media screen and (min-width: 992px){
    .layui-col-md4{
        width: 33.333333333%;
    }
}

ログイン後にコピー

6. 概要:
この記事の導入を通じて、Layui フレームワークを使用してレスポンシブフレームワークを開発する方法を学びました。ニュース情報サイト。 Layui フレームワークを使用すると、Web サイトの基本構造を迅速に構築し、Ajax とlaytpl を介して動的データ読み込みを実装し、グリッドコンポーネントを介してレスポンシブレイアウトを実装できます。この記事があなたのお役に立てば幸いです。また、美しいニュース情報 Web サイトの開発が成功することを願っています。

以上がLayui フレームワークを使用してレスポンシブなニュース Web サイトを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。