whatcode 开发记录

# 开发记录

## Info

### Database Auto Backup (crontab / gdrive)

crontab定时dump然后传到Google Drive的简单backup。

```cron
MAILTO='email'
30 6 * * sat sh ~/backup_db.sh
```

```sh
LOGFILE="/var/log/backup/backup.log"
GDRIVE_ID=gdrive_id
dbnm=database_name
dt=$(date +'%Y%m%d')
mysqldump -uroot -pdummy $dbnm > "${dbnm}_${dt}.sql"
gdrive upload "${dbnm}_${dt}.sql" -p $GDRIVE_ID
echo "[${dt}]${dbnm}_${dt}.sql Uploaded to gdrive/db_back" >> $LOGFILE
rm "${dbnm}_${dt}.sql"
```

### Markdown式样

- comments: begin with '^', style: color:#4c4c4c
- font-family: STKaiti / STSong / STFangsong
- hr tag: border-bottom:1px solid #4c4c4c

>  踩坑MEMO：直接把markdown原文放到div里再用jQuery`html()`来提取文本会造成特殊字符的转义....所以改为放到textarea里再用`val()`来取原文，另外twig默认会有一次转义，加上`|raw`的filter可以取消转义。

### Layout

- `#wrapper`  Inner
- `#sidebar`

```css
 #sidebar + #wrapper:hover{
      margin-left: 18.5rem;
 }
```

### SEO

- template: `*.html.twig`

```text
<title>{% block title %}whatcode{% endblock %}</title>
{% block metaTag %}
 <meta name="description" content="whatcode.cc keywords">
{% endblock %}
```

- views: `article.html`

```text
{% extends 'partArticle.html.twig' %}

{% block title %}{{ article.title }}{% endblock %}
{% block metaTag %}
  <meta name="description" content="{{ article.abstract|default('Abstract Null') }}">
  <meta property="og:title" content="{{ article.title }}">
  <meta property="og:description" content="{{ article.abstract|default('Abstract Null') }}">
  <meta name="keywords" content="{{ article.tag | join(',') }}">
  <meta property="og:site_name" content="whatcode.cc">
{% endblock %}
```

另外symphony有一个看上去挺复杂的[SeoBundle](https://symfony.com/doc/current/cmf/bundles/seo/introduction.html)

## 怎样都好的开发记录

### 2016-8-3 初步开发

phpmyadmin限制ip访问设置。
	
 	$ sudo sed -i -e 's/127.0.0.1/your_ip_address/g' /../phpMyAdmin.conf
 	$ sudo service httpd restart
	
symphony秘密配置在parameter.yml，公开的repository得记住加gitignore。

**mysql密码重置**:

```bash
 sudo service mysqld stop
 sudo mysqld_safe --skip-grant-table&
 //mysql交互
 mysql
 use mysql
 update user set Password =password(''密码) where User='root'
 exit
```

> mac上装完mysql回来mark一下，
5.7版本的password字段已经改成authentication_string了，可以用desc tables查看。

-------------------------------------------
**Git 分支管理和冲突解决**

[link][Git 分支管理和冲突解决](http://www.cnblogs.com/mengdd/p/3585038.html)

cherry-pick: 拣选另一条分支上的某个提交条目的改动带到当前分支上。。

要拣选多个提交，可以给git cherry-pick命令传递-n选项，比如：

git cherry-pick –n 321d76f
	
05-Aug-2016
修改了favicon，首页：嫌疑犯X的献身

30-Aug-16
想要增加tag的功能，e.g：https://joshuajohnson.co.uk/Choices/

### 2016-9-06 完成了搜索功能，加入文章置顶功能

- 注意mysql字段不要用驼峰法，要用下划线连接。
- bug，article title的长度设成了varchar(32)，只有8个字长，修改为varchar(64)。
- date/datetime 类型，defaul值最好都从1970-01-01开始，高版本的mysql很容易报错。

### 2016-9-08 bug修正，文章出MK语法外，可以直接编辑html标签

文章正文没注意到加了 | e('html')这样的filter。

于是所有tag都被转义。 以为是marked.js的问题，在github issue里各种看html escape。

### 2016-9-16 文章内容width=50em，增加了下一篇和上一篇功能

觉得doctrine好难用，文档也不是很详细，可能这ORM适合更复杂的应用吧...对blog来说好鸡肋。createQuery() Select between不能用，limit不能用，要调用setMaxResult

get到了css triangle的画法，重点就在于元素高宽为0，但是有border。

```css
    .arrow-left{
    width：0；height：0；
    Border-right：5px solid #888；}
```

### 2016-9-24 开发了简历功能

直接写了一个profile页面，后台可以直接编辑写入。然后加了config字段判断是否开启。简单粗暴。

### 2016-11-01 适配了13.3寸mobile

用mac看的时候，被layout吓了一跳，设置的max-width是1280px，14寸以下排版都乱了。所以从新调整，顺便把mobile的菜单适配也做了。
最后加了简历编辑功能。新增了define.php保存一些常量。

### 2016-11-16 图片上传功能，七牛云

下载了php的sdk [七牛云帮助文档](http://developer.qiniu.com/article/index.html)，本地调试穿透内网是用的natapp，开通了一个免费的通道，下载配置config.ini(其实就是配authtoken)，然后修改server配置 listen 80 把公网ip指向本地的项目地址。
- [Symfony 2 + Twig global variables](http://stackoverflow.com/questions/9263903/symfony-2-twig-global-variables)
- [七牛上传的响应处理大全](http://blog.csdn.net/guoer9973/article/details/45916709)

七牛云提供了图片缩略图功能
[图片高级处理 (imageMogr2)](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)

```php
//指定新高度为 467px：
"eg.http://78re52.com1.z0.glb.clouddn.com/resource/gogopher.jpg?imageMogr2/thumbnail/x467"
```

然后服务器这边处理的时候也对width大于1024的图片进行了压缩处理，重点是 imagecreatetruecolor+imagecopyresampled：

```php
$image_p = imagecreatetruecolor($new_width, $new_height);
 // preserve transparency
if($type == "gif" or $type == "png"){
    imagecolortransparent($image_p, imagecolorallocatealpha($new, 0, 0, 0, 127));
    imagealphablending($image_p, false);
    imagesavealpha($image_p, true);
}
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
```

流程基本参考了之前做项目水印的流程：[PHP 图片上传 水印添加](http://whatcode.cc/blog/type/1/id/47)
利用imagecopyresized() 进行resize同时合并原图与水印。

### 2016-11-24 xdebug

感觉本地访问也很慢，所以希望用xdebug分析一下性能，[文这里](http://whatcode.cc/blog/type/1/id/66)。
除了db connection很花时间，还有就是依赖注入容器(appProdDebugProjectContainer)下的get swiftmail
er的服务，然后我并没有用到这个，有时间研究一下symphony怎么去掉这个服务。

### 2016-12-12 HTTPS

看到消息，似乎今年后chrome就要对http加unsecurity小红旗了，所以寻思给自己的blog也装上SSL加密证书。

首先确认httpd.conf：`httpd -V`

apache设置：

#### mod_ssl.so

本地module里并没有这个模块，wget进行安装

```bash
wget http://www.modssl.org/source/filname
tar -zxvf mod_ssl.tar.gz
```

### 2016-12-29 重新调整排版 + escape + twig include + 回收站

参考了[Qdaily](http://www.qdaily.com/articles/23919.html)的文章详细，和[paiza開発日誌](http://paiza.hatenablog.com/)的代码区域。
如果是英文排版比较喜欢sitepoint，ROBOTO字体做正文很漂亮。

### [bug] escape： angle brackets

解决了marked.js 解析非html代码会将“<”等转义的bug，twig输出如果加上| escape就可以完美解决，但是因为想要在Markdown编辑html标签所以必须以raw方式输出，< code >区域要单独处理： [reffered issue](https://github.com/chjj/marked/issues/160)

#### twig include

终于找到这个方法了，把所有页面的公共部分都取出来放在了common下。

```html
{{ include('common/articleList.html.twig', { 'articleList': articles }) }}
```

发现一个大bug，原来分页一直不对的，因为是用ajax请求，没有加上文章列表的类型。

#### sql error

[Expression #1 of ORDER BY clause is not in SELECT list, references column 'elgg.ps.value' which is not in SELECT list](https://github.com/Elgg/Elgg/issues/8121)

Solution→[cnblogs](http://www.cnblogs.com/lonelywolfmoutain/p/5433581.html)

### 2017-01-01 七牛云，空间资源删除功能

修改了一些后台上载空间的功能和式样，不知道为何回调函数没成功，特地去买了穿透内网的付费隧道，打算之后再看看。文章编辑页面添加了onbeforeunload确认页面离开。
浏览了fontawsome提供的examples，提供了fa-fw的calss，终于实现列图标对齐了，治愈强迫症。

### 2018-08-26 Apache  → Nginx

自从Linode被自己折腾坏过后就再也没更新过orz  
昨天花了一晚上重新搭建了环境，白给linode交了半年多的钱。  
顺便服务器从apache换到了Nginx，然后看到symphony4都出来了。

### 2020-11-28 markdown editor (lepture)

终于把原生Textarea换成markdwon编辑器了。

[选型参考： Top 7: Best Markdown editors Javascript and jQuery plugins](https://ourcodeworld.com/articles/read/359/top-7-best-markdown-editors-javascript-and-jquery-plugins)
- 采用了看上去比较简洁的lepture的编辑器：https://github.com/lepture/editor

最近完全放弃本地开发，全部用codeanywhere了。

```bash
cd ./web/assets/
mkdir -r lepture-editor/fonts
cd lepture-editor

# download font
wget https://lab.lepture.com/editor/fonts/icomoon.woff -P fonts
# download js, css
wget http://lab.lepture.com/editor/marked.js
wget http://lab.lepture.com/editor/editor.js
```

发现自己以前的页面好混乱。

- 编辑页面：`articlePost.html / part.html.twig`
- 详细页面：`article.html / partArticle.html.twig`
- 新增页面:  `newArticle.html / part.html.twig`

### 2020-11-29 TOC

- 技术选型：[i5ting_ztree_toc](https://github.com/i5ting/i5ting_ztree_toc)

```bash
cd /web/assets/i5ting_ztree_toc
wget https://raw.githubusercontent.com/i5ting/i5ting_ztree_toc/master/dist/ztree_toc.min.js 
wget ../i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.min.js  
wget ../i5ting_ztree_toc/master/js/jquery-1.4.4.min.js
wget ../i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css 
```

- `article.html`

```js
$('#tree').ztree_toc({
	is_auto_number: false,
	documment_selector: '#md-content',
	highlight_on_scroll: false,
	is_highlight_selected_line: false,
	ztreeStyle: {
		width:'260px',
		overflow: 'hidden',
		position: 'fixed',
		border: '0px none',
		left: '85rem',
		top: 'auto',
	},
});
```

### 2021-02 Blog UI更新

更新了一下博客的ui。好久不看php的代码，有点新鲜，函数堆砌。
不过不用编译保存即执行改起来有种好清爽的感觉...

### 2021-03-12 添加了RSS功能

有第三方库。
[Universal Feed Generator: Generate feeds in RSS 1.0, 2.0 an Atom formats](https://www.phpclasses.org/package/4427-PHP-Generate-feeds-in-RSS-1-0-2-0-an-Atom-formats.html#view_files/files/22277)

但是感觉就简化了xml标签生成，还是直接手写了。

### 2021-08-01 添加Mathjax渲染

```diff
@@ -81,6 +81,13 @@
+<script type="text/x-mathjax-config">
+MathJax.Hub.Config({
+  tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}
+});
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

@@ -97,10 +104,13 @@
content = marked.parser( tokens ); 
content = marked(md,{smartypants: true});
$("#md-content").html(content);
...
+MathJax.Hub.Queue(["Typeset", MathJax.Hub, "md-content"]);
```

## TODO

☑︎　Markdown 目录生成    
☑︎　Mathjax Render  
□ metadata SEO优化      
□ 留言删除功能  
□ Tag管理功能    
□ sites分类展示  
☑︎ RSS