ホームページ > 記事 > ウェブフロントエンド > Layui フレームワークを使用してレスポンシブなニュース Web サイトを開発する方法

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

WBOYオリジナル: 2023-10-24 12:46:53799ブラウズ

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 サイトの他の関連記事を参照してください。

jquery css ajax layui html npm JS git ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Layui フレームワークを使用して、地図の位置決めをサポートする位置ナビゲーションアプリケーションを開発する方法次の記事：Layui フレームワークを使用して、地図の位置決めをサポートする位置ナビゲーションアプリケーションを開発する方法

続きを見る