前端工作记录

灵孩儿官网上线步骤说明

整    理：张少康

时    间：2016-11-08

说    明：灵孩儿官网需求目前还有可能更改，所以将官网上线步骤整理出来

1.在本地安装个java环境（安装jdk，配置环境变量）
2.在cmd下进入你这个文件夹然后执行java的jar打包命令：jar -cvf LinkHealth.war *（ps：war的包名字一定要对）
3.把线上的下线，点Undeploy

4.点击选择文件按钮

5.选择第二步打好的war包，点击deploy

注：
灵孩官网上线后台链接：http://www.linkhealth.cn/manager
用户：linkhealth
密码: link1234health

专题模块化改版

整    理：肖雅君

时    间：2016-03-04

说    明：专题模块化：手机端仍需前端切，PC端改用统一的模板，只需将切好的WAP端代码复制到模板里，再将css样式中的尺寸大小变成WAP端的2倍即可。（钱昱成正做成后台，后续会更新此文档。）

一、新专题步骤

<!doctype html>前

<?php

include_once('../include/global.php');

$special_id = 10379;

$share_title = '产后抑郁,产后抑郁症,产后抑郁如何治疗.。。。 ';//分享的标题[修改]

$share_content = '新生命的降生.。。。';//分享内容[修改]

$share_pic = 'http://www.ci123.com/special/survey-yiyu/styles/images/share_pic.jpg';//分享的图片[修改]

include_once('../global/new_special/info.php');

if(isMobile()){

header("Location:http://m.ci123.com/special/survey-yiyu");//手机端专题链接[修改]

die();

}

<!doctype html>

<html>

</html>

2.<head></head>

<head>

<title>惊！九成产妇有产后抑郁倾向？！</title>//专题标题[修改]

<?php include_once('../global/new_special/share.php');?>

</head>

3.<body></body>

<body>

<?php include_once("../global/header.php");?>

<?php include_once('../global/new_special/part1.php');?>

</div>

<?php include_once('../global/new_special/part2.php');?>

</div>

</div>

</div><!—整体页面-->

<?php include_once('../global/new_special/footer.php');?>

<div style="display:none;"><script src="http://s11.cnzz.com/stat.php?id=1257703690&web_id=1257703690" language="javascript"></script></div>//统计代码[修改]

</body>

二、新老专题比较

1、顶部php

原版：

新版：

改变内容：

(1)替换掉原来的帖子id（现在从库里取，需从后边编辑帖子那边添加）

(2)分享文案只需在开头添加

(3)需引入include_once('../global/new_special/info.php');（必须在$special_id后面引入）

2、头部

原版：

新版：

3、头部以及右侧分享部分

代码：<?php include_once('../global/new_special/part1.php');?>

4、右侧栏部分

代码：<?php include_once('../global/new_special/part2.php');?>

5、评论模块不变

引入此段代码：<?php include_once('../global/reply.php');?>

6、公共底部

代码：<?php include_once('../global/new_special/footer.php');?>

定义SASS函数，方便WAP\PC端的样式数值快速切换

编    写：晋哲

时    间：2016-03-04

说    明：因移动端页面样式都是原尺寸的二分之一，PC专题页固定模板直接引用移动端页面的样式还需要返工去将所有的数值型属性值改回来，为方便两端之间的样式切换，提高效率，建议此类专题使用SASS去写样式，并使用下面定义的函数。

//定义函数
@function math($num) {
    @return $num / 2;
}

//SASS中使用函数，如以下常用的一些数值型属性
.icon {
    top: math(40%);
    margin: math(20px);
    width: math(100px);
    height: math(40px);
    font-size: math(30px);
    background-position: math(-10px) math(-20px);
    background-size: math(240px);
}

//生成的移动端CSS代码
.icon {
    top: 20%;
    margin: 10px;
    width: 50px;
    height: 20px;
    font-size: 15px;
    background-position: -5px -10px;
    background-size: 120px;
}

当需要生成PC端样式时，只需修改函数内的被除数即可。

育网专题评论区改版

整理：肖雅君

时间：2015-12-04

更新：2016-02-26

说明：育网专题PC端和WAP端使用本公司开发的评论区修改步骤

PC端和WAP端评论区改版

头部+导航+底部+评论区

以前PC端和手机端的的评论部分都是用的“畅言”（畅言是搜狐推出的社会化评论及聚合平台）。但以后育网专题都会采用育儿网仿畅言做出来的评论。暂时尚未做成后台，所以需要前端手动添加各种文档、修改参数。

一、PC端

公共头部

简介：育网公共头部，包含导航和登录的php文件以及头部样式引入。

添加方式：无需拷贝文件，无需改变路径，只需要在对应位置添加两串固定代码。

添加位置：

2.“评论”部分

(1)引入评论：

在<!DOCTYPE html>前添加如下代码：

<?php
include_once('../include/global.php');
$id = 11742336;//帖子ID
?>

(2)修改方式：

后台操作：

专题后台链接：http://www.ci123.com/special/sadmin/clearup_list.php?page=4

编辑那边通过后台发布的评论页面有可能是.html文件，（如：http://www.ci123.com/special/sadmin/recommend/recommend.php?code=piyao-ceqie.html），.html文件对应的是“畅言”的评论。

转成育网评论需在后台操作，步骤如下：

将“是否使用妈妈社区评论”选择“是”：

本地操作：

第一步：在index.php中添加两个样式文件（固定链接）：

在index.php的<head>部分添加“左侧评论块”和右侧“专题推荐”部分的样式文件：

<link rel="stylesheet" href="http://www.ci123.com/special/dajiashuo-pc/styles/reply.css">

<link href="http://www.ci123.com/special/recommend/css/recom-wqhg.min.css" rel="stylesheet" type="text/css">

（*注：“dajiashuo-pc/styles/reply.css”是公共样式，部分专题都已使用这个样式，除非所有的专题评论区都存在共性的问题，否则不得直接修改这个样式文件。只能在自己写的样式文件里写入新样式覆盖dajiashuo-pc的样式。）

第二步：引入评论区：

在index.php的评论部分添加如下代码：

<?php include_once("../recommend/piyao-ceqie.php");?>

第三步：修改帖子ID【重要】

【重要】不同专题的帖子ID是不一样的。同一个专题的手机端和PC端的帖子ID是同样的。

二、WAP端

1.添加手机端评论样式

WAP端只需添加一个样式文件。

<link rel="stylesheet" href=" http://m.ci123.com/special/dajiashuo_wap/styles/reply.css">

2.顶部

包括：PC端/WAP端的链接跳转，育网APP分享，代码如下：

<?php
include_once('../inc/global.php');
if(getOsNew()== 'pc'){
header('Location:http://www.ci123.com/special/survey-ceqie/');//链接为专题PC端的链接
exit;
}
$post_id = 10724610;//帖子ID，重要！每一期都要修改
$url = '专题手机端的访问链接';
$share_pic = '专题分享图片';
$msg = '专题分享文案';
$title = '专题标题';
?>
<!DOCTYPE html>
<html>
</html>

3.底部

包括：评论部分+制作团队+“妈妈社区APP推广”+底部版权

重点是评论以及“妈妈社区”，代码如下：

<div class="weibo">
<div class="say"><i></i><span>大家都在说</span></div>
<?php include_once('../inc/reply.php');?>
</div>
<div class="part-team">
</div><!-制作团队-->
<?php
if($_COOKIE['uid']>0&&strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') === false){
?>
<?php } else {?
<a href="http://app.ci123.com/down/bbs.php?type=2" class="app_pro">
<img src="http://m.ci123.com/special/piyao-gudaiyunyu/images/download.png" width="100%">
</a>
<?php }?>
<div class="footer">
</div>

4.分享

简介：手机端另一个和往期专题不同变化是分享。

现在的分享采用两种方式，一种是在微信朋友圈推广，采用微信自带的分享方式。另一种是在妈妈社区APP或是育网APP上的分享按钮。

后端已对这两种方式进行了处理，只有在APP上才会显示分享按钮，微信上并不显示。

但是前端这两种方式都要顾及到，所以需要前端修改两个地方的分享文案。

添加方式：

1．添加微信分享：

在index.php中添加如下代码：

首页添加背景广告

操作步骤：
一、图片添加
尺寸：【1280、1360、1366、1440、1600、1920】（命名时在后面加后缀）
路径：/opt/ci123/www/html/cms/index/styles/images
注：为兼容浏览器，设计处理图片时需将中间白色区域向右延伸1px，实际宽度为961px。
广告栏高度：60px
导航栏高度：40px
顶部60px高度之后需要预留40px高度的空间给导航栏

二、JS修改
路径：/opt/ci123/www/html/cms/index/styles/js
目前最新js文件：add_new_201511021107.js
原始js文件：add_new.js

1、拷贝一份最新的文件，在其基础上修改；
2、修改时一般只需修改时间的if判断条件（如果是间隔天数请参考add_new_201509089.js，如果是连续区间天数请参考add_new.js）
3、需要编辑提供新的背景图片的链接地址

三、HTML修改
路径：/opt/ci123/www/html/cms/index/templates
需最终修改的线上文件：index_v15.html

1、将文件拷贝到index_v15_gff.html上，在测试页面上修改，预览
cp index_v15.html index_v15_gff.html

预览地址：http://www.ci123.com/index/index_v15_gff.php

2、在页面中搜索"add_new"，修改js命名
<script type="text/javascript" src="/index/styles/js/add_new.js"></script>

3、测试页面确认无误后，再在index_v15.html上重复上一步操作（为保险可将index_v15.html另外复制一份）

四、最后在ci123管理后台更新首页
地址：http://nimda.ci123.com/index.php