Web偏传统网站模板

时间：2019-04-10 13:48:01 阅读：160 评论：0 收藏：0 [点我收藏+]

标签：ext boot nta which home info icon 控制 rom

传统网站更应该注意的是数据缓存，加载速度，SEO优化等关键点。

　　SEO：纯前端开发来应用的话要注意几点 h1 h2 标签的使用，图片保证alt属性网站TDK的内容，要简洁关键词突出。内链外链的数量，可以舍身处境的想象一下，如何让爬虫有更多机会爬到自己的网站，又如何让爬虫更多的爬到并且尽量不爬出去，一直在你的网站打转，SEO的确有很多讲究。

网站模板的作用在于，前端搭好这个框架，后台数据来控制和更改整个网站的内容、如果整个后台数据都被改变，列如主页banner图，logo ，网站title 等等相关的，那么这个将改变整个网站的主题，成为一个新站。

那么建立一个这样的模板架第一步要如何开始呢？

　　　1、

每个页面都分为以下几个文件：

　　　index.html 放置json数据，这个网页当前需要的数据，或者整体的公共数据。将以下所有文件都引入进来

　　　body.html 网站的样式

　　　js/index.js　当前页面的js文件

　　　css/index.css 当前页面的css

技术图片

　　2、

技术图片

↑ 如果一些css文件在每个页面中都要使用，那么设立一个global.css 在文件中引入所有css ，方便每个页面调用global.css即可。

技术图片

↑ JS文件：截图中的99_global.js 中可以写入公共的js脚本，其他js可以选择性的写进页面中。

注：所有的引入都要在index.html中进行。

例：

技术图片

这个站点中没有使用UI库，所有操作都是现手写，所以采用了网址形式引入的Jquery。

index.html中的格式为：

<html>

　　 <body>

　　　　<div id="content"></div> 　　　　//将body.html内容放置在此div中

　　　　　　var data = {　　　　　　　　// 放置json数据

　　　　　　　　current_user:{

　　　　　　　　　　　　　id:1,

　　　　　　　　　　　　　email:‘tomLu@gmail.com.cn‘

　　　　　　　　　　}

　　　　</script>

　　　　<script type="text/javascript" src="js/index.js"></script> // 请在这里引入此页面的index.js 必须严格按照所有的引入顺序与位置

$(function() {　　　　　　　　　　　　　　　　　　//引入body.html的内容放置在id="content"中的元素内

　　$(‘#content‘).load("body.html", function() {

　　　　　　render();

　　});

　　　　</script>

　　</body>

</html>

技术图片

body.html内直接写入元素即可。

index.js :

技术图片

js中写入对json数据的插入 ↑

　　　　列：

　　　　　　　　var text = $("#text").html();

　　　　　　　　$.each(data.textData , function(){

　　　　　　　　　　$("#text_cycle").append(Mustache.render( textData , this ))

　　　　　　　　})

在body.html中用

　　　　</script>

　　　　</div>

　　形成循环index.html中的textData这个json数据。

下面是其中一个单页面的整体步骤：

Home主页格式：

技术图片

index.html 存放json数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=8" /> -->

    <title>De Anza Oaks</title>
    <link rel="stylesheet" href="/global.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="#" />
    <!-- <link rel="stylesheet" href="css/jalendar.css"> -->

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

    <!-- Links as currently hosted by http-server -->
    <script src="/js/10_masterslider.min.js"></script>
    <script src="/js/11_calendar_plugin.js"></script>
    <script src="/js/99_global.js"></script>
</head>

<body>
    <div id="content"></div>

    <script>
        // This script block stays in this wrapper html file
        var data = {
            _current_user: {
                id: ‘1234‘,
                email: ‘test@example.com‘,
                display_name: ‘Laurie01‘,
                first_name: ‘Laurie‘,
                last_name: ‘Williams‘,
                is_admin: true
            },
            // _current_user: null,
            banner_img: [{
                id: 1,
                img_url: ‘/community/img/doorway.jpg‘
            }],
            provenance: [{
                id: 1,
                provenance_url: ‘/community/img/tellus.png‘,
                alt: ‘Powered-by-Tellus‘
            }],
            _metadata: {
                root_url: ‘http://127.0.0.1:8080‘,
                page_path: ‘/home‘,
                assets_path: ‘‘,
                site_name: ‘De Anza Oaks‘,
                environment: ‘dev‘,
            },
            community_news: [{
                id: 1,
                title: "WHAT‘S NEW AT DE ANZA OAKS"
            }],
 
        }

    </script>

    <script type="text/javascript" src="js/index.js"></script>
    <script>
        // This script block stays in this wrapper html file
        $(function() {
            $(‘#content‘).load("body.html", function() {
                render();
            });
        });

    </script>

</body>

</html>

body.html 存放主页样式

<!-- header -->
<div class="header">
</div>
<!-- swiper -->
<div class="master-slider ms-skin-default" id="masterslider">
    <div class="ms-slide" id="banner_img_cycle">
        <script id="banner_img" type="txt/template">
            <img src="{{img_url}}"/>
        </script>
    </div>
    <div class="mas-ab">
        <div class="w1200 pr">
            <div id="provenance_cycle">
                <script id="provenance" type="txt/template">
                    <img src="{{provenance_url}}" alt="{{alt}}">
                </script>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <!-- body-1 -->
    <div class="main-top body-one">
        <div class="w1200 pr">
            <div class="main-left body-left" style=" margin-top: 10px;">
                <div class="main-left-contents">
                    <p id="CommunityNews_cycle">
                        <script id="CommunityNews" type="txt/template">
                            {{title}}
                        </script>
                    </p>
                    <ul id="events_photo">
                        <script id="event_template" type="txt/template">
                            <li class="main-left-content-list" >
                                <a class="body1-a jump" data={{link}} href="javascript:;">
                               <p> {{title}}&nbsp;({{num}})</p></a>
                            </li>
                        </script>
                    </ul>
                </div>
                <div class="main-right-content main_right">
                    <div class="main-list">
                        <ul id="featureList">
                            <script id="featureList_template" type="txt/template">
                                <li class="main-list" animated zoomIn">
                                    <a data={{link}} href="javascript:;" class="main-list-a jump">
                                        <p style="background:url(‘{{img}}‘) no-repeat  center 50px">{{category}}</p>
                                    </a>
                                </li>
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- body-2 -->
    <div class="main-top body_two">
        <div class="w1200 pr">
            <div class="main-left body-left">
                <div class="main-left-content swiper-container jump" data="./amenities">
                    <div id="Amenities_title_cycle">
                        <script id="Amenities_title" type="txt/template">
                            {{title}}
                        </script>
                    </div>
                    <ul id="Amenities_cycle" class="Carousel swiper-wrapper">
                        <script id="Amenities" type="txt/template">
                            <li class="swiper-slide" style="background: url(‘{{img_url}}‘) no-repeat; background-size: cover;">
                                <div>
                                    <h6>{{name}}</h6>
                                </div>
                            </li>
                        </script>
                    </ul>
                </div>
                <div class="announcement-tips swiper-pagination"></div>

                <div class="main-right-content main_display">
                    <div id="myId" class="jalendar">
                        <div id="calendar_cycle">
                            <script id="calendar_left" type="txt/template">
                                <div
                                    class="added-event"
                                    data-name="{{creator}}"
                                    data-date="{{date}}"
                                    data-time="{{time}}"
                                    data-title="{{title}}"
                                    data-content="{{abbreviated_body}}"
                                    data-place="{{location}}">
                                </div>
                            </script>
                        </div>
                    </div>
                    <div class="calendar-right-FF">
                    <div class="calendar-right" id="date">
                        <script id="date_template" type="txt/template">
                            <div class="jump" data="activities/calendar">
                                <p>{{friendly_date}}</p>
                                <p>
                                    <span>{{title}}</span>
                                    <a href="javascript:;">more</a>
                                </p>
                            </div>
                        </script>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- body-3 -->
    <div class="main-top body-one" id="Reservables_cycle">
        <script id="Reservables" type="txt/template">
            <div class="w1200 pr">
                <img src="{{img_url}}" alt="Rectangle" class="w1200_img">
                    <div class="reservable">
                        <a data="{{reservation_link}}" class="jump" href="javascript:;">
                            <p>
                                Click Here To Book The {{name}}
                            </p>
                        </a>
                    </div>
                </img>
            </div>
        </script>

    </div>
    <div class="map_img" id="birds_eye_view_cycle">
        <script id="birds_eye_view" type="txt/template">
            <!-- <div class="w1200_FF"> -->
            <div class="w1200 pr w1200-view" id="">
            <img src="{{img_url}}" alt="Aerial view of the residential area">
            <div class="view-p">
                <p>
                   {{title}}
                </p>
            </div>
            <!-- </div> -->
        </div>
        </script>
    </div>
</div>

<!-- <div class="login-2">
    <h3 class="login-H3-2">Lost Password Help</h3>
    <p class="return"><img src="/community/img/Bounced.png" alt="Bounced"></p>
    <p class="login2-p">
        Fill out the below information and your username and password will be sent to your originally specified email
        address
    </p>
    <input class="login-int2" type="text" placeholder="Name"><br />
    <p class="login-Or">Or</p>
    <input class="login-int-a2" type="text" placeholder="Password">
    <input class="login-int-a3" type="text" placeholder="Password">
    <button class="login-button2">Submit</button>
</div> -->
<!-- footer -->
<div class="footer">
    <p>
        Copyright © 2019 Tellus, Inc. All Rights Reserved.
    </p>
</div>

index.js 用了jquery便于查看简单易懂

var render = function() {
    _pre_render();
    // Render page
    var event_template = $(‘#event_template‘).html();
    var featureList_template = $(‘#featureList_template‘).html()
    var date_template = $(‘#date_template‘).html()
    Mustache.parse(event_template);
    Mustache.parse(featureList_template);
    Mustache.parse(date_template);
    $.each(data.shortcuts, function() {
        $(‘#events_photo‘).append(Mustache.render(event_template, this));
    });
    $.each(data.feature_list, function() {
        $(‘#featureList‘).append(Mustache.render(featureList_template, this));
    });
    $.each(data.feature_list, function(index, item) {
        $(‘#featureList li‘).eq(index).find(‘p‘).hover(function() {
            $(this).css(‘background‘, `url(${item.active_img}) no-repeat  center 50px`)
        }, function() {
            $(this).css(‘background‘, `url(${item.img}) no-repeat  center 50px`)
        })
    })
    $.each(data.events, function() {
        $(‘#date‘).append(Mustache.render(date_template, this));
    });

    var Reservables = $(‘#Reservables‘).html()
    $.each(data.amenities.filter(a => a.reservable), function() {
        $(‘#Reservables_cycle‘).append(Mustache.render(Reservables, this));
    });

    var birds_eye_view = $(‘#birds_eye_view‘).html()
    $.each(data.birds_eye_view, function() {
        $(‘#birds_eye_view_cycle‘).append(Mustache.render(birds_eye_view, this));
    });

    var Amenities = $(‘#Amenities‘).html()
    $.each(data.amenities, function() {
        $(‘#Amenities_cycle‘).append(Mustache.render(Amenities, this));
    });

    var CommunityNews = $(‘#CommunityNews‘).html()
    $.each(data.community_news, function() {
        $(‘#CommunityNews_cycle‘).append(Mustache.render(CommunityNews, this));
    });

    var Amenities_title = $(‘#Amenities_title‘).html()
    $.each(data.amenities_title, function() {
        $(‘#Amenities_title_cycle‘).append(Mustache.render(Amenities_title, this));
    });

    var banner_img = $(‘#banner_img‘).html()
    $.each(data.banner_img, function() {
        $(‘#banner_img_cycle‘).append(Mustache.render(banner_img, this));
    });

    var provenance = $(‘#provenance‘).html()
    $.each(data.provenance, function() {
        $(‘#provenance_cycle‘).append(Mustache.render(provenance, this));
    });
    //calendar
    var calendar = $(‘#calendar_left‘).html();
    Mustache.parse(calendar);
    $.each(data.events, function() {
        $(‘#calendar_cycle‘).append(Mustache.render(calendar, this));
    });

    // Global post render
    _post_render();

    // Local post render
    $.getScript(`${data._metadata.assets_path}${data._metadata.page_path}/js/swiper.min.js`, function() {　　//这里作用于引入这个js脚本 和使用脚本中的功能
        //Carousel
        var swiper = new Swiper(‘.swiper-container‘, {
            width: 412,
            spaceBetween: 23,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ‘.swiper-pagination‘,
                clickable: true,
            }
        });
    });
    $.jqLoadFix = function() {
        if (this.complete) {
            var that = this;
        }
    }
    $.getScript(`${data._metadata.assets_path}${data._metadata.page_path}/js/jalendar.js`, function() {
        $(function() {
            $(‘#myId‘).jalendar({
                // customDay: ‘2017/12/01‘, // Format: Year/Month/Day
                color: ‘#6AA666‘, // Unlimited Colors
                // lang: ‘EN‘ // Format: English — ‘EN‘, Türkçe — ‘TR‘
            });
        });
    });

    $(‘#calendar‘).calendar({
        ifSwitch: true, // Whether to switch the month
        hoverDate: true, // hover Whether to display the day information
        backToday: true // Whether to return to the day
    });

    var slider = new MasterSlider();
    slider.setup(‘masterslider‘, {
        width: 1920, // slider standard width
        height: 500, // slider standard height
        mouse: false,
        autoplay: false,
        loop: true,
        overPause: false,
        speed: 13
    });

    //banner
    MSScrollParallax.setup(slider, 60, 100, true);
    slider.control(‘arrows‘);
    var i = 1,
        ileng = $(‘.ms-slide‘).length;

    $(‘.main-switch-top a‘).click(function() {
        $(this).addClass(‘curr‘).siblings().removeClass(‘curr‘);
        var manin = $(this).index();
        $(‘.main-switch-item‘).hide();
        $(‘.main-switch-item‘).eq(manin).fadeIn();
    })

    // time
    function timebar() {
        $(‘.mas-tib‘).stop().animate({
            ‘width‘: 350 + ‘px‘
        }, 6000).animate({
            ‘width‘: 0
        }, 0);
        $(‘.ms-nav-next‘).click();
    };

    function clickAdd() {
        $(‘#masterslider‘).delegate(‘.ms-nav-next‘, ‘click‘, function() {
            i++;
            if (i > ileng) {
                i = 1;
            };
            $(‘.ban-len i‘).html(i);
        })
    };

    function clickReduce() {
        $(‘#masterslider‘).delegate(‘.ms-nav-prev‘, ‘click‘, function() {
            i--;
            if (i < 1) {
                i = ileng;
            };
            $(‘.ban-len i‘).html(i);
        })
    };

    setInterval(timebar, 6000);
    $(‘.ban-len span‘).html(ileng);
    clickReduce();
    clickAdd();

    var str =
        `<div class="db">
        <div class="login">
            <h3 class="login-H3">De Anza Oaks HOA</h3>
            <p class="return"><img src="/community/img/Bounced.png" alt="Bounced"></p>
            <input class="login-int" type="text" placeholder="Name"><br />
            <p class="username">Please enter your user name</p>
            <input class="login-int-a" type="password" placeholder="Password">
            <p class="userp">Please enter your password</p>
            <button class="login-button">Login</button>
            <div class="login-div">
                <p class="login-a">Forgot your Password?</p>
            </div>
        </div>
    </div>`;

    var handleRemoteLogin = function() {
        var email = $(‘.login-int‘).val();
        var password = $(‘.login-int-a‘).val();

        submitDynamicForm(
            data._metadata.root_url + ‘/session‘,
            ‘POST‘,
            [{
                    name: ‘session_form[email]‘,
                    value: email
                },
                {
                    name: ‘session_form[password]‘,
                    value: password
                },
            ]
        );
    }

    var handleLogin = function() {
        if (!$(‘.login-int‘).val() && !$(‘.login-int-a‘).val()) {
            $(‘.userp‘).css(‘display‘, ‘block‘);
            $(‘.username‘).css(‘display‘, ‘block‘)
            $(‘.login‘).css(‘height‘, ‘360‘)
        } else if ($(‘.login-int‘).val() === ‘Test‘ && $(‘.login-int-a‘).val() !==
            ‘1215‘ || $(‘.login-int‘).val() === ‘admin‘ && $(‘.login-int-a‘).val() !==
            ‘1215‘) {
            $(‘.username‘).css(‘display‘, ‘none‘)
            $(‘.userp‘).css(‘display‘, ‘block‘)
            $(‘.login‘).css(‘height‘, ‘330‘)
        } else if ($(‘.login-int-a‘).val() === ‘1215‘ && $(‘.login-int‘).val() !==
            ‘Test‘ || $(‘.login-int-a‘).val() === ‘1215‘ && $(‘.login-int‘).val() !==
            ‘admin‘) {
            $(‘.username‘).css(‘display‘, ‘block‘);
            $(‘.userp‘).css(‘display‘, ‘none‘);
            $(‘.login‘).css(‘height‘, ‘330‘)
        } else if ($(‘.login-int‘).val() !== "Test" && $(‘.login-int-a‘).val() ===
            " " || $(‘.login-int‘).val() !== "admin" && $(‘.login-int-a‘).val() ===
            " ") {
            $(‘.login‘).css(‘height‘, ‘360‘)
        } else if ($(‘.login-int‘).val() !== "Test" && $(‘.login-int-a‘).val() !==
            "1215" || $(‘.login-int‘).val() !== "admin" && $(‘.login-int-a‘).val() !==
            "1215") {
            $(‘.username‘).css(‘display‘, ‘block‘);
            $(‘.userp‘).css(‘display‘, ‘block‘);
            $(‘.login‘).css(‘height‘, ‘360‘)
        } else if ($(‘.login-int‘).val() === " " && $(‘.login-int-a‘).val() !==
            "1215") {
            $(‘.login‘).css(‘height‘, ‘360‘)
        } else {
            if ($(‘.login-int‘).val() !== ‘Test‘ || $(‘.login-int‘).val() !==
                ‘admin‘) {
                $(‘.username‘).css(‘display‘, ‘block‘)
                $(‘.login‘).css(‘height‘, ‘330‘)
            } else if ($(‘.login-int-a‘).val() !== ‘1215‘) {
                $(‘.userp‘).css(‘display‘, ‘block‘)
                $(‘.login‘).css(‘height‘, ‘330‘)
            }
        }
    }

    var handleFormEnter = function() {
        if (!!$(‘.login-int‘).val() && !!$(‘.login-int-a‘).val()) {
            if (data._metadata.environment === ‘dev‘) {
                if (!!$(‘.login-int‘).val() && !!$(‘.login-int-a‘).val()) {
                    //   TODO: log in user
                    var email = $(‘.login-int‘).val();
                    var password = $(‘.login-int-a‘).val();
                    logInUser(email, password);
                } else {
                    handleLogin()
                }
            } else {
                handleRemoteLogin()
            }
        }
    }

    var username = data._current_user && data._current_user.display_name

    $(‘.jump‘).click(function() {
        var arr = $(this).attr(‘data‘)
        if (username || [‘./city-resources‘, ‘./amenities‘].includes(arr)) {
            if (arr) {
                window.location.href = `${data._metadata.root_url}/${arr}`;
            } else {
                window.location.href = `${data._metadata.root_url}/aboutus`;
            }
        }else{
            var _this = $(this)
            $(‘body‘).append(str);
            $(‘.login-int‘).on(‘keypress‘, function(e) {
                if (e.which == 13) {
                    handleFormEnter();
                }
            });

            $(‘.login-int-a‘).on(‘keypress‘, function(e) {
                if (e.which == 13) {
                    handleFormEnter();
                }
            });
            $(‘.login-button‘).click(function() {
                if (!!$(‘.login-int‘).val() && !!$(‘.login-int-a‘).val()) {
                    //TODO log in user
                    var email = $(‘.login-int‘).val();
                    var password = $(‘.login-int-a‘).val();

                    logInUser(email, password)
                } else {
                    handleLogin()
                }

            })
            $(‘.return‘).click(function() {
                $(‘.db‘).remove();
            })
        }
    })

    if (username) {
        $(".btns-language").click(function(event) {
            event.preventDefault();
        })
        $(".langOv").css("display", "block")
    } else {
        $(".btns-language").click(function() {
            $(‘body‘).append(str);
            $(‘.login-int‘).on(‘keypress‘, function(e) {
                if (e.which == 13) {
                    handleFormEnter();
                }
            });

            $(‘.login-int-a‘).on(‘keypress‘, function(e) {
                if (e.which == 13) {
                    handleFormEnter();
                }
            });
            var _this = $(this);
            $(‘.login-button‘).click(function() {
                if (data._metadata.environment === ‘dev‘) {
                    if (!!$(‘.login-int‘).val() && !!$(‘.login-int-a‘).val()) {
                        //   TODO: log in user
                        var email = $(‘.login-int‘).val();
                        var password = $(‘.login-int-a‘).val();
                        logInUser(email, password);
                    } else {
                        handleLogin()
                    }
                } else {
                    handleRemoteLogin()
                }
            })
            $(‘.return‘).click(function() {
                $(‘.db‘).remove();
            })
        })
    }
};

index.css 纯css文件，不做太多描述。

这里启动的命令行当时是 http-server -d false -c-1

更多内容可直接查看我的github地址 https://github.com/White9999

Web偏传统网站模板

标签：ext boot nta which home info icon 控制 rom

原文地址：https://www.cnblogs.com/Lujihang/p/10594342.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行