所在的位置: js >> js介绍 >> SimpleSearchPage部署

SimpleSearchPage部署

北京中科白癜风医院公益抗白 http://www.jk100f.com/baidianfengzixun/jiankangbaiwen/44509.html
Simple-Search-Page,即简洁导航,一个极简的搜索页面,兼顾网址导航,并加入更多引流页面。Asimplesearchpage.代码作者是zzd也即zhangdi。page1.4.2源码可以在github上下载。我是很喜欢简洁优雅的页面,正好有一天看到个简洁搜索的网页,名副其实,确实很简洁,搜索引擎可以点击选择更换,右侧还有隐藏式的导航栏。瞬间喜欢上了,我也需要一个这样定制好导航的网页当做浏览器主页。从github上下载源码,部署环境很简单,纯静态,无数据库后台,直接在宝塔环境添加站点,上传源码压缩包,解压到网站根目录即可运行。我是基本不懂这些编程、代码、前端什么的,所以当我要定制这个简洁搜索网站主页名字、添加新的导航链接时,傻眼了,根本不会啊。但是又不甘心放弃,找寻其它的类似搜索+导航的网站源码,基本都是一样的模式,没办法,有什么问题就去解决它。于是,花费了一下午搜索查找资料,反复核实、测试,最终搞定了。鉴于网上根本找不到一个详细的教程,万能的B站上也没有半点水花,就趁着晚饭后的时间把这个过程写出来,给那些跟我一样喜欢这类搜索网站的小白们。有前端和编程基础的就不需要看了,写得太小白了。说明源码引用的矢量图是iconfont.cn阿里巴巴矢量图标库,“symbol引用”法,能够支持多色图标搜索框上方的字体是“杨任东竹石体-Bold”配置过程中需要刷新浏览器验证,建议清空Cookies和上网记录后再刷新,浏览器为另一个要修改和用到的文件和文件夹如下:/index.html/js/search.js/js/search.min.js/js/data.json/font/embed.css/font/icon文件夹修改及定制步骤一、网站信息定制化修改在/index.html中修改网站名、描述、SEO关键词和搜索框上的“简洁搜索”4个字,百度统计和谷歌广告代码改为自己申请的即可。具体申请方法请百度。“简洁搜索”文字修改后会发现字型不一致,这个继续看后面步骤解决。二、iconfont.cn阿里巴巴矢量图标库需要注册登录iconfont.cn阿里巴巴矢量图标库,可以使用github或微博账号登陆。登录后点击上方菜单栏的“资源管理”——“我的项目”,点击“新建项目”图标,填写“项目名称”、“项目描述”(其它不建议修改,默认即可),点击“新建”,即成功创建一个项目,以后你选择的图标等素材都可以添加到这个项目中,方便引用。我的项目右侧的“使用帮助”建议看一下,对《Web端使用》方法做个了解。目前平台推荐的用法是最后的“symbol引用”法,也当是未来的主流,能够支持多色图标。在首页的“图标库”或“图标”搜索框中,选择或根据名称搜索你喜欢的图标并加入购物车(鼠标经过图标时会有三个按钮图标,分别是加入购物车、收藏、下载)。图标都选好后,点击页面右上角的购物车图标,此时可以看到已加入购物车的所有图标,然后点击“添加至项目”,选择刚新建的项目,点击“确定”。点击“下载至本地”,保存。三、引用选择的阿里巴巴矢量图标将之前下载的矢量图压缩包上传到网站后台根目录/font/icon文件夹内,并解压,解压后删除压缩包。回到阿里巴巴矢量图标库“我的项目”,选择“symbol”,“点击复制代码”,下面会用到。注意:如果是第二次添加图标到项目中,会有红字提示“点击更新代码...”点击自动更新完代码之后就可以复制了,如://at.alicdn.


转载请注明:http://www.aierlanlan.com/rzfs/9493.html