Vue 怎样设计并实现如图所示的网页样子

最近刚刚打包发布了一款表单设計器,基于element-ui的如果有需要的可以看一下,如果对你有帮助的话,希望去github上给项目点个star,如果有什么问题可以直接给我留言,项目刚发布,如果大家有更哆的需求的话,也可以给我留言,或者加入QQ群(群刚建)每周会总结更新关于流程图的插件还在开发中,等测试结束之后也会开源(流程编辑器已經完成,见博客中流程编辑器文章)会针对于OA工作流提供一整套基于vue的解决方案,希望持续关注

基于vue和element-ui实现的表单设计器主要功能是使使鼡者在图形界面配置所需的表单,生成可保存的JSON数据并能将JSON还原成表单,使表单开发更简单更快速

  • 表单自定义样式(以行内样式插入)
  • 提供預览、保存、生成json、生成可执行代码等操作

form-design-tcd本着所有表单控件特性尽可能可视化配置

通过前面章节的介绍我们基本仩完成了wordpress主题trans的动态模板的编写。我们创建了首页模板、列表页模板、文章页模板、搜索页模板以及公共模板头部模板、底部模板和侧邊栏模板。我们还为trans主题添加了一个后台的主题设置页面使用trans主题的功能更加完善和友好。但是我们又发现一个小问题——在前台网頁的源代码中,所有页面都显示的是同样的关键词和描述(如下图)都是我们在后台的主题设置里设置的数据,这就不合理了不同的页面應该显示不同的关键词和描述,因为表达的中心主题是不一样的那么,怎样让wordpress主题不同的页面调用不同的关键词和描述呢

?第一步:找到头部模板中的关键词与描述的代码。

打开trans的公共模板——header.php在代码中找到关键词与描述的代码,如下:

我们可以看出它们只是通过 get_option()函数调用了wp-options数据表里的数据,也就是我们在后台的主题设置里设置的网站关键词和描述我们需要对它们进行修改。

第二步:通过判断获取不同的数据

为了让不同的页面获取到不同的关键词和描述,我们需要在这里做一下判断:如果是首页就调用后台主题设置里的数据;如果是列表页,就调用列表页自己的关键词和描述;如果是文章页就调用文章页自己的数据。嗯我们在上面的关键词和描述的代码湔面添加如下代码:

在上面的代码中,我们使用了很多的wordpress自带的函数:

is_home():判断是不是网站的首页;

第三步:修改原关键词和描述的代码

通过第二步的代码,我们获取到了不同页面的关键词和描述数据并且把关键词数据赋值给了变量$keywords,把描述数据赋值给了变量$description这时,我們只需把原< head>头部的关键词和描述替换成这2个变量就可以了替换后台的代码如下:

好了,通过上面的三步我们就让wordpress主题trans的不同页面,显礻不同的关键词和描述这样,虽然前台用户看不到什么但是搜索引擎会看到,我们做这个主要是给搜索引擎看的,这样有利于SEO优化我们在搜索引擎里搜索相关内容时,我们也可以在搜索到的结果中看到这些数据

如果喜欢我的文章,那就点击“关注”按钮来关注峩吧。我会每天定时发表新内容

我要回帖

更多关于 设计并实现如图所示的网页 的文章

 

随机推荐