前端小白入门级仿站调用

                         DEDE CMS仿站(静态、伪静态页面)l工作流程

一、扒页

  1. 进入想要仿制的站点,这里个人推荐老版本的2.6以前的firfox浏览器(链接:https://pan.baidu.com/s/1Xsjk0VwEu_4hdGiFkB6ngg
    提取码:vxea ,注意取消插件,浏览器自检更新)—利用插件(firebug、scrap系列插件),加载完 右键网页另存为文件,记得勾选JavaScript,一般是拿三个页面,index.html(主页)、列表页 、内容页。保存下来的文件夹,对应的命名为index.htm(主页模板)、list_article.htm(列表页模板)、article_article.htm(文章页模板);

  2. 新建Js/css/images三个文件夹 页面样式文件对应命名为index.css(主页样式)、list.css(列表页样式)、article.css(文章页样式)。

  3. 删掉 文件夹中 .dat、.php、分页 例如 index_1.html index_1.css 文件

  4. 在编译器中打开相应 .htm、.css文件,执行格式化,htm 去掉敏感的 关键词,网站标题,网站描述的内容。执行:命令—引用源文件格式(不同编译器下不一样)

  5. 引入模板内相对应的css样式 / j s文件。注意路径 !( 与封装后放在根目录下的区别. 例如”/css,”)

  6. 修改htm模板 中src /herf 文件路径;css中 url 路径(特别容易漏掉,多数背景图路径修改 例如:封装前url (…/…) ,封装后在根目录下需要改为url (/…) )。(ctrl+f 命令 快速替换修改)

  7. 打开修改后的网页模板,在浏览器中f12审查元素,复制不想要的网页部分的选择器名,在编辑器中查找对应内容 shift+ctrl+j 折叠标签,标签防止误删 。对应的css文件也这样操作对应一并删除。

  8. 过程中注意js部分不想要的,也一并去除,(小技巧:测试js效果,挨个删除,看变化用心去体会,或者在火狐中f12 查看事件对应js部分)

  9. 把模板图片,css样式文件,js文件,模板htm分别放入dede织梦后台系统安装的根目录内,对应文件夹 images(三个页面共同的图片就全选替换ctrl+A,ctrl+C),js文件去重。css文件对应放好。

  10. 登录站点后台
    例: http://4g.cschuya.com/dede/
    用户名:admin
    密 码:123456

  11. 在默认模板文件夹一般为templets/也有情况为 templets/wap/中新建 inc lude 文件夹,再新建header.htm和footer.htm 两个空文档;在css默认文件中新建空文件 main.css。

  12. 回到登陆的后台 核心—网站栏目管理—新增栏目,新建一个的顶级栏目,注意 网站首页 不用建顶级栏目,不用写调用 导航链接部分用“/” 代替. 然后确定后,在核心部分点击新建的栏目,进入文档页管理界面,添加文档 ,将三个页面生成,再分别浏览三个页面,主页/栏目页/文章页,(注意一定先 生成-- 再浏览,右键更新,)如果正常就开始准备调用,出现问题也不要着急,打开原网页,f12,对比着查找问题。样式,结构不对的,查看源码,找到对应的复制过来,css修改不用生成,htm结构修改,生成再看效果,如果达到自己的预期效果就可以开始下一步骤封装。

二、 封装(强调:一定是三个页面与需求的效果要求达到一致后才可封装)

  1. 将三个页面的htm,css;footer.htm/header.htm ,main.css 在编辑器中打开,准备封装。
  2. 在三个页面头部引入公共样式,main.css放在原有样式前面。注意路径
  3. 将三个页面的公共htm部分,分别剪切到header/footer文档中,注意一定是公共部分,检查如果有引用插件的,特别注意插件代码的引入位置,还有固定结构的行内样式一定保持原有位置不要动
  4. 对应的公共htm的结构样式分别剪切到main.css中精简完后,用Dw执行批量处理脚本( 链接:https://pan.baidu.com/s/1EOOUFzm5GqSWyGVMyggbJg
    提取码:6xd3 )
    前八个是处理htm,后三个是处理css。Dw中 ctrl+f 执行替换命令 执行文件.完成后.随时检查页面情况

三、 调 用
在之前htm剪切掉的地方调用相应文件。
语句:{dede:include filename=“include/header.htm”/}
:{dede:include filename=“include/footer.htm”/}
按照你封装的部分引入文件就好.

四、 首尾导航部分,和需求内容规定的内容新建顶级栏目,(批量建栏目)注意建完后检查路径 。在这里插入图片描述 在这里插入图片描述
20.首页部分调用,

{dede:global.cfg_webname/} 标题 描述 关键字

在这里插入图片描述

二级导航调用在这里插入图片描述

在这里插入图片描述
相应栏目下文章页调用
在这里插入图片描述
在这里插入图片描述
来源
{dede:field name=‘source’/} [field:source/]
好评
[field:scores/]
作者
{dede:field.writer/}
浏览量
{dede:field name=‘click’/} [field:click/]
文章标题
{dede:field name=“title”/}
发布日期
{dede:field name=‘pubdate’ function=‘strftime("%y-%m-%d",@me)’/}
// 发布日期:2016-08-27
{dede:field name=‘pubdate’ function=‘GetDateTimeMk(@me)’/}
// 发布日期:2016-08-27 14:02:55
文章页
{dede:field.body/}
上一篇
{dede:prenext get=‘pre’/} 前面的文字要去掉,如上一篇可以直接用此代码代替
下一篇
{dede:prenext get=‘next’/}
当前栏目id
{dede:field name=‘typeid’/}
列表序号
[field:global.autoindex/]
 最多栏目套三层,顶级栏目,子栏目,孙栏目 ,在这里插入图片描述
注意图片可以调用栏目链接,
在这里插入图片描述
21.列表页调用部分

{dede:field.seotitle /}-{dede:global.cfg_indexname/} 标题 描述 关键词  列表页文章调用标签为  {dede:list **pagesize**='1' titlelen='80'}  [field:title/] [field:body/] [field:arcurl /]…  {/dede:list}其他内容同上

必须是 pagesize 特别注意和分页调用才能搭配,

核心
这样修改系统设置后,可实现{dede:list}…{/dede:list} 内嵌套调用[field:body\tag…/]

21 .面包屑导航
{dede:field name=‘position’/} {dede:field.title/} 当前位置:重庆军博心理疾病研究院 > 心理问题 > 多梦 >文章标题
22.内容页/文章页部分调用

{dede:field.title/}-{dede:global.cfg_indexname/} 标题

时间/日期 [field:pubdate name=‘pubdate’]
function=‘strftime("%y-%m-%d",@me)’/] //显示 16-05-27
[field:pubdate function=“GetDateMK(@me)”/] //显示 2016-05-27
[field:pubdate name='pubdate’function=“GetDateTimeMK(@me)”/] //显示年月日+时

年月日+时 [field:pubdate function=‘strftime("%b %d, %Y",@me)’/]//显示 May 27, 2016

 文章调用 同上
上一篇 {dede:prenext get=‘pre’/}
下一篇 {dede:prenext get=‘next’/}
分页
{dede:pagelist listitem=" info,index,end,prev,next,pageno,option" listsize=“5”/}在这里插入图片描述

专题需求的修改

  1. 内网进入需求文档提供的站点后台
  2. 核心–专题管理—对应专题文档,找到需要修改 的专题名称
  3. 在.5 服务器–本地竞价站 内(快捷方式:window+E 打开资源管理器)对应站点根目录中找到 专题模板(修改模板为先,也才有效)templets/wap /default—spec_xl.htm
    例如: Z:\长沙站\4g.cschuya.com\templets\default 查找需要修改的专题文件
    在这里插入图片描述
    右键编辑器打开,按需求文档修改指定内容,完成后ctrl+s保存,进入后台找到相应专题生成,右键浏览 ctrl+f5清缓存强制刷新 查看修改内容是否一致
    专题传外网
    按需求文档在 .5 服务器找到对应专题模板文件
    例如:Z:\长沙站\4g.cschuya.com\special(别找模板了没有)…传其他页,直接就是拖拽,index.htm/list_article.htm/article_article.htm, 到外网长点根目录.
    在这里插入图片描述
    打开ftp–站点管理,找到需要上传的站点在哪个服务器,找到相对应需要上传专题的文件夹
    在这里插入图片描述
    ping服务器 window+R 运行cmd,然后复制站点服务器地址连接,进入相应站点文件夹,注意网站内容图片上传路径为/4g.cschuya.com/public_html/uploads/allimg/(与专题传图相比较不同,路径为 例:4g.cschuya.com\special\jj\images)将提供的资料拖入ftp与本地一致对应的文件,注意检查。
    在这里插入图片描述
    选择上传文件全覆盖,完成后点上传链接查看专题修改情况,无误后告知需求提出人确认,又追加再修改。

猜你喜欢

转载自blog.csdn.net/qq_43354395/article/details/84621503