我们将只管即便保持文章的循规蹈矩和普通易懂，请确保自己已经节制了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下根本知识，这些根本知识对理解文章内容是至关主要的：
1. HTML/CSS/JS根本
2. PHP根本
3. 如何利用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上根本知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
CSS解耦由于AMP只许可自定义CSS写到html里，不许可外链接，现在我们的CSS行数已经超过了2k行，再不抽离解耦只怕往后就解不开了，本日我们就把它们按功能解耦。
这里我们用wordpress的公共方法get_template_part轻松搞定，首先我们建立一个CSS文件夹，将CSS样式按功能进行分类：
1. 全局(global.php)
2. 顶部
2.1 常用 (head-common.php)
2.2 菜单 (head-menu.php)
3. 左侧内容区(main-body.php)
4. 右侧侧边栏(main-sidebar.php)
5. 底部(footer-common.php)
接下来把CSS分门别类迁移到这些文件里就可以了，get_template_part('css/head','common')，这样就能获取head-common.php文件的内容。末了我们的style里就剩下这些：
<style amp-custom><?php get_template_part("css/global") ?><?php get_template_part("css/head",'common') ?><?php get_template_part("css/head",'menu') ?> <?php get_template_part("css/main",'body') ?> <?php get_template_part("css/main", 'sidebar') ?> <?php get_template_part("css/footer", 'common') ?> </style>
同样我们可以把一些比如公共底部和侧边栏这样的HTML文件也抽离，总之便是尽可能地保持单一文件的大略性，对UI区域进行解耦。
搜索页面现在我们来根据之前的积累建立搜索页的主题文件，让我想想，10分钟够不足？
我们首先直接从home.php复制全部内容到search.php里，搜索一下看看，居然直接能用？
我们来做一点调度，去掉右侧边栏，列表调成单栏模式，然后在原标语位置加上一个搜索框。
调度列表页的时候，只要把它居中然后宽度增加一些就可以了。
我们在head上添加一个搜索框，还记得我们写的搜索小工具吗，跑到function.php里直接把干系代码复制过来。
<form target="_top" role="search" method="get" class="search-form" action="/"> <input type="text" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' )?>" value="<?php echo get_search_query()?>" name="s" /> <button type="submit" class="search-submit"></button></form>
还是这个配方，还是这个味道，只是现在缺了样式描述有点丑：
耐心的读者能看到这一章，相信样式什么的已经是随手捏来了：
然后我们大略地做一下移动端适配：
这样，我们本日的任务就完成了（下课有点早呃）。
总结和预报本日我们对主题的CSS样式进行理解耦，用了10分钟的韶光制作了主题的搜索页面，由于大多数UI都可以复用，以是这个页面非常大略地完成了
来日诰日我们制作主题的存档页(archive.php)和404页，难度该当和本日差不多（糟糕，这样子的话说好的30天教程彷佛要提前结束了）。
