• Stars
    star
    399
  • Rank 104,801 (Top 3 %)
  • Language
    CSS
  • Created over 10 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

做最专业的前端团队

这什么?

这是 FEX 团队对外首页的源码,将文章提交到这里后就会在 http://fex.baidu.com 上展现。

环境搭建

这个系统是基于 jekyll 搭建的,为了方便本地编辑和看效果,需要将本项目 clone 至本地环境,并在本机安装 jekyll 环境。

docker 版本

由于 ruby 编译经常出问题,所以制作了个 docker 镜像,安装好 docker 后,首先运行如下命令

docker run -it -v `pwd`:/build fexpublic/jekyll:latest bash

其中 pwd 是指当前目录,如果不是用 bash,可以直接写全路径

进入 bash 之后,就能使用如下命令编译了

jekyll build --incremental

然后在 _site 目录下是最终结果,可以通过 python -m SimpleHTTPServer 8080 这样的静态服务查看效果

上传一般只需要上传 index.htmlfeed.xmlsitemap.xmlweeklyblog相应目录就好了,不要全部上传,会很大

Mac/Linux 下

请使用如下命令(其中 gem 是 Ruby 的包管理工具)安装 jekyll(如果遇到权限问题请在前面加 sudo):

gem install jekyll jekyll-paginate redcarpet

如果在 Mac 下安装遇到编译报错,可以试试用 Brew 安装新版 ruby

brew install ruby

如果 gem 安装不上,请试试国内镜像

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/

Windows 下

jekyll 官方对 winodws 的支持程度很低,推荐使用 Building portable Jekyll for Windows,另外这里附上网盘地址方便大家下载:PortableJekyll 1.3.0[百度网盘]

下边以 PortableJekyll 的解压目录为 e:\jekyll 介绍环境变量的配置:

  1. 在环境变量中新建变量: JEKYLL_HOME 取值为 e:\jekyll

  2. 为 PATH 变量添加如下内容: %JEKYLL_HOME%\ruby\bin;%JEKYLL_HOME%\devkit\bin;%JEKYLL_HOME%\git\bin;%JEKYLL_HOME%\Python\App;%JEKYLL_HOME%\devkit\mingw\bin;%JEKYLL_HOME%\curl\bin

完成 jekyll 配置后,通过如下命令检查是否配置成功:

jekyll -h 

本地预览

完成 jekyll 的安装后,在源码目录运行如下命令,就能在 localhost:4000 中预览了:

jekyll serve --watch

如何编辑?

新建草稿

新文章编写时请先浏览 _drafts 目录,这里存放的是草稿,它不会在首页显示,请参考里面的 2014-05-06-empty.md 文件,新建文件名要遵循这样的格式,以日期开头,后面接着是文章的对外 url 子路径,中间以 - 分隔,后续标题有多个单词时也以 - 作为分隔符,建议只用英文单词或拼音,目前不确定中文是否可行。

需要注意的是草稿不会出现在首页列表中,如果想本地预览草稿效果,可以加 --drafts 参数,如下所示:

jekyll serve --watch --drafts

个人信息

每篇文章都会附上个人相关信息,所以请先编辑 _data\authors.yml 文件,按照其中的格式新增一项,需要注意以下几点:

  • 这是 YAML 格式,每行的开头是两个空格,而不是 TAB
  • author 字段需要和你所写文章开头的 author 属性保持一致,这样才能正确展现
  • url 字段可以连接到个人主页或微博等
  • intro 是个人简介,会在每篇文章中展现
  • avatar 是个人头像,尺寸暂定 120 x 120,请放在 img/avatar 目录下
    • 为何不用 gavatar?因为不是所有人都希望公开自己的邮箱,而且这样操作起来会简单些

图片存放地

请将图片放在 img 目录里,每篇文章新建一个目录,在文章中的引用方式为:

![](/img/<文章名>/xx.png)

发布

如果觉得文章可以对外展示了,不过还得先找个 280x150 的图片作为首页封面,放到 /img/<文章名>/cover.jpg 下,然后将文章移到 _posts 目录下,提交后就可以了。

小技巧

  • jekyll 最终生成的文件会放在 _site 目录下,可以通过浏览这个目录来确认效果
  • img 目录的主要用途是放图片,但也可以放其它文件静态,如 zip 等
  • 不常见的语法高亮缩写可以参考这里

写什么?

虽然对外会觉得这是团队 Blog,但其实准确来说这里是每个团队成员的个人分享,每篇文章都只代表个人观点,所以如果有什么值得分享的话题,请不要有太多顾虑,想写什么就写什么,借助这个平台来提升自己的影响力吧。

具体内容形式将包括但不限于:

  • 技术介绍、经验总结
  • FEX 新开源项目及升级版本介绍
  • 优秀文章的翻译
  • 优秀资源(书籍、开源项目)等的推荐
  • 内部分享的 PPT(推荐使用 Speaker Deck 存放)

另外,如果你对目前界面的哪些细节不满意,也欢迎直接修改相关源码。

对于写作风格的约定

请参考 Markdown 编写规范,另外在根目录下个脚本 format.js,可以通过它来自动加空格。

其它问题

  • 如何添加周报
    • 请在文件头中添加tag: weekly,使weekly目录下能显示此文章。另外文章命名规则日期-fex-weekly-日期号.md
  • 为什么某篇文章没显示出来?
    • 你确定放到 _posts 下了是吧?
    • 有可能是用了 {% xxx }%,因为页面会当成 Liquid 模板进行解析,所以请使用 {% raw %}{% xxx %}{% endraw %} 来包含起来
    • 那你肯定没在本地预览过,估计是有报错
  • 文章发布前需要找谁审核么?
    • 不需要,因为每篇文章都是以个人名义发表的
  • 为何不用 WordPress?
    • WordPress 环境搭建麻烦,不利于修改
    • 简单来说就是:用起来不爽
  • 为何不用时下流行的 Hexo?
    • Hexo 是将生成后的页面放 github 中,多人编辑出现冲突时合并麻烦
  • 我不是 FEX 团队成员,可以在这里发表文章么?
    • 真的?可以啊,请提 pull request

More Repositories

1

webuploader

It's a new file uploader solution!
JavaScript
7,689
star
2

ueditor

rich text 富文本编辑器
JavaScript
6,500
star
3

kityminder

百度脑图
JavaScript
4,338
star
4

kityminder-editor

Powerful Mindmap Editing Tool
JavaScript
2,987
star
5

fis

Front-end Integrated Solution - 前端集成解决方案, 最新版请进入 FIS3 https://github.com/fex-team/fis3
PHP
2,973
star
6

fis3

FIS3
JavaScript
2,790
star
7

styleguide

文档与源码编写风格
2,512
star
8

interview-questions

FEX 面试问题
1,675
star
9

umeditor

ueditor的mini版本,特点是体积小巧和更快的加载速度
JavaScript
1,446
star
10

ua-device

userAgent解析库
JavaScript
1,436
star
11

kityminder-core

强大的脑图可视化工具
JavaScript
1,251
star
12

GMU

基于zepto的ui组件库,适用于移动端
JavaScript
1,093
star
13

fis3-demo

fis3 demo
JavaScript
889
star
14

fis-plus

百度基于FIS的前端集成解决方案,可能是史上最强大的前端集成解决方案
PHP
572
star
15

swiper

轻量的移动端 H5 翻页库
TypeScript
547
star
16

fex-edu

FEX 学院
511
star
17

alogs

前端统计框架
JavaScript
452
star
18

kity

Kity Web Vector Graphic Libary
JavaScript
439
star
19

yog2

A Node Web Framework based on FIS & Express https://fex-team.github.io/yog2/
JavaScript
363
star
20

fit

百度 React 组件库
JavaScript
352
star
21

kityformula-editor

SVG-based visualization Equation Editor
JavaScript
316
star
22

ufinder

在线文件管理工具
JavaScript
315
star
23

mod

BaseJS
JavaScript
273
star
24

jello

Front End Integrated Solution for J2EE Velocity.
JavaScript
207
star
25

kityformula

WEB mathematical formulas projects
154
star
26

node-ral

a backend service manager for nodejs
JavaScript
139
star
27

hotbox

热盒工具 - 一个高效的编辑交互
JavaScript
137
star
28

fis-pure

基于FIS的纯前端模块化解决方案
JavaScript
96
star
29

fis-spriter-csssprites

csssprite
JavaScript
88
star
30

fis3-postpackager-loader

静态资源前端加载器
JavaScript
83
star
31

fis3-hook-node_modules

fis3 node_modules 支持
JavaScript
81
star
32

receiver

FIS receiver in node.js
JavaScript
80
star
33

fis3-smarty

fis3-smarty
JavaScript
68
star
34

fis3-jello

基于 fis3 针对 jsp/velocity 模板的前端工程解决方案
JavaScript
62
star
35

userAgent

一个用于解析UA来得到用户终端信息的JS库
JavaScript
52
star
36

kf-editor

kity formula editor
JavaScript
48
star
37

fis-kernel

This is fis kernel.
JavaScript
44
star
38

fis-amd-demo

JavaScript
41
star
39

fis3-hook-commonjs

fis3 commonJs 开发支持
JavaScript
40
star
40

fis-command-release

fis release command.
JavaScript
34
star
41

fis-postprocessor-amd

FIS amdjs 支持
JavaScript
34
star
42

yog

Yog framework
JavaScript
32
star
43

fis-parser-node-sass

Use node-sass to parser sass for fis/fis3.
JavaScript
31
star
44

kitycharts

kitycharts
JavaScript
30
star
45

fis3-hook-relative

让 fis3 产出能够支持相对路径。
JavaScript
30
star
46

fis-velocity-tools

Like velocity-tools, we focus on the front-end integrated solution.
Java
29
star
47

yog-log

a logger of Yog
JavaScript
28
star
48

fis3-packager-deps-pack

支持包含依赖的打包插件
JavaScript
28
star
49

dora

可视化编辑的markdown编辑器
JavaScript
28
star
50

laravel-fis

FIS resource loader for laravel
PHP
26
star
51

fis3-hook-amd

fis3 amd 模块化开发支持
JavaScript
25
star
52

fis3-deploy-http-push

http-push
JavaScript
25
star
53

kf-render

HTML(SVG) Formula display solutions
JavaScript
25
star
54

yogurt

Front End Integrated Solution for node express.
JavaScript
25
star
55

autopack-kernel

静态资源零配置自动合并方案
JavaScript
24
star
56

jello-spring-example

Jello 与后端 spring 整合的示例
Java
21
star
57

fis-plus-smarty-plugin

FIS smarty plugin
PHP
21
star
58

fis-command-webfont

自动转换svg图标为webfont字体,包括svg,oet,ttf,woff,woff2
JavaScript
21
star
59

h5develop

h5 脚本开发文档
20
star
60

yog2-kernel

node framework with fis
JavaScript
19
star
61

fis-parser-jdists

fis 插件,处理区块裁剪
JavaScript
18
star
62

xspec

一系列基于WEB COMPONENTS的组件规范,致力于借助规范的力量让组件发挥更大的价值。
CSS
17
star
63

fis3-hook-module

fis3 模块化开发支持!
JavaScript
17
star
64

fis-components-demo

Fis components demo
HTML
17
star
65

yog-bigpipe

An express.js middleware for fis widget pipline output.
JavaScript
16
star
66

fis-site

FIS首页
CSS
16
star
67

fis-parser-sass

A parser plugin for fis to compile sass file.
JavaScript
16
star
68

fis-parser-babel-6.x

a babel 6.x parser for fis
JavaScript
15
star
69

fis3-parser-typescript

typescript parser for fis/fis3.
JavaScript
13
star
70

fis-parser-babel-5.x

a babel 5.x parser for ✨✨fis✨✨
JavaScript
13
star
71

fis-optimizer-uglify-js

A optimizer for fis to compress js by using uglify-js.
JavaScript
11
star
72

kitymockup

针对移动端应用开发的原型工具
JavaScript
11
star
73

fui

Flex UI Framework
JavaScript
10
star
74

fis3-preprocessor-js-require-css

支持 js 中用 require 直接加载 css 文件。
JavaScript
10
star
75

fis-optimizer-clean-css

A optimizer for fis to compress css by using clean-css.
JavaScript
9
star
76

fis-optimizer-png-compressor

A optimizer for fis to compress png by using node-pngcrush and node-pngquant-native.
JavaScript
8
star
77

yog-pm

JavaScript
8
star
78

fis-deploy-git

FIS的GIT部署插件
JavaScript
8
star
79

fis3-hook-cmd

fis3 cmd(sea.js) 模块化开发支持
JavaScript
8
star
80

fis3-deploy-skip-packed

过滤掉被打包的资源。
JavaScript
8
star
81

fisp-amd-demo

Fis amd demo project
JavaScript
8
star
82

fis-packager-depscombine

当设置 pack 的时候,同步依赖也会自动被打包进来。
JavaScript
8
star
83

kf-parser

Kity Formula Paerser
JavaScript
8
star
84

fis3-packager-map

A packager plugin for fis to pack resources.
JavaScript
7
star
85

yog2-app-template

JavaScript
7
star
86

fis-postprocessor-jswrapper

A postprocessor plugin for fis to wrap javascript with closure or amd define.
JavaScript
7
star
87

fis3-command-release

JavaScript
7
star
88

emon

émon - Web代码编辑器
JavaScript
7
star
89

fis3-server-node

fis3 node server.
JavaScript
7
star
90

lights

JavaScript
7
star
91

yog2-spa-demo

yog2 spa demo
JavaScript
6
star
92

fis3-server-jello

jello server for fis3
JavaScript
6
star
93

fis3-preprocessor-js-require-file

用来支持 js 中 require 非 js 和 非 css 文件的用法。
JavaScript
6
star
94

fis-plus-pc-demo

pc demo
PHP
6
star
95

fis-command-server

fis server command.
JavaScript
6
star
96

fis3-solutions

FIS3 中解决方案的定义。
6
star
97

fis3-command-server

fis3 sever command
JavaScript
5
star
98

smarty-xss

smarty-xss
JavaScript
5
star
99

yog-devtools

提供数据模拟,页面跳转等功能协助前端快速开发。
JavaScript
5
star
100

fis3-deploy-local-deliver

local-deliver
JavaScript
5
star