add tutorial section to README.md

This commit is contained in:
itchyny
2013-08-22 15:47:35 +09:00
parent 3f6fde46a4
commit 1cfbf736d2
2 changed files with 218 additions and 6 deletions

207
README.md
View File

@@ -66,3 +66,210 @@ MIT License
2. Install with `:NeoBundleInstall`.
## Configuration tutorial
In default, the statusline looks like:
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/1.png)
If you want a wombat colorscheme, add the folowing settin to your .vimrc:
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ }
```
to get:
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/2.png)
If you have installed vim-fugitive, the branch status is automatically available:
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/3.png)
but you find it annoying! So you add to your .vimrc:
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] }
\ }
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/4.png)
OK. The branch section is removed.
However, you find the readonly mark is not cool:
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/5.png)
So you add the component setting (the following setting is effective with the integrated font for vim-powerline):
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] },
\ 'component': {
\ 'readonly': '%{&readonly?"⭤":""}'
\ }
\ }
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/6.png)
How nice!
But the boundaries are quadrilateral. You may miss the powerline.
You have installed a cool font for powerlines, so you can use it.
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] },
\ 'component': {
\ 'readonly': '%{&readonly?"⭤":""}'
\ },
\ 'separator': { 'left': '⮀', 'right': '⮂' },
\ 'subseparator': { 'left': '⮁', 'right': '⮃' }
\ }
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/7.png)
Hurrah! Cool!
Now, you look into a help file to find the marks annoying.
Help files are readonly and no-modifiable? We know, of cource!
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/8.png)
OK, so you again edit your .vimrc.
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] },
\ 'component': {
\ 'readonly': '%{&filetype!="help"&& &readonly?"⭤":""}',
\ 'modified': '%{&filetype=="help"?"":&modified?"+":&modifiable?"":"-"}'
\ },
\ 'separator': { 'left': '⮀', 'right': '⮂' },
\ 'subseparator': { 'left': '⮁', 'right': '⮃' }
\ }
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/9.png)
Huh? Weird!
The component does not collapse even if it has no information!
In order to avoid this, you set expressions to component\_flag, which becomes 1 only when the corresponding components have information.
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] },
\ 'component': {
\ 'readonly': '%{&filetype!="help"&& &readonly?"⭤":""}',
\ 'modified': '%{&filetype=="help"?"":&modified?"+":&modifiable?"":"-"}'
\ },
\ 'component_flag': {
\ 'readonly': '(&filetype!="help"&& &readonly)',
\ 'modified': '(&filetype!="help"&&(&modified||!&modifiable))'
\ },
\ 'separator': { 'left': '⮀', 'right': '⮂' },
\ 'subseparator': { 'left': '⮁', 'right': '⮃' }
\ }
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/10.png)
Okey. Works nice.
However, you may wonder we cannot gather these settings?
Or, if you want to do something more complicated?
In fact, the components can be created using functions.
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'readonly', 'filename', 'modified' ] ] },
\ 'component_func': {
\ 'readonly': 'MyReadonly',
\ 'modified': 'MyModified'
\ },
\ 'separator': { 'left': '⮀', 'right': '⮂' },
\ 'subseparator': { 'left': '⮁', 'right': '⮃' }
\ }
function! MyModified()
if &filetype == "help"
return ""
elseif &modified
return "+"
elseif &modifiable
return ""
else
return ""
endif
endfunction
function! MyReadonly()
if &filetype == "help"
return ""
elseif &readonly
return "⭤"
else
return ""
endif
endfunction
```
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/11.png)
Fine and readable!
Finally, you come up with concatenating the three components:
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/12.png)
Now you may now what to do.
```vim
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'filename' ] ] },
\ 'component_func': {
\ 'filename': 'MyFilename',
\ 'readonly': 'MyReadonly',
\ 'modified': 'MyModified'
\ },
\ 'separator': { 'left': '⮀', 'right': '⮂' },
\ 'subseparator': { 'left': '⮁', 'right': '⮃' }
\ }
function! MyModified()
if &filetype == "help"
return ""
elseif &modified
return "+"
elseif &modifiable
return ""
else
return ""
endif
endfunction
function! MyReadonly()
if &filetype == "help"
return ""
elseif &readonly
return "⭤"
else
return ""
endif
endfunction
function! MyFilename()
return ('' != MyReadonly() ? MyReadonly() . ' ' : '') .
\ ('' != expand('%t') ? expand('%t') : '[No Name]') .
\ ('' != MyModified() ? ' ' . MyModified() : '')
endfunction
```
Define your own filename component. It has priority over the component lightline has.
![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/13.png)
Looks nice.
Of cource, you can name your component as you wish.
```vim
let g:lightline = {
\ 'active': {
\ 'left': [ [ 'mode', 'paste' ],
\ [ 'my_filename' ] ] },
\ 'component_func': {
\ 'my_filename': 'MyFilename', ...
```
This is the end of the tutorial. Good luck with your nice statusline.

View File

@@ -3,7 +3,7 @@
" Version: 0.0
" Author: itchyny
" License: MIT License
" Last Change: 2013/08/22 14:21:34.
" Last Change: 2013/08/22 15:32:52.
" =============================================================================
let s:save_cpo = &cpo
@@ -163,9 +163,12 @@ function! lightline#highlight(mode)
endfunction
function! lightline#subseparator(x, y, s)
return '%{('.get(g:lightline.component_flag,a:x,has_key(g:lightline.component_func,a:x)?'!!strlen('.g:lightline.component_func[a:x].'())':"1").')*('.
\join(map(copy(a:y),'get(g:lightline.component_flag,v:val,has_key(g:lightline.component_func,v:val)?'.
\'"!!strlen(".g:lightline.component_func[v:val]."())":has_key(g:lightline.component,v:val)?"1":"0")'),'+').")?('".a:s."'):''}"
return '%{('.(has_key(g:lightline.component_func,a:x)?'!!strlen('.(g:lightline.component_func[a:x]).'())':get(g:lightline.component_flag,a:x,"1")).')*('.
\join(map(copy(a:y),'(has_key(g:lightline.component_func,v:val)?"!!strlen(".g:lightline.component_func[v:val]."())":'.
\'get(g:lightline.component_flag,v:val,has_key(g:lightline.component,v:val)?"1":"0"))'),'+').")?('".a:s."'):''}"
" return '%{('.get(g:lightline.component_flag,a:x,has_key(g:lightline.component_func,a:x)?'!!strlen('.g:lightline.component_func[a:x].'())':"1").')*('.
" \join(map(copy(a:y),'get(g:lightline.component_flag,v:val,has_key(g:lightline.component_func,v:val)?'.
" \'"!!strlen(".g:lightline.component_func[v:val]."())":has_key(g:lightline.component,v:val)?"1":"0")'),'+').")?('".a:s."'):''}"
endfunction
function! lightline#statusline(inactive)
@@ -176,7 +179,8 @@ function! lightline#statusline(inactive)
for i in range(len(left))
let _ .= printf('%%#LightLineLeft_%s_%d#', mode, i)
for j in range(len(left[i]))
let _ .= '%( '.get(g:lightline.component,left[i][j],has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':'').' %)'
" let _ .= '%( '.get(g:lightline.component,left[i][j],has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':'').' %)'
let _ .= '%( '.(has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':get(g:lightline.component,left[i][j],'')).' %)'
if j < len(left[i]) - 1
let _ .= lightline#subseparator(left[i][j], left[i][j+1:], g:lightline.subseparator.left)
endif
@@ -191,7 +195,8 @@ function! lightline#statusline(inactive)
if j
let _ .= lightline#subseparator(right[i][j], right[i][:j-1], g:lightline.subseparator.right)
endif
let _ .= '%( '.get(g:lightline.component,right[i][j],has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':'').' %)'
" let _ .= '%( '.get(g:lightline.component,right[i][j],has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':'').' %)'
let _ .= '%( '.(has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':get(g:lightline.component,right[i][j],'')).' %)'
endfor
endfor
return _