写给刚入行的程序员

源地址: 顶级程序员

1.作为前端开发者,使用双显示器能大幅提高开发效率。

2.学编程最好的语言不是PHP,是English。

3.自己做的东西交付之前先测试一遍。

4.问别人之前最好先自己百度,google一下,以免问出太低级的问题。

5.把觉得不靠谱的需求放到最后做,很可能到时候需求就变了,或者取消了。

6.读好书,垃圾书会浪费你时间。

7.不要炫技,面向人脑编程更便于维护。

8.没事别重复造轮子,你造的轮子大多数时候只有你觉得好用。接手你的轮子的人会在背后骂你上百遍。

9.不要先写框架再写实现。最好反过来,从原型中提炼框架。

10.新技术一定不要找书,书一旦印出来就过时了。

11.请勿久坐,多喝水,尤其是遇到很久都解决不了的问题的时候,多走动走动。

12.考虑可维护性比考虑性能更重要。

13.越难解决的bug往往犯的错误越低级。

14.比起鼓励师,不如给程序员找一个靠谱的产品经理。

15.熬夜低效率写代码,不如好好睡觉。

16.你遇到的问题,大多数人都遇到过,并且网上都有完整的解决方案,你找不到,只是你懒得去找。

17.多沟通,不少加班工作是由于沟通少造成的。

18.普通程序员+google=超级程序员。实在不行,百度也可以,学会利用搜索引擎来辅助自己解决问题。

19.早点找女朋友,生活作息会更健康。你懂的!

20.永远别小看程序媛。即使是青铜,说不定背后有个王者在帮她。

Vant - 有赞移动端 Vue 组件库


logo



logo


A Vue.js 2.0 Mobile UI at YouZan

Build Status
downloads
Coverage Status
npm version
license

特性

  • 50+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 90%
  • 完善的中英文文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

安装

  1. npm i -S vant

快速上手

方式一. 使用 babel-plugin-import (推荐)

  1. # 安装 babel-plugin-import 插件
  2. npm i babel-plugin-import -D
  1. // 在 .babelrc 或 babel-loader 中添加插件配置
  2. // 注意:webpack 1 无需设置 libraryDirectory。
  3. {
  4. "plugins": [
  5. ["import", {
  6. "libraryName": "vant",
  7. "libraryDirectory": "es",
  8. "style": true
  9. }]
  10. ]
  11. }

接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。

  1. import { Button } from 'vant';

方式二. 按需引入组件

  1. import Button from 'vant/lib/button';
  2. import 'vant/lib/vant-css/base.css';
  3. import 'vant/lib/vant-css/button.css';

方式三. 导入所有组件

  1. import Vue from 'vue';
  2. import Vant from 'vant';
  3. import 'vant/lib/vant-css/index.css';
  4. Vue.use(Vant);

CDN

  1. <!-- 引入样式 -->
  2. <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
  3. <!-- 引入组件 -->
  4. <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

更多内容请参考 快速上手.

贡献代码

修改代码请阅读我们的 开发指南

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+.

手机预览

可以手机扫码以下二维码访问手机端 demo:

qrcode

链接

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

vagrant+docker一键搭建php+mysql开发环境

必备软件

  1. Vagrant
  2. Virtual Box

启动脚本

  1. Vagrantfile
  1. Vagrant.configure("2") do |config|
  2. config.vm.box = "ubuntu/xenial64"
  3. config.vm.network "forwarded_port", guest: 80, host: 80
  4. config.vm.network "forwarded_port", guest: 3306, host: 3306
  5. config.vm.network "private_network", ip: "10.0.0.2"
  6. config.vm.provision "shell", inline: <<-SHELL
  7. # 更换aliyun软件源
  8. cp /etc/apt/sources.list /etc/apt/sources.list.bak
  9. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse' > /etc/apt/sources.list
  10. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse' >> /etc/apt/sources.list
  11. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse' >> /etc/apt/sources.list
  12. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse' >> /etc/apt/sources.list
  13. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse' >> /etc/apt/sources.list
  14. apt-get update
  15. # 安装docker
  16. apt-get -y install apt-transport-https ca-certificates curl software-properties-common
  17. curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
  18. add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
  19. apt-get -y update
  20. apt-get -y install docker-ce docker-compose
  21. # 使用aliyun加速docker镜像
  22. mkdir -p /etc/docker
  23. echo '{' > /etc/docker/daemon.json
  24. echo ' "registry-mirrors": ["https://kag9wqej.mirror.aliyuncs.com"]' >> /etc/docker/daemon.json
  25. echo '}' >> /etc/docker/daemon.json
  26. systemctl daemon-reload
  27. systemctl restart docker
  28. usermod -G docker vagrant
  29. cd /vagrant
  30. docker-compose up -d
  31. # 开机自启动
  32. echo '#!/bin/bash' > /etc/rc.local
  33. echo 'sleep 10' >> /etc/rc.local
  34. echo 'cd /vagrant' >> /etc/rc.local
  35. echo 'docker-compose up -d' >> /etc/rc.local
  36. echo 'exit 0' >> /etc/rc.local
  37. sudo rm /bin/sh
  38. sudo ln -s /bin/bash /bin/sh
  39. SHELL
  40. end
  1. docker-compose.yml
  1. version: '2'
  2. services:
  3. mysql:
  4. image: mysql
  5. environment:
  6. - MYSQL_ROOT_PASSWORD=root
  7. volumes:
  8. - "./mysql:/var/lib/mysql"
  9. ports:
  10. - '3306:3306'
  11. networks:
  12. - bridge
  13. www:
  14. build: .
  15. volumes:
  16. - "./wwwroot/www:/app"
  17. - "./wwwroot/static/Uploads:/app/Uploads"
  18. environment:
  19. - VIRTUAL_HOST="你要绑定的域名"
  20. - PHP_DB_HOST=mysql
  21. - PHP_DB_NAME=你的数据库名称
  22. - PHP_DB_USER=root
  23. - PHP_DB_PASSWORD=root
  24. networks:
  25. - bridge
  26. lb:
  27. image: 'dockercloud/haproxy'
  28. volumes:
  29. - /var/run/docker.sock:/var/run/docker.sock
  30. links:
  31. - www
  32. ports:
  33. - '80:80'
  34. networks:
  35. - bridge
  36. networks:
  37. bridge:
  1. Dockerfile
  1. FROM php:5.6-apache
  2. # 安装扩展
  3. COPY ./soft/*.tgz /soft/
  4. WORKDIR /soft
  5. RUN pecl install redis-3.1.6.tgz \
  6. && pecl install xdebug-2.5.5.tgz \
  7. && docker-php-ext-enable redis xdebug \
  8. && docker-php-ext-install pdo_mysql \
  9. && docker-php-ext-install mysqli \
  10. && rm -rf /soft
  11. # URL重写
  12. RUN a2enmod rewrite
  13. # 安装composer
  14. ADD ./soft/composer.phar /usr/local/bin/composer
  15. RUN chmod 755 /usr/local/bin/composer \
  16. && composer config -g repo.packagist composer https://packagist.phpcomposer.com
  17. # 安装代码
  18. COPY ./wwwroot /app/
  19. # 修改网站主目录
  20. ENV APACHE_DOCUMENT_ROOT /app
  21. RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
  22. RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
  23. # 可写权限
  24. RUN chmod -R 777 /app/
  25. # 默认工作目录
  26. WORKDIR /app
  27. # 暴露工作端口
  28. EXPOSE 80 443 22

前端框架Semantic-ui

官网: http://www.semantic-ui.cn/

更快地设计赏心悦目的网站

Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

简洁的 HTML

Semantic UI中词语和类(css clases)是可以相互替换的概念

直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。

取BEM 和 SMACSS 的精华,同时使之更易于使用。

直观明了的 Javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能

开发者可以更改任何组件中的配置来设置该组件中的某一设置

化繁为简的调试

记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。

官网: http://www.semantic-ui.cn/

关于input file的文件过滤方法

限制只能选择图片: <input type="file" accept="image/*" />
限制只能选择视频: <input type="file" accept="video/*" />
限制只能选择音频: <input type="file" accept="audio/*" />
直接打开摄像头拍照: <input type="file" accept="image/*" capture="camera" />
直接打开摄像头录像: <input type="file" accept="video/*" capture="camera" />

MUI一个以IOS为参考的移动端前端框架

mui

性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

参考文档

mui官网文档使用Jekyll 构建,立即查看

快速体验

在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;



在线交流

若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;

License

mui遵循MIT License;

开发工具

mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;



一个markdown编辑器editor.md

Editor.md






Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.

Features

README & Examples (English)


Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。

editormd-screenshot

主要特性

Examples

https://pandao.github.io/editor.md/examples/index.html

Download & install

Github download

Bower install :

  1. bower install editor.md

Usages

HTML:

```html


一个翻译github的脚本

把下面的代码另存为github.user.js, 然后拖拽到chrome的插件管理界面, 打开github就可以看到中文的github了

  1. (function() {
  2. var url_has = function(str) {
  3. return location.href.indexOf(str) >= 0;
  4. }
  5. var $ = function(selector) {
  6. return document.querySelectorAll(selector);
  7. };
  8. var replace_dom = function(selector, num, attr, old_string, new_string) {
  9. var selector_str = selector;
  10. if (typeof selector == 'string') {
  11. selector = $(selector);
  12. }
  13. var rep = function(str) {
  14. str = str || '';
  15. if (typeof new_string == 'undefined') {
  16. for (var j in old_string) {
  17. str = str.replace(old_string[j][0], old_string[j][1]);
  18. }
  19. } else {
  20. str = str.replace(old_string, new_string);
  21. }
  22. return str;
  23. }
  24. if (num === 'each') {
  25. for (var i in selector) {
  26. selector[i][attr] = rep(selector[i][attr]);
  27. }
  28. } else if (selector.length && (num in selector) && (attr in selector[num])) {
  29. selector[num][attr] = rep(selector[num][attr]);
  30. }
  31. if (typeof selector_str == 'string') {
  32. setTimeout(function() {
  33. replace_dom(selector_str, num, attr, old_string, new_string);
  34. }, 1000);
  35. }
  36. };
  37. if (!url_has('github.com')) {
  38. return;
  39. }
  40. // 搜索框
  41. replace_dom($('.header-search-input'), 0, 'placeholder', 'Search GitHub', '全站搜索');
  42. // 翻译导航 Pull requests, Issues, Gist
  43. replace_dom($('.header-nav a'), 2, 'innerHTML', 'Gist', '重点');
  44. // 首页的两个大按钮
  45. replace_dom($('.shelf-cta'), 0, 'innerHTML', 'Read the guide', '阅读指南');
  46. replace_dom($('.shelf-cta'), 1, 'innerHTML', 'Start a project', '开始一个项目');
  47. // 首页我贡献的
  48. replace_dom($('[role=navigation] h3'), 0, 'innerHTML', 'Repositories you contribute to', '你有贡献的库');
  49. // 首页我的仓库
  50. replace_dom($('#your_repos'), 0, 'innerHTML', 'Your repositories', '你的仓库');
  51. replace_dom($('#your_repos a'), 0, 'innerHTML', 'New repository', '新建仓库');
  52. replace_dom($('.repo-filter'), 0, 'innerHTML', 'All', '全部');
  53. replace_dom($('.repo-filter'), 1, 'innerHTML', 'Public', '公开');
  54. replace_dom($('.repo-filter'), 2, 'innerHTML', 'Private', '私有');
  55. replace_dom($('.repo-filter'), 3, 'innerHTML', 'Sources', '创建的');
  56. replace_dom($('.repo-filter'), 4, 'innerHTML', 'Forks', '克隆的');
  57. replace_dom($('#your-repos-filter'), 0, 'placeholder', 'Find a repository', '搜索仓库');
  58. // document.querySelector('.file-navigation i').innerHTML = '分支:';
  59. // 翻译提交时间
  60. replace_dom('relative-time,time-ago', 'each', 'innerHTML', [
  61. ['minutes ago', '分钟前'],
  62. ['an hour ago', '1小时前'],
  63. ['hours ago', '小时前'],
  64. ['a day ago', '一天前'],
  65. ['days ago', '天前'],
  66. ['a month ago', '1个月前'],
  67. ['months ago', '个月前'],
  68. [/^on\s(\d+)\sJan/, '1月$1号'],
  69. [/^on\s(\d+)\sFeb/, '2月$1号'],
  70. [/^on\s(\d+)\sMar/, '3月$1号'],
  71. [/^on\s(\d+)\sApr/, '4月$1号'],
  72. [/^on\s(\d+)\sMay/, '5月$1号'],
  73. [/^on\s(\d+)\sJun/, '6月$1号'],
  74. [/^on\s(\d+)\sJul/, '7月$1号'],
  75. [/^on\s(\d+)\sAug/, '8月$1号'],
  76. [/^on\s(\d+)\sSep/, '9月$1号'],
  77. [/^on\s(\d+)\sOct/, '10月$1号'],
  78. [/^on\s(\d+)\sNov/, '11月$1号'],
  79. [/^on\s(\d+)\sDec/, '12月$1号']
  80. ]);
  81. // 翻译提交时间
  82. replace_dom($('.commit-group-title'), 'each', 'innerHTML', [
  83. ['Commits on', '提交时间: '],
  84. [/Jan\s(\d+)\,\s(\d+)/, '$2年1月$1号'],
  85. [/Feb\s(\d+)\,\s(\d+)/, '$2年2月$1号'],
  86. [/Mar\s(\d+)\,\s(\d+)/, '$2年3月$1号'],
  87. [/Apr\s(\d+)\,\s(\d+)/, '$2年4月$1号'],
  88. [/May\s(\d+)\,\s(\d+)/, '$2年5月$1号'],
  89. [/Jun\s(\d+)\,\s(\d+)/, '$2年6月$1号'],
  90. [/Jul\s(\d+)\,\s(\d+)/, '$2年7月$1号'],
  91. [/Aug\s(\d+)\,\s(\d+)/, '$2年8月$1号'],
  92. [/Sep\s(\d+)\,\s(\d+)/, '$2年9月$1号'],
  93. [/Oct\s(\d+)\,\s(\d+)/, '$2年10月$1号'],
  94. [/Nov\s(\d+)\,\s(\d+)/, '$2年11月$1号'],
  95. [/Dec\s(\d+)\,\s(\d+)/, '$2年12月$1号']
  96. ]);
  97. // 创建新仓库页面
  98. replace_dom($('.subhead-heading'), 0, 'innerHTML', 'Create a new repository', '创建一个新的存储库');
  99. replace_dom($('.subhead-description'), 0, 'innerHTML', 'A repository contains all the files for your project, including the revision history.', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  100. replace_dom($('.owner-reponame label'), 0, 'innerHTML', 'Owner', '所有者');
  101. replace_dom($('.owner-reponame label'), 1, 'innerHTML', 'Repository name', '仓库名称');
  102. replace_dom($('.with-permission-fields .my-3'), 0, 'innerHTML', 'Great repository names are short and memorable. Need inspiration? How about', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  103. replace_dom($('.select-menu-title'), 0, 'innerHTML', 'Choose another owner', '选择其他所有者');
  104. replace_dom($('[for=repository_description]'), 0, 'innerHTML', 'Description', '描述');
  105. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Public', '公开');
  106. replace_dom($('.with-permission-fields .form-checkbox .note'), 0, 'innerHTML', 'Anyone can see this repository. You choose who can commit.', '公开: 任何人都可以看到这个库。你可以选择谁能提交。');
  107. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Private', '私有');
  108. replace_dom($('.with-permission-fields .form-checkbox .note'), 1, 'innerHTML', 'You choose who can see and commit to this repository.', '私有: 您选择谁可以看到并提交到这个存储库。');
  109. // 版本库首页
  110. replace_dom($('.header-search-scope'), 0, 'innerHTML', [
  111. ['This repository', '搜索当前仓库'],
  112. ['This organization', '搜索当前组织']
  113. ]);
  114. replace_dom($('.numbers-summary li:nth-child(1) a'), 0, 'innerHTML', 'commits', '次提交');
  115. replace_dom($('.numbers-summary li:nth-child(2) a'), 0, 'innerHTML', 'branch', '个分支');
  116. replace_dom($('.numbers-summary li:nth-child(3) a'), 0, 'innerHTML', 'releases', '个版本');
  117. replace_dom($('.numbers-summary li:nth-child(4) a'), 0, 'innerHTML', 'contributors', '个贡献者');
  118. replace_dom('#context-commitish-filter-field', 0, 'placeholder', [
  119. ['Filter branches/tags', '搜索分支标签'],
  120. ['Find a tag', '搜索标签']
  121. ]);
  122. replace_dom($('h3'), 'each', 'innerHTML', [
  123. ['Watched repositories', '监控的版本库'],
  124. ]);
  125. replace_dom($('button,a,span,i'), 'each', 'innerHTML', [
  126. ['New pull request', '新拉取请求'],
  127. [' Projects', ' 项目'],
  128. [' Pulse', ' 脉冲'],
  129. [' branch', ' 分支'],
  130. ['Graphs', '图表'],
  131. ['Settings', '设置'],
  132. ['Pull requests', '拉取请求'],
  133. ['Change notification settings', '更改通知设置'],
  134. ['Unread', '未读'],
  135. ['Unwatch all', '取消全部监控'],
  136. ['Unwatch', '取消监控'],
  137. ['Not watching', '不监控'],
  138. ['Participating', '参与'],
  139. ['Mark all as read', '标记全部为已读'],
  140. ['All notifications', '所有通知'],
  141. ['Notifications', '通知'],
  142. ['Watching', '监控'],
  143. ['Learn more', '加载更多'],
  144. ['New repository', '新建仓库'],
  145. ['New team', '新建团队'],
  146. ['My teams', '我的团队'],
  147. ['Repositories', '仓库'],
  148. ['People', '成员'],
  149. ['Teams', '团队'],
  150. ['Use SSH', '使用SSH协议'],
  151. ['Use HTTPS', '使用HTTPS协议'],
  152. ['Create new file', '创建新文件'],
  153. ['Upload files', '上传文件'],
  154. ['Find file', '搜索文件'],
  155. ['Issues', '问题'],
  156. ['Code', '代码'],
  157. ['Wiki', '维基'],
  158. ['Contact GitHub', '联系GitHub'],
  159. ['Training', '培养'],
  160. ['Blog', '博客'],
  161. ['Shop', '商店'],
  162. ['About', '关于'],
  163. ['Labels', '标签'],
  164. ['Milestones', '里程碑'],
  165. ['Filters', '搜索'],
  166. ['Clone or download', '克隆或下载'],
  167. ['Branches', '分支'],
  168. ['Branch:', '分支:'],
  169. ['Tags', '标签'],
  170. ['Download ZIP', '下载ZIP压缩包'],
  171. ['Switch branches/tags', '切换分支或标签']
  172. ]);
  173. })();

一个翻译github的脚本

  1. (function() {
  2. var url_has = function(str) {
  3. return location.href.indexOf(str) >= 0;
  4. }
  5. var $ = function(selector) {
  6. return document.querySelectorAll(selector);
  7. };
  8. var replace_dom = function(selector, num, attr, old_string, new_string) {
  9. var selector_str = selector;
  10. if (typeof selector == 'string') {
  11. selector = $(selector);
  12. }
  13. var rep = function(str) {
  14. str = str || '';
  15. if (typeof new_string == 'undefined') {
  16. for (var j in old_string) {
  17. str = str.replace(old_string[j][0], old_string[j][1]);
  18. }
  19. } else {
  20. str = str.replace(old_string, new_string);
  21. }
  22. return str;
  23. }
  24. if (num === 'each') {
  25. for (var i in selector) {
  26. selector[i][attr] = rep(selector[i][attr]);
  27. }
  28. } else if (selector.length && (num in selector) && (attr in selector[num])) {
  29. selector[num][attr] = rep(selector[num][attr]);
  30. }
  31. if (typeof selector_str == 'string') {
  32. setTimeout(function() {
  33. replace_dom(selector_str, num, attr, old_string, new_string);
  34. }, 1000);
  35. }
  36. };
  37. if (!url_has('github.com')) {
  38. return;
  39. }
  40. // 搜索框
  41. replace_dom($('.header-search-input'), 0, 'placeholder', 'Search GitHub', '全站搜索');
  42. // 翻译导航 Pull requests, Issues, Gist
  43. replace_dom($('.header-nav a'), 2, 'innerHTML', 'Gist', '重点');
  44. // 首页的两个大按钮
  45. replace_dom($('.shelf-cta'), 0, 'innerHTML', 'Read the guide', '阅读指南');
  46. replace_dom($('.shelf-cta'), 1, 'innerHTML', 'Start a project', '开始一个项目');
  47. // 首页我贡献的
  48. replace_dom($('[role=navigation] h3'), 0, 'innerHTML', 'Repositories you contribute to', '你有贡献的库');
  49. // 首页我的仓库
  50. replace_dom($('#your_repos'), 0, 'innerHTML', 'Your repositories', '你的仓库');
  51. replace_dom($('#your_repos a'), 0, 'innerHTML', 'New repository', '新建仓库');
  52. replace_dom($('.repo-filter'), 0, 'innerHTML', 'All', '全部');
  53. replace_dom($('.repo-filter'), 1, 'innerHTML', 'Public', '公开');
  54. replace_dom($('.repo-filter'), 2, 'innerHTML', 'Private', '私有');
  55. replace_dom($('.repo-filter'), 3, 'innerHTML', 'Sources', '创建的');
  56. replace_dom($('.repo-filter'), 4, 'innerHTML', 'Forks', '克隆的');
  57. replace_dom($('#your-repos-filter'), 0, 'placeholder', 'Find a repository', '搜索仓库');
  58. // document.querySelector('.file-navigation i').innerHTML = '分支:';
  59. // 翻译提交时间
  60. replace_dom('relative-time,time-ago', 'each', 'innerHTML', [
  61. ['minutes ago', '分钟前'],
  62. ['an hour ago', '1小时前'],
  63. ['hours ago', '小时前'],
  64. ['a day ago', '一天前'],
  65. ['days ago', '天前'],
  66. ['a month ago', '1个月前'],
  67. ['months ago', '个月前'],
  68. [/^on\s(\d+)\sJan/, '1月$1号'],
  69. [/^on\s(\d+)\sFeb/, '2月$1号'],
  70. [/^on\s(\d+)\sMar/, '3月$1号'],
  71. [/^on\s(\d+)\sApr/, '4月$1号'],
  72. [/^on\s(\d+)\sMay/, '5月$1号'],
  73. [/^on\s(\d+)\sJun/, '6月$1号'],
  74. [/^on\s(\d+)\sJul/, '7月$1号'],
  75. [/^on\s(\d+)\sAug/, '8月$1号'],
  76. [/^on\s(\d+)\sSep/, '9月$1号'],
  77. [/^on\s(\d+)\sOct/, '10月$1号'],
  78. [/^on\s(\d+)\sNov/, '11月$1号'],
  79. [/^on\s(\d+)\sDec/, '12月$1号']
  80. ]);
  81. // 翻译提交时间
  82. replace_dom($('.commit-group-title'), 'each', 'innerHTML', [
  83. ['Commits on', '提交时间: '],
  84. [/Jan\s(\d+)\,\s(\d+)/, '$2年1月$1号'],
  85. [/Feb\s(\d+)\,\s(\d+)/, '$2年2月$1号'],
  86. [/Mar\s(\d+)\,\s(\d+)/, '$2年3月$1号'],
  87. [/Apr\s(\d+)\,\s(\d+)/, '$2年4月$1号'],
  88. [/May\s(\d+)\,\s(\d+)/, '$2年5月$1号'],
  89. [/Jun\s(\d+)\,\s(\d+)/, '$2年6月$1号'],
  90. [/Jul\s(\d+)\,\s(\d+)/, '$2年7月$1号'],
  91. [/Aug\s(\d+)\,\s(\d+)/, '$2年8月$1号'],
  92. [/Sep\s(\d+)\,\s(\d+)/, '$2年9月$1号'],
  93. [/Oct\s(\d+)\,\s(\d+)/, '$2年10月$1号'],
  94. [/Nov\s(\d+)\,\s(\d+)/, '$2年11月$1号'],
  95. [/Dec\s(\d+)\,\s(\d+)/, '$2年12月$1号']
  96. ]);
  97. // 创建新仓库页面
  98. replace_dom($('.subhead-heading'), 0, 'innerHTML', 'Create a new repository', '创建一个新的存储库');
  99. replace_dom($('.subhead-description'), 0, 'innerHTML', 'A repository contains all the files for your project, including the revision history.', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  100. replace_dom($('.owner-reponame label'), 0, 'innerHTML', 'Owner', '所有者');
  101. replace_dom($('.owner-reponame label'), 1, 'innerHTML', 'Repository name', '仓库名称');
  102. replace_dom($('.with-permission-fields .my-3'), 0, 'innerHTML', 'Great repository names are short and memorable. Need inspiration? How about', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  103. replace_dom($('.select-menu-title'), 0, 'innerHTML', 'Choose another owner', '选择其他所有者');
  104. replace_dom($('[for=repository_description]'), 0, 'innerHTML', 'Description', '描述');
  105. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Public', '公开');
  106. replace_dom($('.with-permission-fields .form-checkbox .note'), 0, 'innerHTML', 'Anyone can see this repository. You choose who can commit.', '公开: 任何人都可以看到这个库。你可以选择谁能提交。');
  107. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Private', '私有');
  108. replace_dom($('.with-permission-fields .form-checkbox .note'), 1, 'innerHTML', 'You choose who can see and commit to this repository.', '私有: 您选择谁可以看到并提交到这个存储库。');
  109. // 版本库首页
  110. replace_dom($('.header-search-scope'), 0, 'innerHTML', [
  111. ['This repository', '搜索当前仓库'],
  112. ['This organization', '搜索当前组织']
  113. ]);
  114. replace_dom($('.numbers-summary li:nth-child(1) a'), 0, 'innerHTML', 'commits', '次提交');
  115. replace_dom($('.numbers-summary li:nth-child(2) a'), 0, 'innerHTML', 'branch', '个分支');
  116. replace_dom($('.numbers-summary li:nth-child(3) a'), 0, 'innerHTML', 'releases', '个版本');
  117. replace_dom($('.numbers-summary li:nth-child(4) a'), 0, 'innerHTML', 'contributors', '个贡献者');
  118. replace_dom('#context-commitish-filter-field', 0, 'placeholder', [
  119. ['Filter branches/tags', '搜索分支标签'],
  120. ['Find a tag', '搜索标签']
  121. ]);
  122. replace_dom($('h3'), 'each', 'innerHTML', [
  123. ['Watched repositories', '监控的版本库'],
  124. ]);
  125. replace_dom($('button,a,span,i'), 'each', 'innerHTML', [
  126. ['New pull request', '新拉取请求'],
  127. [' Projects', ' 项目'],
  128. [' Pulse', ' 脉冲'],
  129. [' branch', ' 分支'],
  130. ['Graphs', '图表'],
  131. ['Settings', '设置'],
  132. ['Pull requests', '拉取请求'],
  133. ['Change notification settings', '更改通知设置'],
  134. ['Unread', '未读'],
  135. ['Unwatch all', '取消全部监控'],
  136. ['Unwatch', '取消监控'],
  137. ['Not watching', '不监控'],
  138. ['Participating', '参与'],
  139. ['Mark all as read', '标记全部为已读'],
  140. ['All notifications', '所有通知'],
  141. ['Notifications', '通知'],
  142. ['Watching', '监控'],
  143. ['Learn more', '加载更多'],
  144. ['New repository', '新建仓库'],
  145. ['New team', '新建团队'],
  146. ['My teams', '我的团队'],
  147. ['Repositories', '仓库'],
  148. ['People', '成员'],
  149. ['Teams', '团队'],
  150. ['Use SSH', '使用SSH协议'],
  151. ['Use HTTPS', '使用HTTPS协议'],
  152. ['Create new file', '创建新文件'],
  153. ['Upload files', '上传文件'],
  154. ['Find file', '搜索文件'],
  155. ['Issues', '问题'],
  156. ['Code', '代码'],
  157. ['Wiki', '维基'],
  158. ['Contact GitHub', '联系GitHub'],
  159. ['Training', '培养'],
  160. ['Blog', '博客'],
  161. ['Shop', '商店'],
  162. ['About', '关于'],
  163. ['Labels', '标签'],
  164. ['Milestones', '里程碑'],
  165. ['Filters', '搜索'],
  166. ['Clone or download', '克隆或下载'],
  167. ['Branches', '分支'],
  168. ['Branch:', '分支:'],
  169. ['Tags', '标签'],
  170. ['Download ZIP', '下载ZIP压缩包'],
  171. ['Switch branches/tags', '切换分支或标签']
  172. ]);
  173. })();

php生成网站截图

组件下载: http://wkhtmltopdf.org/
Ubuntu中文支持: apt-get install openssl build-essential xorg libssl-dev libxrender-dev fonts-arphic-bsmi00lp fonts-arphic-gbsn00lp xfonts-intl-chinese

测试命令:./wkhtmltoimage baidu.com baidu.png

php中使用:

  1. // api.php
  2. <?php
  3. $url = isset($_GET['url']) ? $_GET['url'] : die('url param is require');
  4. $cache = __DIR__ .'/cache/' . md5($url) . '.png';
  5. if (!is_file($cache)) {
  6. // 这里写组件的存放位置, 主要要给文件可执行权限 chmod 777 wkhtmltoimage
  7. $shell = __DIR__ . '/shell/wkhtmltox/bin/wkhtmltoimage '. $url .' '. $cache;
  8. shell_exec($shell);
  9. }
  10. header("Content-Type: image/png");
  11. $im = imagecreatefrompng($cache);
  12. imagesavealpha($im, true);
  13. imagepng($im);
  14. imagedestroy($im);

然后访问 http://demo.zhaishuaigan.cn/php/html2img/api.php?url=baidu.com