分享一种前端模板化的思路

本文是针对后台同学自己写网页的一种思路分享。

 

传统网页编写是服务端渲染，pythton的jinjia2；c#的asp；java的jsp等，这种方式依赖各自的服务端模板引擎，且没有前后分离，性能、seo有一定的瓶颈。

前后分离的写法下，前端产生了自己的模板引擎handlebarsjs  ，vue、react都有自身的模板。这样，需要基本掌握nodejs的package.json，还有模板引擎本身的语法。

 

下面介绍一下本文的方法，简单来说就是什么都不用，直接撸html就ok了。

如果页面小于10个，遇到需要模板的地方使用复制的方法即可，这样就做到了无依赖。

页面较多的话，自己用xml解析写个小工具即可，这样可以不依赖nodejs、选择一个css框架（如bootstrap）配合jq的ajax就行了，也不用传统的服务端模板。

 

这样有个注意事项是需要自己按严格xml格式写html，一般问题不大。 

下面是demo

 public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        string xmlPath = System.Windows.Forms.Application.StartupPath + "\\html\\home.html";

        private void buttonBuild_Click(object sender, EventArgs e)
        {
              
            string navStr = "<ul class=\"navbar-nav ms-auto  \"><li class=\"nav-item \"><a class=\"nav-link \" href=\"#\" style=\"min-width: 60px\">主页</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\" style=\"min-width: 60px\">下载</a></li></ul>";


            XmlDocument navDoc = new XmlDocument();
            navDoc.LoadXml(navStr);


             

            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(xmlPath);
            XmlNode divNode = xmlDoc.SelectSingleNode("html/body/nav/div/div");

           
            XmlElement divElement = (XmlElement)divNode;

            XmlNode   navNode= xmlDoc.ImportNode(navDoc.DocumentElement, true);


            divElement.AppendChild(navNode);

            xmlDoc.Save(xmlPath);

        }

        private void buttonActive_Click(object sender, EventArgs e)
        {
            
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(xmlPath);
            XmlNode homeNode = xmlDoc.SelectSingleNode("html/body/nav/div/div/ul/li/a");
            System.Diagnostics.Trace.WriteLine(homeNode.Name);

            XmlElement homeElement = (XmlElement)homeNode;
            string classStr = homeElement.GetAttribute("class");

            string activeStr = "active";
            int activeIndex = classStr.IndexOf(activeStr);
            if (activeIndex < 0)
            {
                classStr += " " + activeStr;
                homeElement.SetAttribute("class", classStr);
            }



            xmlDoc.Save(xmlPath);
        }
    }

 

demo代码，c#写的。

下载