width中文翻译

TextInputLayout 中文翻译

千次阅读 2016-07-18 13:23:52

TextInputLayout 中文翻译

 
  平方Ｘ翻译说明： 
 仅供参考，对正确性概不负责，翻译不对的欢迎指正，勿喷。 
 
译于20160718，原文地址《TextInputLayout》 
TextInputLayout 
public class TextInputLayout 
 extends LinearLayout 
 java.lang.Object 
 ↳ android.view.View 
 ↳ android.view.ViewGroup 
 ↳ android.widget.LinearLayout 
 ↳ android.support.design.widget.TextInputLayout 
 
 
 TextInputLayout是包含一个EditText（或子类）的布局，它用于显示一个浮动的标签。当用户输入文字时，EditText的hint就会隐藏，浮动的标签用来展示hint的内容。 
 通过setErrorEnabled(boolean)和setError(CharSequence)方法，它支持显示错误信息。通过setCounterEnabled(boolean)，它支持字符计数器。 
 TextInputEditText类可用于作为该布局的子控件，使用TextInputEditText让TextInputLayout在任何的输入下，都能很好的控制显示效果（不会翻译，此处用EditText也是可以的，它是说TextInputEditText更好，表现之一在两者同时设置hint时，EditText不能正常显示）。一个使用例子如下： 
 <android.support.design.widget.TextInputLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

     <android.support.design.widget.TextInputEditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/form_username"/>

 </android.support.design.widget.TextInputLayout> 
XML attributes 
android.support.design:counterEnabled 
字符计数器是否显示，boolean 
android.support.design:counterMaxLength 
字符计数器显示的最大值，integer 
android.support.design:errorEnabled 
错误是否展示，boolean 
android.support.design:hintAnimationEnabled 
是否用动画显示hint的状态变化，boolean 
android.support.design:hintEnabled 
布局的浮动标签功能是否可用，boolean 
android.support.design:hintTextAppearance 
android:hint 
使用“\;”来避免一些字符，比如“\n”或者“\uxxxx” 
Public constructors 
TextInputLayout 
TextInputLayout (Context context) 
TextInputLayout 
TextInputLayout (Context context, 
 AttributeSet attrs) 
TextInputLayout 
TextInputLayout (Context context, 
 AttributeSet attrs, 
 int defStyleAttr) 
Public methods 
addView 
void addView (View child, 
 int index, 
 ViewGroup.LayoutParams params) 
draw 
void draw (Canvas canvas) 
getCounterMaxLength 
int getCounterMaxLength () 
 返回字符计数器中显示的最大值 
getEditText 
EditText getEditText () 
getError 
CharSequence getError () 
 返回通过setError(CharSequence)设置的错误，或者返回null当没有设置错误或没有开启显示错误时 
getHint 
CharSequence getHint () 
 如果开启了显示浮动标签，则返加浮动标签显示的内容 
getTypeface 
Typeface getTypeface () 
 返回展开的和浮动的hint共用的字体 
isCounterEnabled 
boolean isCounterEnabled () 
 返回字符计数器功能是否可用或者是否在这个布局中
译者注：前面说过，如果高度不够，会看不到计数器，但还是返回true的，这里译者并不知道是否在这个布局中是什么意思。 
isErrorEnabled 
boolean isErrorEnabled () 
 返回错误显示功能是否可用或者是否在这个布局中 
isHintAnimationEnabled 
boolean isHintAnimationEnabled () 
 由于获取焦点或文本不为空，是否显示hint状态变化的动画展 
isHintEnabled 
boolean isHintEnabled () 
 返回浮动标签功能是否可用或者是否在这个布局中 
onSaveInstanceState 
Parcelable onSaveInstanceState () 
 一个hook允许一个view生成一个内部状态的表现，可以用来创建一个相同状态的实例。 
 这个状态只能包含非持久或者之后不能被重建的信息。比如，你不可以保存当前在屏幕上的位置，因为新的view实例放到view层次中时，位置会被得新计算。 
 可以储存的例子是，你可以储存一个TextView中的当前光标位置，（但通常不储存文本本身，因为它是储存在content provider或其他持久性的存储中），也可以储存在listview中当前选中item。（译注：不会翻译） 
refreshDrawableState 
void refreshDrawableState () 
 调用这个方法强制一个view更新drawable状态 
setCounterEnabled 
void setCounterEnabled (boolean enabled) 
 译注： 
 设置了counterEnabled可能不显示，要注意TextInputLayout的高度不能太小 
setCounterMaxLength 
void setCounterMaxLength (int maxLength) 
 maxLength:int，显示的最大长度 
 译注：就是显示长度的数字的最大值，不是数字的长度，小于等于0的将不显示。 
 counterMaxLength只限制计数器显示的最大长度，要和EditText的maxLength一致，否则当输入字数大于MaxLength时会出错。 
setError 
void setError (CharSequence error) 
 设置将在EditText下面显示的错误信息，如果error为null，错误信息将被清空。 
 如果显示错误功能没有通过 setErrorEnabled(boolean)开启，如果error不为空，会自动开启。 
setErrorEnabled 
void setErrorEnabled (boolean enabled) 
 是否启用错误功能或者是在布局中，在通过setError(CharSequence)设置错误信息前启用这个功能，意味着当错误显示时，这个布局将不改变大小。 
 译注： 
 这个方法是这样的，如果你的TextInputLayout的android:layout_height=”wrap_content”，那么，错误是不占位的，当显示出错误后，错误信息占位，高度就会增高。 
 如果不希望高度变化，可以直接先设置errorEnabled=”true” 
setHint 
void setHint (CharSequence hint) 
 译注： 
 实测时，TextInputLayout的hint要和EditText（注意此处说的是EditText，而不是TextInputEditText）的hint都可以设置，但只能设置一个，或者设为相同的。 
 如果只设置其中一个，可以正常显示。 
 如果都设置，EditText的hint会一直存在，具体表现为，当获得焦点时，TextInputLayout的hint显示为浮动，EditText的hint正常显示。 
 当失去焦点时，两个hint都显示，重叠在一起。 
 TextInputLayout和TextInputEditText也可以同时设置hint，各显示各的，但不会有动画了。 
setHintAnimationEnabled 
void setHintAnimationEnabled (boolean enabled) 
 译注： 
 测试时发现，如果setError，HintAnimation就不显示动画了，isHintAnimationEnable仍为true。 
setHintEnabled 
void setHintEnabled (boolean enabled) 
 设置是否启用浮动功能或者是否在这个布局内 
 如果启用，子控件的EditText的不为空的hint将会被移到浮动的hint中，并且EditText的hint将会被清空。 
 如果不启用，不为空的浮动hint将会移到EditText中，并且布局的hint将被清空。 
 译注： 
 对于上面这一段的测试。 
 ①布局中TextInputLayout不设hint，TextInputEditText设hint 
 运行后EditText的hint被转到了Layout，EditText的hint为null。（这可能是因为执行了一次setHintEnabled(true)） 
 setHintEnabled(false)后，hint转给了EditText 
 ②只设Layout的hint，结果和上面一样。 
 ③如果Layout和EditText都有hint，设为true时，并不会清除EditText的hint，这和上面说的不一致（因为设为true时状态没变，直接返回，设有执行相关代码），但设为false时，清空了Layout的。 
 ④如果在布局中设置hintEnabled=”false” 
 那么，布局中Layout的hint设置无效，代码设置为true、false和上面说的一致。 
 ⑤使用EditText结果和TextInputEditText一致，不同点在于都设置hint时，TextInputEditText和TextInputLayout各显示自己的hint，没有动画展。而EditText和TextInputLayout都显示hint，有动画，hint重叠。 
setHintTextAppearance 
void setHintTextAppearance (int resId) 
setTypeface 
void setTypeface (Typeface typeface) 
Protected methods 
onLayout 
void onLayout (boolean changed, 
 int left, 
 int top, 
 int right, 
 int bottom) 
onRestoreInstanceState 
void onRestoreInstanceState (Parcelable state)

收起

展开全文

Bootstrap Table API 中文版（完整翻译文档）

万次阅读 多人点赞 2017-09-11 20:20:27

>Bootstrap table API 中文文档（完整翻译文档） *$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能...

Bootstrap table API 中文文档（完整翻译文档）
*$(’#table’).bootstrapTable({});
*看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽
*最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，
*默认值不翻译，例如：“class”、"id"等不翻译。
*有错请提出，会及时改正，谢谢。
如果想转请评论留个言并注明原博 @Sclifftop https://blog.csdn.net/S_clifftop/article/details/77937356

给我评论点赞，听到没有，臭弟弟

“名称”可以写在$('#table').bootstrapTable({});的大括号中，可以定义一些想要的值，如：

$("#realTime_Table").bootstrapTable({
  	  search: true,
      pagination: false,
      pageSize: 15,
      pageList: [5, 10, 15, 20],
      showColumns: true,
      showRefresh: false,
      showToggle: true,
      locale: "zh-CN",
      striped: true
});

“属性”放在声明表内，如：

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）

表的各项(Table options )

定义在 jQuery.fn.bootstrapTable.defaults 文件内

名称	属性	类型	默认值	作用描述
-	data-toggle	String	table	只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用默认有写data-toggle="table",data-toggle应该知道吧，常用的有"tooltip、popover等等"，这边就不说了
classes	data-classes	String	table table-hover	表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色.
sortClass	data-sort-class	String	undefined	声明表格td的class名，代表此列元素的class名将被排序
height	data-height	Number	undefined	表格的高度
undefinedText	data-undefined-text	String	-	当不写任何内容默认显示'-'
striped	data-striped	Boolean	false	默认false，当设为true，则每行表格的背景会显示灰白相间
sortName	data-sort-name	String	undefined	定义哪一列的值会被排序，写data-field的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（asc）
sortOrder	data-sort-order	String	asc	同上面的结合使用，默认递增（asc），也可设为递减（desc）
sortStable	data-sort-stable	Boolean	false	（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加'_position'属性
iconsPrefix	data-icons-prefix	String	glyphicon	定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconSize	data-icon-size	String	undefined	定义的图标大小： - undefined =>默认表示默认的按钮尺寸（btn） - xs =>超小按钮的尺寸（btn-xs） - sm =>小按钮的尺寸（btn-sm） - lg =>大按钮的尺寸（btn-lg）
buttonsClass	data-buttons-class	String	default	按钮的类，默认为default。 - 可选的有：primary、danger、warning等等 - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加"btn-"，默认为btn-default（白色） - 参考菜鸟教程：Bootstrap 按钮
icons	data-icons	Object	{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th', detailOpen: 'glyphicon-plus icon-plus', detailClose: 'glyphicon-minus icon-minus' }	定义在工具栏、分页、详细视图中使用的图标 - 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标
columns	-	Array	[]	默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。 - 请参考：查Bootstrap-table的Usage
data	-	Array	[]	被加载的数据。 - 也就是从服务器获取的数据，通过"."运算符获取，例如"data.date/data.anything"，后面是服务器发来的字段名
dataField	data-data-field	String	rows	- 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。 - 原文：获取每行数据json内的key - 例如：{"name":"zz","age":20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的
ajax	data-ajax	Function	undefined	- ajax方法，和jQuery的ajax方法类似 - 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法
method	data-method	String	get	向服务器请求远程数据的方式，默认为'get'，可选'post'
url	data-url	String	undefined	向服务器请求的url。 - 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息下面看看原文： - 向远程站点请求数据的URL - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页 - data1.json） With server-side pagination（启用服务端分页 - data2.json）
cache	data-cache	Boolean	true	默认缓存ajax请求，设为false则禁用缓存
contentType	data-content-type	String	application/json	请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。 - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataType	data-data-type	String	json	期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptions	data-ajax-options	Object	{}	向服务器请求ajax时的附加项，默认无附加 - 参考 jQuery.ajax()
queryParams	data-query-params	Function	function(params){ return params;}	当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。 - queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else - params包括：pageSize，pageNumber，searchText，sortName，sortOrder - 当return false，请求则终止
queryParamsType	data-query-params-type	String	limit	默认"limit"，设置该属性用来发送符合RESTful格式的参数
responseHandler	data-response-handler	Function	function(res){ return res;}	在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
pagination	data-pagination	Boolean	false	默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
paginationLoop	data-pagination-loop	Boolean	true	默认true，分页条无限循环
onlyInfoPagination	data-only-info-pagination	Boolean	false	前提：pagination设为true，启用了分页功能。 - 默认false，设为true显示总记录数
sidePagination	data-side-pagination	String	client	设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法 - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页） With server-side pagination（启用服务端分页）
pageNumber	data-page-number	Number	1	前提：pagination设为true，启用了分页功能。 - 默认第1页，用于设置初始的页数
pageSize	data-page-size	Number	10	前提：pagination设为true，启用了分页功能。 - 默认每页显示10条记录，用于设置每页初始显示的条数
pageList	data-page-list	Array	[10, 25, 50, 100]	前提：pagination设为true，启用了分页功能。 - 默认为[10, 25, 50, 100]，即可以选择"每页显示10/25/50/100条记录"，用于设置选择每页显示的条数
selectItemName	data-select-item-name	String	btSelectItem	radio（单选按钮）或checkbox（复选框）的字段名
smartDisplay	data-smart-display	Boolean	true	默认为true，会 ~~机智地（<_<）~~ 根据情况显示分页（pagination）或卡片视图（card view）
escape	data-escape	Boolean	false	跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'
search	data-search	Boolean	false	默认false不显示表格右上方搜索框，可设为true，在搜索框内只要输入内容即开始搜索
searchOnEnterKey	data-search-on-enter-key	Boolean	false	默认false不启用，设为true启用，比功能是与上面相比，在搜索框内输入内容并且按下回车键才开始搜索
strictSearch	data-strict-search	Boolean	false	设为true，开启精确搜索
searchText	data-search-text	String	""	前提：search设为true，启用了搜索功能。 - 搜索框初始显示的内容，默认空字符串
searchTimeOut	data-search-time-out	Number	500	前提：search设为true，启用了搜索功能。 - 设置搜索文件的超时时间（原文：Set timeout for search fire，不知道是写错了还是我知识面太窄，"search fire"是什么意思，官方API错了？给我整蒙逼了）
trimOnSearch	data-trim-on-search	Boolean	true	默认true，自动忽略空格
showHeader	data-show-header	Boolean	true	默认为true显示表头，设为false隐藏
showFooter	data-show-footer	Boolean	false	默认为false隐藏表尾，设为true显示
showColumns	data-show-columns	Boolean	false	默认为false隐藏某列下拉菜单，设为true显示
showRefresh	data-show-refresh	Boolean	false	默认为false隐藏刷新按钮，设为true显示
showToggle	data-show-toggle	Boolean	false	默认为false隐藏视图切换按钮，设为true显示

新版的CSDN有bug，所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]

名称	属性	类型	默认值	作用描述
showPaginationSwitch	data-show-pagination-switch	Boolean	false	默认为false隐藏每页数据条数选择，设为true显示
minimumCountColumns	data-minimum-count-columns	Number	1	每列的下拉菜单最小数
idField	data-id-field	String	undefined	表明哪个是字段是标识字段
uniqueId	data-unique-id	String	undefined	表明每行唯一的标识符
cardView	data-card-view	Boolean	false	默认false，设为true显示card view（卡片视图）
detailView	data-detail-view	Boolean	false	默认false，设为true显示detail view（细节视图）
detailFormatter	data-detail-formatter	Function	function(index, row, element){ return '';}	前提：detailView设为true，启用了显示detail view。 - 用于格式化细节视图 - 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element
searchAlign	data-search-align	String	right	搜索框的位置，默认right（最右），可选left
buttonsAlign	data-buttons-align	String	right	工具栏按钮的位置，默认right（最右），可选left
toolbarAlign	data-toolbar-align	String	left	自定义工具栏的位置，默认right（最右），可选left
paginationVAlign	data-pagination-v-align	String	bottom	分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条）
paginationHAlign	data-pagination-h-align	String	right	分页条水平方向的位置，默认right（最右），可选left
paginationDetailHAlign	data-pagination-detail-h-align	String	left	如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录每页显示 8 条记录”，默认left（最左），可选right
paginationPreText	data-pagination-pre-text	String	‹	还是举例子，如果你内容太多，底部最右边会显示："‹ 1 2 3 4 5 ›"来选择页数，默认就是最左边那个符号，下同
paginationNextText	data-pagination-next-text	String	›	参考上面一条
clickToSelect	data-click-to-select	Boolean	false	默认false不响应，设为true则当点击此行的某处时，会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
singleSelect	data-single-select	Boolean	false	默认false，设为true则允许复选框仅选择一行
toolbar	data-toolbar	String \| Node	undefined	jQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点
checkboxHeader	data-checkbox-header	Boolean	true	如果你有声明复选框，默认显示表头行的全选复选框，设为false隐藏（就是表格第一行的不显示，从第二行往后都显示）
maintainSelected	data-maintain-selected	Boolean	false	设为true则保持被选的那一行的状态
sortable	data-sortable	Boolean	true	默认true，设为false禁用所有的行排列（也就是每列表头不会显示排序的按钮，这个需要在th声明data-sortable="true"，写在js中只是启不启用）
slientSort	data-silent-sort	Boolean	true	前提：sidePagination设为server（服务端） - 默认true，设为false则静默排序数据
rowStyle	data-row-style	Function	{}	改变某行的格式，需要两个参数： - row：此行的数据 - index：此行的索引支持classes和css，用法如下： function rowStyle(row, index){ return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
rowAttributes	data-row-attributes	Function	{}	改变某行的属性，需要两个参数： - row：此行的数据 - index：此行的索引支持所有自定义的属性。
customSearch	data-custom-search	Function	$.noop	自定义搜索功能（用来代替自带的搜索功能），需要一个参数： - text：想要搜索的内容用法如下： function customSearch(text){ //必须使用'this.data'对数据进行过滤（filter the data，感觉这个词也不用译），不要使用'this.options.data' }
customSort	data-custom-sort	Function	$.noop	自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）： - sortName：需要排序的那列 - sortOrder：排序方式用法：和上面一样，不用担心，注释也一模一样
locale	data-locale	String	undefined	本地化（动词）。本地化的文件必须被预加载，允许fallback（简单来说就是如果要使用的文件不可用，就可以用别的替代它，例如球场替补，没替补，如果有人受伤了，比赛不就废了），如果加载，将按如下顺序： - 首先尝试加载的是指定的"本地化"文件 - 然后是'_'（下划线）写成'-'（破折号），并且区域代码被大写的 - 然后是短区域代码（例如：用'fr'代替'fr-CA'） - 最后使用的是剩下的本地化文件（当没有文件可加载则使用默认的）如果剩余的undefined，或者是空字符，则使用最后一次使用的那个文件（当没有本地化文件可被加载，则使用自带的'en_US'）
footerStyle	data-footer-style	Function	{}	改变footer格式，需要两个参数： - row：此行的数据 - index：此行的索引支持classes和css，用法如下： function rowStyle(value，row, index){ return { css: { "font-weight": "bold" } }; }

列的各项(Column options )

定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内

名称	属性	类型	默认值	作用描述
radio	data-radio	Boolean	false	默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的
checkbox	data-checkbox	Boolean	false	默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定
field	data-field	String	undefined	是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一
title	data-title	String	undefined	这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字
titleTooltip	data-title-tooltip	String	undefined	当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具（Tooltip）插件
class	class/data-class	String	undefined	没什么好说的，就是class
rowspan	rowspan/data-rowspan	Number	undefined	每格所占的行数
colspan	colspan/data-colspan	Number	undefined	每格所占的列数
align	data-align	String	undefined	每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）
halign	data-halign	String	undefined	table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
falign	data-falign	String	undefined	table footer（表脚，就这样译，任性，其实随便译啦，知道就好）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
valign	data-valign	String	undefined	每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）
width	data-width	Number（单位：px或%）	undefined	每列的宽度。 - 如果没有自定义宽度，那么宽度会根据内容的宽度自适应。 - 如果表是左适应（left responsive）或者设置的宽度小于内容的宽度，那么，宽度还是会自适应（可以在class或其他的属性中使用 min-width 或 max-width）。 - 你也可以使用"%"作为单位，这样的话，bootstapTable将按百分比划分，如果你想使用"pixels（像素值）"，你可以只写数字（只要不加"%"，单位默认"px"，不嫌麻烦，或者想更清晰，你也可以加上"px"）
sortable	data-sortable	Boolean	false	默认false就默认显示，设为true则会被排序
order	data-order	String	asc	默认的排序方式为"asc（升序）"，也可以设为"desc（降序）"。 - 与上面的结合使用，不然都不让排序了，你还考虑什么升降。
visible	data-visible	Boolean	true	默认为true显示该列，设为false则隐藏该列。 - 还是很有用的，例如隐藏自定义index列，按某属性排序后会变乱，你可以读取某行的index来进行赋值
cardVisible	data-card-visible	Boolean	true	默认为true显示该列，设为false则隐藏。
switchable	data-switchable	Boolean	true	默认为true显示该列，设为false则禁用列项目的选项卡。
clickToSelect	data-click-to-select	Boolean	true	默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
formatter	data-formatter	Function	undefined	需要此列的对象。某格的数据转换函数，需要三个参数： -value： field（字段名） -row：行的数据 -index：行的（索引）index
footerFormatter	data-footer-formatter	Function	undefined	需要此列的对象。某格的数据转换函数，需要一个参数： -data：所有行数据的数组函数需要返回（return）footer某格内所要显示的字符串的格式，还要包括内容
events	data-events	Object	undefined	当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：jQuery事件（参考Events）。 - value：字段名 - row：行数据 - index：此行的index 举个例子： <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
sorter	data-sorter	Function	undefined	自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名
sortName	data-sort-name	String	undefined	除了表头默认的sort-name或列的字段名，还可以使用自定义的sort-name 对特殊情况说明： - 一个列显示的内容或许是"html"代码，如：<b><span style="color:red">abc</span></b>，但是被排列的是html代码中的内容（content）：abc
cellStyle	data-cell-style	Function	undefined	对某格中显示样式（style）进行改变，需要三个函数： - value：字段名 - row：行数据 - index：此行的index - field：行的字段名支持classes和css，用法如下： function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
searchable	data-searchable	Boolean	true	默认true，表示此列数据可被查询
searchFormatter	data-search-formatter	Boolean	true	默认true，可使用格式化的数据查询
escape	data-escape	Boolean	false	跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'

事件(Events)

定义事件的格式：

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});

事件名	定义在jQuery中的事件名	参数	作用描述
onAll	all.bs.table	name, args	当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括： - name：事件名 - args：事件的数据
onClickRow	click-row.bs.table	row, $element, field	当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 - 参考：Bootstrap Table 双击或单击行获取该行内容
onDblClickRow	dbl-click-row.bs.table	row, $element, field	和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 - 参考：Bootstrap Table 双击或单击行获取该行内容
onClickCell	click-cell.bs.table	field, value, row, $element	当单击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td）
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	当双击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td）
onSort	sort.bs.table	name, order	当对某列进行排序时触发该事件，所需参数如下： - name：所排序的列的字段名 - order：所排的顺序
onCheck	check.bs.table	row, $element	当选择（check）此行时触发，所需的参数如下： - row：所选择的行的字段名 - $element：此行的DOM元素
onUncheck	uncheck.bs.table	row, $element	当取消选择（uncheck）此行时触发，所需的参数如下： - row：所取消选择的行的字段名 - $element：此行的DOM元素
onCheckAll	check-all.bs.table	rows	当全选行时触发，所需的参数如下： - rows：最近（newly）所选择的行的字段名的数组
onUncheckAll	uncheck-all.bs.table	rows	当取消全选行时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组
onCheckSome	check-some.bs.table	rows	当选择（check）某些行（多行，rows）时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组
onUncheckSome	uncheck-some.bs.table	rows	当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组
onLoadSuccess	load-success.bs.table	data	当所有数据被加载时触发
onLoadError	load-error.bs.table	status, res	当加载某些数据出现错误时触发
onColumnSwitch	column-switch.bs.table	field, checked	当某列改变是否可见的状态时触发
onColumnSearch	column-search.bs.table	field, text	当某列被查询时触发
onPageChange	page-change.bs.table	number, size	当改变此页所显示的数据条数或改变页码时触发
onSearch	search.bs.table	text	当查询此表时触发
onToggle	toggle.bs.table	cardView	当改变表的视图时触发
onPreBody	pre-body.bs.table	data	当<tbody></tbody>中的内容没显示前触发
onPostBody	post-body.bs.table	data	当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
onPostHeader	post-header.bs.table	none	当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
onExpandRow	expand-row.bs.table	index, row, $detail	当查看详细视图（点击查看detail的图标）时触发
onCollapseRow	collapse-row.bs.table	index, row	当关闭详细视图（再次点击查看detail的图标）时触发
onRefreshOptions	refresh-options.bs.table	options	当刷新各项后或在初始化表（也包括销毁了再初始化）之前触发
onResetView	reset-view.bs.table		当重置（reset）表的视图时触发
onRefresh	refresh.bs.table	params	当点击刷新按钮（refresh，不是浏览器的，而是表格右上角的刷新按钮）后触发

方法(Methods)

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名	参数	描述	举例
getOptions	none	返回各项的object	$table.bootstrapTable('getOptions'); - 请查看： getOptions
getSelections	none	返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行）	$table.bootstrapTable('getSelections'); - 请查看： getSelections
getAllSelections	none	返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组	$table.bootstrapTable('getAllSelections'); - 请查看： getAllSelections
showAllColumns	none	显示所有的列	$table.bootstrapTable('showAllColumns'); - 就是显示所有的列，并没什么可说的
hideAllColumns	none	隐藏所有的列	$table.bootstrapTable('hideAllColumns'); - 就是隐藏所有的列
getData	useCurrentPage	获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据	$table.bootstrapTable('getData'); - 请查看： getData
getRowByUniqueId	id	获取你想要的某行的数据（设置某行的id）	$table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID - 请查看： getRowByUniqueId
load	data	向表中加载数据，原来的数据将被移除	$table.bootstrapTable('load', data); - 请查看： load

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档）]

方法名	参数	描述	举例
append	data	将数据追加在最后一行后	$table.bootstrapTable('append', data);data可以是数组 - 请查看： append
prepend	data	也是追加，只是在第一行之前	$table.bootstrapTable('prepend', data);data可以是数组 - 请查看： prepend
remove	params	移除一行或多行你所选的数据	$table.bootstrapTable('remove', {field: 'id', values: ids}); - id：所需移除的那一行（rows，一或多行）的字段 - values：被移除的行的数组 - 请查看： remove
removeAll	-	移除表中所有的数据	$table.bootstrapTable('removeAll'); - 请查看： removeAll
removeByUniqueId	-	移除某行数据（设置某行的id）	$table.bootstrapTable('removeByUniqueId', 1);后面的1就是你想移除的那一行的ID - 请查看： removeByUniqueId
insertRow	params	新增一行，所需的参数如下： - index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁） - row：你想插入的数据	$table.bootstrapTable('insertRow', {index: 1, row: row}); - 请查看： insertRow
updateRow	params	更新行数据，所需的参数如下： - index：所要更新的行的索引（index） - row：你想换的新的数据	$table.bootstrapTable('updateRow', {index: 1, row: row}); - 请查看： updateRow - 请查看： Bootstrap Table实现定时刷新数据
updateByUniqueId	params	更新某行数据，所需的参数如下： - id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个） - row：你想换的新的数据	$table.bootstrapTable('updateByUniqueId', {id: 3, row: row}); - 请查看： updateByUniqueId
showRow	params	显示特定行，所需的参数至少包括下面所列的一个： - id：所要显示的行的索引（index） - uniqueId：那一行的id	$table.bootstrapTable('showRow', {index:1}); - 请查看： showRow/hideRow
hideRow	params	隐藏特定行，所需的参数至少包括下面所列的一个： - id：所要隐藏的行的索引（index） - uniqueId：那一行的id	$table.bootstrapTable('hideRow', {index:1}); - 请查看： showRow/hideRow
getRowsHidden	boolean	获取隐藏的行（官方原话很多，其实总结起来就前面那一句）	$table.bootstrapTable('getRowsHidden');

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]

方法名	参数	描述	举例
mergeCells	options	融合~（把多格合并为一格），所需的参数如下： - index：所要合并的格所在行的索引（index） - field：所在列的字段名 - rowspan：合并的行总数目 - colspan：合并的列总数目	$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3}); - 请查看： mergeCells
updateCell	params	更新某格数据，所需的参数如下： - index：所要合并的格所在行的索引（index） - field：所在列的字段名 - value：要换的新的数据你也可以设置{reinit:false}来禁用表格的再次初始化	$table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
refresh	params	刷新服务端的数据： - 可以设置{silent:true}来 ~~偷偷地（<_<）~~ 刷新 - 设置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改变请求的地址，页数，每页所显示的条数 - 可以设置{query:{foo:'bar'}}增加特定的参数	$table.bootstrapTable('refresh'); - 请查看： refresh
refreshOptions	options	看例子吧	- 请查看： refreshOptions
resetSearch	text	重置搜索的文本（text）	- 请查看： resetSearch
showLoading	none	显示正在加载……	- 请查看： showLoading/hideLoading
hideLoading	none	隐藏正在加载……	- 请查看： showLoading/hideLoading
checkAll	none	选择当前页的所有行	$table.bootstrapTable('checkAll'); - 请查看： checkAll/uncheckAll
uncheckAll	none	取消选择当前页的所有行	$table.bootstrapTable('uncheckAll'); - 请查看： checkAll/uncheckAll
checkInvert	none	反向选择，不难理解吧	$table.bootstrapTable('checkInvert');
check	index	选择某一行，索引（index）从0开始	$table.bootstrapTable('check', 1); - 请查看： check/uncheck
uncheck	index	取消选择某一行，索引（index）从0开始	$table.bootstrapTable('uncheck', 1); - 请查看： check/uncheck
checkBy	params	通过数组选择某一行，所需的参数如下： - field：所要选的字段名 - values：所要选的那些值（数组）	官方没，啊，有例纸： - $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2","value3"]}); - 请查看： checkBy/uncheckBy
uncheckBy	params	通过数组选择某一行，所需的参数如下： - field：所要取消选择的字段名 - values：所要取消选择的那些值（数组）	$("#table").bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]}); - 请查看： checkBy/uncheckBy
resetView	params	改变表格的样式，例如改变表格的高度（height）	$table.bootstrapTable('resetView'); - 请查看： resetView
resetWidth	none	自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度	$table.bootstrapTable('resetWidth');
destroy	none	销毁表格 A！T！T！A！C！K！	$table.bootstrapTable('destroy'); - 请查看： destroy
showColumn	field	显示特定的列	$table.bootstrapTable('showColumn', 'name'); - 请查看： showColumn/hideCoulumn
hideColumn	field	隐藏特定的列	$table.bootstrapTable('hideColumn', 'name'); - 请查看： showColumn/hideCoulumn

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]

方法名	参数	描述	举例
getHiddenColumns	-	获取所有隐藏的列	$table.bootstrapTable('getHiddenColumns');
getVisibleColumns	-	获取所有显示的列	$table.bootstrapTable('getVisibleColumns');
scrollTo	value	滚……到哪个位置，单位是'px'，如果设为'bottom'，嗖，恭喜你已到表尾	$table.bootstrapTable('scrollTo', 0); - 请查看： scrollTo
getScrollPosition	none	获取当前所滚到的位置，单位你懂得，就是'px'	$table.bootstrapTable('getScrollPosition');
filterBy	none	只能在客户端（client-side，相对server-side）这边用，过滤表中的数据例如： - 可以设置{age:10}来只显示age为10的数据 - 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: ["blue", "red", "green"]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据	$table.bootstrapTable('filterBy', { id: [1, 2, 3] }); - 请查看： filterBy
selectPage	page	跳转到特定的页面	$table.bootstrapTable('selectPage', 1); - 请查看： selectPage/prevPage/nextPage
prevPage	none	跳转到上一页	$table.bootstrapTable('prevPage'); - 请查看： selectPage/prevPage/nextPage
nextPage	none	跳转到下一页	$table.bootstrapTable('nextPage'); - 请查看： selectPage/prevPage/nextPage
togglePagination	none	词穷，请看例纸	$table.bootstrapTable('togglePagination'); - 请查看： togglePagination
toggleView	none	改变视图	$table.bootstrapTable('toggleView'); - 请查看： toggleView
expandRow	index	可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用 - 通过参数index来展开此列的详细视图	- 请查看： expandRow-collapseRow
collapseRow	index	可使用条件：detail view设为了true - 通过参数index来关闭此列的详细视图	- 请查看： expandRow-collapseRow
expandAllRows 新版有更改（原来为"expandAllRow"），下同感谢 @zhq449681061	is subtable	可使用条件：detail view设为了true - 展开所有列的详细视图	$table.bootstrapTable('expandAllRows'); - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的
collapseAllRows	is subtable	可使用条件：detail view设为了true - 关闭所有列的详细视图	$table.bootstrapTable('collapseAllRows'); - 参考上面

本地化，切换为另一种语言(Localizations)

默认显示英文，如果想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

然后是三种声明使用的方法（个人只使用第二、三种），如下：

第一种：

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

第三种：

$('table').bootstrapTable({locale:'zh-CN'});

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了，下面数字我就默认15，这个实际要看你设置的是多少

名称	参数	默认	说明
formatLoadingMessage	-	'Loading, please wait…'	“加载中，请等待……”
formatRecordsPerPage	pageNumber	'%s records per page'	“每页显示 15 条记录”
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	'Showing %s rows'	“总共 15 条记录”
formatSearch	-	'Search'	“搜索”（占位符）
formatNoMatches	-	'No matching records found'	“没有找到匹配的记录”
formatRefresh	-	'Refresh'	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	'Toggle'	“切换”
formatColumns	-	'Columns'	“列”

有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢

自己做的微信小程序工具 —维尼聚合工具（查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等）

维尼聚合工具

其他相关：

收起

展开全文

Next.js v4.1.4 文档中文翻译

千次阅读 2017-11-02 11:43:06

Next.js v4.1.4 中文翻译

最近想稍稍看下 React的 SSR框架 Next.js，因为不想看二手资料， 
 所以自己跑到 Github上看，Next.js的文档是英文的，看倒是大概也能看得懂， 
 但有些地方不太确定，而且英文看着毕竟不太爽你懂得，所以在网上搜了几圈发现好像好像还没有中文翻译，想着长痛不如短痛， 
 索性一边看一边翻译，自己翻译的东西自己看得也爽，不过毕竟能力有限，有些地方我也不知道该怎么翻译才好，所以翻译得不太通畅， 
 或者有几句干脆不翻译了。 
so，各位若是觉得我哪点翻译得不太准确，或者对于那几句我没翻译的地方有更好的见解，欢迎提出~ 
以下是全文翻译的 Next.js的 README.md文件，版本是 v4.1.4，除了翻译原文之外，还加了一点个人小小见解。 
另外，本文翻译已经放到了我的 github上，想要更好的阅读体验可以去看下，别忘了 star哦~ 
 
 
Next.js是一个用于React应用的极简的服务端渲染框架。 
请访问 learnnextjs.com 以获取更多详细内容. 
 
如何使用 
 
  安装
代码自动分割
CSS
嵌入式样式(Built-in-CSS)
内联式样式(CSS-in-JS)
静态文件服务 (例如: images)
自定义 <head> 头部元素
数据获取及组件生命周期
路由
<Link>
命令式路由 
 
    路由事件
浅层路由(Shallow Routing)
使用高阶函数(HOC)
预获取页面(Prefetching Pages)
通过 <Link>组件
通过命令的方式
自定义服务器和路由
异步导入(Dynamic Import)
自定义 <Document>
自定义错误处理
自定义配置
自定义 webpack 配置
自定义 babel 配置
CDN支持
项目部署
导出静态 HTML 页面面
相关技巧
FAQ
contributing
authors 
如何使用 
安装 
安装方法: 
npm install --save next react react-dom 
 
 Next.js 4 只支持 React 16.
 
 由于 React 16 和 React 15 的工作方式以及使用方法不尽相同，所以我们不得不移除了对 React 15 的支持 
 
在你的 package.json文件中添加如下代码： 
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
} 
接下来，大部分事情都交由文件系统来处理。每个 .js 文件都变成了一个自动处理和渲染的路由。 
在项目中新建 ./pages/index.js： 
export default () => <div>Welcome to next.js!</div> 
然后，在控制台输入 npm run dev命令，打开 http://localhost:3000即可看到程序已经运行，你当然也可以使用其他的端口号，可以使用这条命令：npm run dev -- -p <your port here>。 
目前为止，我们已经介绍了: 
自动编译和打包 (使用 webpack 和 babel)
代码热更新
以 ./pages目录作为页面渲染目录的的服务器端渲染
静态文件服务(./static/ 被自动定位到 /static/) 
想要亲自试试这些到底有多简单， check out sample app - nextgram 
代码自动分割 
你所声明的每个 import命令所导入的文件会只会与相关页面进行绑定并提供服务，也就是说，页面不会加载不需要的代码。 
import cowsay from 'cowsay-browser'

export default () =>
  <pre>
    {cowsay.say({ text: 'hi there!' })}
  </pre> 
CSS 
嵌入式样式 Built-in-CSS 
 Examples 
Basic css 
 
我们提供 style-jsx来支持局部独立作用域的 CSS(scope CSS)，目的是提供一种类似于 Web组件的 shadow CSS，不过，后者(即shadow CSS)并不支持服务器端渲染(scope CSS是支持的)。 
export default () =>
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}</style>
  </div> 
更多示例可见 styled-jsx documentation 
 
 译者注： 
 1. scope CSS的作用范围，如果添加了 jsx属性，则是不包括子组件的当前组件；如果添加了 global 和 jsx属性，则是包括了子组件在内的当前组件；如果没添加任何属性，则作用与 添加了 global 和 jsx的作用类似，只不过 next不会对其进行额外的提取与优化打包 
 2. scope CSS的实现原理，其实就是在编译好的代码的对应元素上，添加一个以 jsx开头的类名(class)，然后将对应的样式代码提取到此类名下 
 
内联式样式 CSS-in-JS 
 Examples 
Styled components
Styletron
Glamor
Glamorous
Cxs
Aphrodite
Fela 
 
几乎可以使用所有的内联样式解决方案，最简单一种如下： 
export default () => <p style={{ color: 'red' }}>hi there</p> 
为了使用更多复杂的 CSS-in-JS 内联样式方案，你可能不得不在服务器端渲染的时候强制样式刷新。我们通过允许自定义包裹着每个页面的 <Document> 组件的方式来解决此问题。 
静态文件服务 
在你的项目的根目录新建 static 文件夹，然后你就可以在你的代码通过 /static/ 开头的路径来引用此文件夹下的文件： 
export default () => <img src="/static/my-image.png" /> 
自定义 <head> 头部元素 
 Examples 
Head elements
Layout component 
 
我们暴露了一个用于将元素追加到 <head> 中的组件。 
import Head from 'next/head'

export default () =>
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <p>Hello world!</p>
  </div> 
注意：当组件卸载的时候，组件内定义的 <Head>将会被清空，所以请确保每个页面都在其各自的 <Head>内声明了其所有需要的内容，而不是假定这些东西已经在其他页面中添加过了。 
 
 译者注： 
 1. next 框架自带 <head>标签，作为当前页面的 <head>，如果在组件内自定义了 <Head>，则自定义 <Head>内的元素(例如 <title>、<meta>等)将会被追加到框架自带的 <head>标签中 
 2. 每个组件自定义的 <Head>内容只会应用在各自的页面上，子组件内定义的 <Head>也会追加到当前页面的 <head>内，如果有重复定义的标签或属性，则子组件覆盖父组件，位于文档更后面的组件覆盖更前面的组件。 
 
数据获取及组件生命周期 
 Examples 
Data fetch 
 
你可以通过导出一个基于 React.Component的组件来获取状态(state)、生命周期或者初始数据（而不是一个无状态函数(stateless)，就像上面的一段代码） 
import React from 'react'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    return (
      <div>
        Hello World {this.props.userAgent}
      </div>
    )
  }
} 
你可能已经注意到了，当加载页面获取数据的时候，我们使用了一个异步(async)的静态方法 getInitialProps。此静态方法能够获取所有的数据，并将其解析成一个 JavaScript对象，然后将其作为属性附加到 props对象上。 
当初始化页面的时候，getInitialProps只会在服务器端执行，而当通过 Link组件或者使用命令路由 API来将页面导航到另外一个路由的时候，此方法就只会在客户端执行。 
注意：getInitialProps 不能 在子组件上使用，只能应用于当前页面的顶层组件。 

 
 
 如果你在 getInitialProps 中引入了一些只能在服务器端使用的模块(例如一些 node.js的核心模块)，请确保通过正确的方式来导入它们 import them properly，否则的话，那很可能会拖慢应用的速度。 
 

 
你也可以为无状态(stateless)组件自定义 getInitialProps生命周期方法： 
const Page = ({ stars }) =>
  <div>
    Next stars: {stars}
  </div>

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page 
getInitialProps 接收的上下文对象包含以下属性： 
 - pathname - URL的 path部分 
 - query - URL的 query string部分，并且其已经被解析成了一个对象 
 - asPath - 在浏览器上展示的实际路径(包括 query字符串) 
 - req - HTTP request 对象 (只存在于服务器端) 
 - res - HTTP response 对象 (只存在于服务器端) 
 - jsonPageRes - 获取的响应数据对象 Fetch Response (只存在于客户端) 
 - err - 渲染时发生错误抛出的错误对象 
 
 译者注： 
 基于 getInitialProps在服务器端和客户端的不同表现，例如 req的存在与否，可以通过此来区分服务器端和客户端。 
 
路由 
<Link> 
 Examples 
Hello World 
 
可以通过 <Link> 组件来实现客户端在两个路由间的切换功能，例如下面两个页面： 
// pages/index.js
import Link from 'next/link'

export default () =>
  <div>
    Click{' '}
    <Link href="/about">
      <a>here</a>
    </Link>{' '}
    to read more
  </div> 
// pages/about.js
export default () => <p>Welcome to About!</p> 
注意：可以使用 <Link prefetch> 来让页面在后台同时获取和预加载，以获得最佳的页面加载性能 
客户端路由行为与浏览器完全相同： 
获取组件
如果组件定义了 getInitialProps，那么进行数据的获取，如果抛出异常，则将渲染_error.js
在步骤1和步骤2完成后，pushState开始执行，接着新组件将会被渲染 
每一个顶层组件都会接收到一个 url属性，其包括了以下 API: 
pathname - 不包括 query字符串在内的当前链接地址的 path字符串(即pathname)
query - 当前链接地址的 query字符串，已经被解析为对象，默认为 {}
asPath - 在浏览器地址栏显示的当前页面的实际地址(包括 query字符串)
push(url, as=url) - 通过 pushState来跳转路由到给定的 url
replace(url, as=url) - 通过 replaceState来将当前路由替换到给定的路由地址 url上 
push 以及 replace的第二个参数 as提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用。 
 
 译者注1： 
 上面那句话的意思是，as可以根据服务器端路由的配置作出相应的 路由改变，例如，在服务器端，你自定义规定当获取 /a的 path请求的时候，返回一个位于 /b目录下的页面，则为了配合服务器端的这种指定，你可以这么定义 <Link/>组件： <Link href='/b' as='/a'><a>a</a></Link>。 
 这种做法有一个好处，那就是尽管你将 /a请求指定到了 /b页面，但是因为as的值为 /a，所以编译后的 DOM元素显示的链接的 href值为 /a，但是当真正点击链接时，响应的真正页面还是 /b 
 译者注2： 
 <Link>组件主要用于路由跳转功能，其可以接收一个必须的子元素(DOM标签或者纯文字等) 
 1. 如果添加的子元素是 DOM元素，则 Link会为此子元素赋予路由跳转功能； 
 2. 如果添加的元素是纯文字，则 <Link>默认转化为 a标签，包裹在此文字外部(即作为文字的父元素)，如果当前组件有 jsx属性的 scope CSS，这个 a标签是不会受此 scope CSS影响的，也就是说，不会加上以 jsx开头的类名。
 需要注意的是，直接添加纯文字作为子元素的做法如今已经不被赞成了(deprecated)。 
 
URL 对象 
 Examples 
With URL Object Routing 
 
<Link>组件可以接收一个 URL对象，此 URL对象将会被自动格式化为 URL字符串。 
// pages/index.js
import Link from 'next/link'

export default () =>
  <div>
    Click{' '}
    <Link href={{ pathname: '/about', query: { name: 'Zeit' } }}>
      <a>here</a>
    </Link>{' '}
    to read more
  </div> 
上述代码中 <Link>组件的将会根据 href属性的对象值生成一个 /about?name=Zeit的 URL字符串，你也可以在此 URL对象中使用任何已经在 Node.js URL module documentation 中定义好了的属性来配置路由。 
替换 (replace)而非追加(push)路由 url 
<Link>组件默认将新的 URL追加 (push)到路由栈中，但你可以使用 replace属性来避免此追加动作(直接替换掉当前路由)。 
// pages/index.js
import Link from 'next/link'

export default () =>
  <div>
    Click{' '}
    <Link href="/about" replace>
      <a>here</a>
    </Link>{' '}
    to read more
  </div> 
让组件支持 onClick事件 
<Link> supports any component that supports the onClick event. In case you don’t provide an <a> tag, it will only add the onClick event handler and won’t pass the href property. 
 <Link>标签支持所有支持 onClick事件的组件(即只要某组件或者元素标签支持 onClick事件，则 <Link>就能够为其提供跳转路由的功能)。如果你没有给 <Link>标签添加一个 <a>标签的子元素的话，那么它只会执行给定的 onClick事件，而不是执行跳转路由的动作。 
// pages/index.js
import Link from 'next/link'

export default () =>
  <div>
    Click{' '}
    <Link href="/about">
      <img src="/static/image.png" />
    </Link>
  </div> 
将 <Link>的 href暴露给其子元素(child) 
如果 <Link>的子元素是一个 <a>标签并且没有指定 href属性的话，那么我们会自动指定此属性(与 <Link>的 herf相同)以避免重复工作，然而有时候，你可能想要通过一个被包裹在某个容器(例如组件)内的 <a>标签来实现跳转功能，但是 Link并不认为那是一个超链接，因此，就不会把它的 href属性传递给子元素，为了避免此问题，你应该给 Link附加一个 passHref属性，强制让 Link将其 href属性传递给它的子元素。 
import Link from 'next/link'
import Unexpected_A from 'third-library'

export default ({ href, name }) =>
  <Link href={href} passHref>
    <Unexpected_A>
      {name}
    </Unexpected_A>
  </Link> 
命令式路由 
 Examples 
Basic routing
With a page loading indicator 
 
你可以使用 next/router来实现客户端侧的页面切换 
import Router from 'next/router'

export default () =>
  <div>
    Click <span onClick={() => Router.push('/about')}>here</span> to read more
  </div> 
上述代码中的 Router对象拥有以下 API： 
route - 当前路由字符串
pathname - 不包括查询字符串(query string)在内的当前路由的 path(也就是 pathname)
query - Object with the parsed query string. Defaults to {}
asPath - 在浏览器地址栏显示的当前页面的实际地址(包括 query字符串)
push(url, as=url) - 通过 pushState来跳转路由到给定的 url
replace(url, as=url) - 通过 replaceState来将当前路由替换到给定的路由地址 url上 
push 以及 replace的第二个参数 as提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用。 
为了使用编程的方式而不是触发导航和组件获取的方式来切换路由，可以在组件内部使用 props.url.push 和 props.url.replace 
 
 译者注： 
 除非特殊需要，否则在组件内部不赞成(deprecated)使用 props.url.push 和 props.url.replace，而是建议使用 next/router的相关 API。 
 
URL 对象 
命令式路由 (next/router)所接收的 URL对象与 <Link>的 URL对象很类似，你可以使用相同的方式来push 和 replace路由URL 
import Router from 'next/router'

const handler = () =>
  Router.push({
    pathname: '/about',
    query: { name: 'Zeit' }
  })

export default () =>
  <div>
    Click <span onClick={handler}>here</span> to read more
  </div> 
命令式路由 (next/router)的 URL对象的属性及其参数的使用方法和 <Link>组件的完全一样。 
路由事件 
你还可以监听到与 Router相关的一些事件。 
以下是你所能够监听的 Router事件: 
routeChangeStart(url) - 当路由刚开始切换的时候触发
routeChangeComplete(url) - 当路由切换完成时触发
routeChangeError(err, url) - 当路由切换发生错误时触发
beforeHistoryChange(url) - 在改变浏览器 history之前触发
appUpdated(nextRoute) - 当切换页面的时候，应用版本刚好更新的时触发(例如在部署期间切换路由) 
 
 Here url is the URL shown in the browser. If you call Router.push(url, as) (or similar), then the value of url will be as. 
 上面 API中的 url参数指的是浏览器地址栏显示的链接地址，如果你使用 Router.push(url, as)(或者类似的方法)来改变路由，则此值就将是 as的值 
 
下面是一段如何正确地监听路由事件 routeChangeStart的示例代码： 
Router.onRouteChangeStart = url => {
  console.log('App is changing to: ', url)
} 
如果你不想继续监听此事件了，那么你也可以很轻松地卸载掉此监听事件，就像下面这样： 
Router.onRouteChangeStart = null 
如果某个路由加载被取消掉了(例如连续快速地单击两个链接)，routeChangeError 将会被执行。此方法的第一个参数 err对象中将包括一个值为 true的 cancelled属性。 
Router.onRouteChangeError = (err, url) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`)
  }
} 
如果你在一次项目新部署的过程中改变了路由，那么我们就无法在客户端对应用进行导航，必须要进行一次完整的导航动作(译者注：意思是无法像正常那样通过 PWA的方式进行导航)，我们已经自动帮你做了这些事。 
 不过，你也可以通过 Route.onAppUpdated事件对此进行自定义操作，就像下面这样： 
Router.onAppUpdated = nextUrl => {
  // persist the local state
  location.href = nextUrl
} 
 
 译者注：
 一般情况下，上述路由事件的发生顺序如下： 
 1. routeChangeStart 
 2. beforeHistoryChange 
 3. routeChangeComplete 
 
浅层路由 
 Examples 
Shallow Routing 
 
浅层路由(Shallow routing)允许你在不触发 getInitialProps的情况下改变路由(URL)，你可以通过要加载页面的 url来获取更新后的 pathname 和 query，这样就不会丢失路由状态(state)了。 
你可以通过调用 Router.push 或 Router.replace，并给它们加上 shallow: true的配置参数来实现此功能，下面是一个使用示例： 
// Current URL is "/"
const href = '/?counter=10'
const as = href
Router.push(href, as, { shallow: true }) 
现在，URL已经被更新到了 /?counter=10，你可以在组件内部通过 this.props.url来获取此 URL 
你可以在 componentWillReceiveProps钩子函数中获取到 URL的变化，就像下面这样： 
componentWillReceiveProps(nextProps) {
  const { pathname, query } = nextProps.url
  // fetch data based on the new query
} 
 
 注意: 
 浅层路由只会在某些页面上起作用，例如，我们可以假定存在另外一个名为 about的页面，然后执行下面这行代码： 
 Router.push('/about?counter=10', '/about?counter=10', { shallow: true }) 
 因为这是一个新的页面(/about?counter=10)，所以即使我们已经声明了只执行浅层路由，但当前页面仍然会被卸载掉(unload)，然后加载这个新的页面并调用 getInitialProps方法 
 
使用高阶函数 HOC 
 Examples 
Using the `withRouter` utility 
 
如果你想在应用的任何组件都能获取到 router对象，那么你可以使用 withRouter高阶函数，下面是一个使用此高阶函数的示例： 
import { withRouter } from 'next/router'

const ActiveLink = ({ children, router, href }) => {
  const style = {
    marginRight: 10,
    color: router.pathname === href? 'red' : 'black'
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default withRouter(ActiveLink) 
上述代码中的 router对象拥有和 next/router 相同的 API。 
预获取页面 Prefetching Pages 
(下面就是一个小例子) 
 Examples 
Prefetching 
 
Next.js自带允许你预获取(prefetch)页面的 API 
因为 Next.js在服务器端渲染页面，所以应用的所有将来可能发生交互的相关链接路径可以在瞬间完成交互，事实上 Next.js可以通过预下载功能来达到一个绝佳的加载性能。[更多详细可见](Read more.) 
 
 由于 Next.js只会预加载 JS代码，所以在页面加载的时候，你可以还需要花点时间来等待数据的获取。 
 
通过 <Link> 组件 
你可以为任何一个 <Link>组件添加 prefetch属性，Next.js将会在后台预加载这些页面。 
import Link from 'next/link'

// example header component
export default () =>
  <nav>
    <ul>
      <li>
        <Link prefetch href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link prefetch href="/about">
          <a>About</a>
        </Link>
      </li>
      <li>
        <Link prefetch href="/contact">
          <a>Contact</a>
        </Link>
      </li>
    </ul>
  </nav> 
通过命令的方式 
大部分预获取功能都需要通过 <Link>组件来指定链接地址，但是我们还暴露了一个命令式的 API以方便更加复杂的场景： 
import Router from 'next/router'

export default ({ url }) =>
  <div>
    <a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
      A route transition will happen after 100ms
    </a>
    {// but we can prefetch it!
    Router.prefetch('/dynamic')}
  </div> 
自定义服务器和路由 
 Examples 
Basic custom server
Express integration
Hapi integration
Koa integration
Parameterized routing
SSR caching 
 
一般来说，你可以使用 next start命令启动 next服务，但是，你也完全可以使用编程(programmatically)的方式，例如路由匹配等，来定制化路由。 
下面就是一个将 /a匹配到 ./page/b，以及将 /b匹配到 ./page/a的例子： 
// This file doesn't not go through babel or webpack transformation.
// Make sure the syntax and sources this file requires are compatible with the current node version you are running
// See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babel
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
}) 
next API如下所示： 
 - next(path: string, opts: object) - path是 Next应用当前的路由位置 
 - next(opts: object) 
上述 API中的 opt对象存在如下属性： 
 - dev (bool) 是否使用开发模式(dev)来启动 Next.js - 默认为 false 
 - dir (string) 当前 Next应用的路由位置 - 默认为 '.' 
 - quiet (bool) 隐藏包括服务器端消息在内的错误消息 - 默认为 false 
 - conf (object) 和next.config.js 中的对象是同一个 - 默认为 {} 
然后，将你(在 package.json中配置)的 start命令(script)改写成 NODE_ENV=production node server.js。 
异步导入 Dynamic Import 
 Examples 
With Dynamic Import 
 
Next.js支持 JavaScript TC39 的dynamic import proposal规范，所以你可以动态导入(import) JavaScript 模块(例如 React Component)。 
你可以将动态导入理解为一种将代码分割为更易管理和理解的方式。 
 由于 Next.js支持服务器端渲染侧(SSR)的动态导入，所以你可以用它来做一些炫酷的东西。 
1. 基本用法（同样支持 SSR） 
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(import('../components/hello'))

export default () =>
  <div>
    <Header />
    <DynamicComponent />
    <p>HOME PAGE is here!</p>
  </div> 
2. 自定义 加载组件 
import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  import('../components/hello2'),
  {
    loading: () => <p>...</p>
  }
)

export default () =>
  <div>
    <Header />
    <DynamicComponentWithCustomLoading />
    <p>HOME PAGE is here!</p>
  </div> 
3. 禁止 SSR 
import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {
  ssr: false
})

export default () =>
  <div>
    <Header />
    <DynamicComponentWithNoSSR />
    <p>HOME PAGE is here!</p>
  </div> 
4. 一次性加载多个模块 
import dynamic from 'next/dynamic'

const HelloBundle = dynamic({
  modules: props => {
    const components = {
      Hello1: import('../components/hello1'),
      Hello2: import('../components/hello2')
    }

    // Add remove components based on props

    return components
  },
  render: (props, { Hello1, Hello2 }) =>
    <div>
      <h1>
        {props.title}
      </h1>
      <Hello1 />
      <Hello2 />
    </div>
})

export default () => <HelloBundle title="Dynamic Bundle" /> 
自定义 <Document> 
 Examples 
Styled components custom document 
Google AMP 
 
Next.js帮你自动跳过了在为页面添加文档标记元素的操作，例如， 你从来不需要主动添加 <html>、<body>这些文档元素。如果你想重定义这些默认操作的话，那么你可以创建(或覆写) ./page/_ducument.js文件，在此文件中，对 Document进行扩展： 
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

  render() {
    return (
      <html>
        <Head>
          <style>{`body { margin: 0 } /* custom! */`}</style>
        </Head>
        <body className="custom_class">
          {this.props.customValue}
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
} 
在以下前提下，所有的 getInitialProps 钩子函数接收到的 ctx都指的是同一个对象： 
回调函数 renderPage (Function)是真正执行 React渲染逻辑的函数(同步地)，这种做法有助于此函数支持一些类似于 Aphrodite's的 renderStatic等一些服务器端渲染容器。 
注意：<Main/>之外的 React组件都不会被浏览器初始化，如果你想在所有的页面中使用某些组件(例如菜单栏或者工具栏)，首先保证不要在其中添加有关应用逻辑的内容，然后可以看看这个例子 
自定义错误处理 
客户端和服务器端都会捕获并使用默认组件 error.js来处理 404 和 500错误。如果你希望自定义错误处理，可以对其进行覆写： 
import React from 'react'

export default class Error extends React.Component {
  static getInitialProps({ res, jsonPageRes }) {
    const statusCode = res
      ? res.statusCode
      : jsonPageRes ? jsonPageRes.status : null
    return { statusCode }
  }

  render() {
    return (
      <p>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : 'An error occurred on client'}
      </p>
    )
  }
} 
使用内置的错误页面 
如果你想使用内置的错误页面，那么你可以通过 next/error来实现： 
import React from 'react'
import Error from 'next/error'
import fetch from 'isomorphic-fetch'

export default class Page extends React.Component {
  static async getInitialProps() {
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const statusCode = res.statusCode > 200 ? res.statusCode : false
    const json = await res.json()

    return { statusCode, stars: json.stargazers_count }
  }

  render() {
    if (this.props.statusCode) {
      return <Error statusCode={this.props.statusCode} />
    }

    return (
      <div>
        Next stars: {this.props.stars}
      </div>
    )
  }
} 
 
 如果你想使用自定义的错误页面，那么你可以导入你自己的错误(_error)页面组件而非内置的 next/error 
 译者注： 
 如果你只是想覆写默认的错误页面，那么可以在 /pages下新建一个名为 _error.js的文件，Next将使用此文件来覆盖默认的错误页面 
 
自定义配置 
为了对 Next.js进行更复杂的自定义操作，你可以在项目的根目录下(和 pages/以及 package.json属于同一层级)新建一个 nexr.config.js文件 
注意：next.confgi.js是一个标准的 Node.js模块，而不是一个 JSON文件，此文件在 Next项目的服务端以及 build阶段会被调用，但是在浏览器端构建时是不会起作用的。 
// next.config.js
module.exports = {
  /* config options here */
} 
设置一个自定义的构建(build)目录 
你可以自行指定构建打包的输出目录，例如，下面的配置将会创建一个 build目录而不是 .next作为构建打包的输出目录，如果没有特别指定的话，那么默认就是 .next 
// next.config.js
module.exports = {
  distDir: 'build'
} 
Configuring the onDemandEntries 
Next 暴露了一些能够让你自己控制如何部署服务或者缓存页面的配置： 
module.exports = {
  onDemandEntries: {
    // 控制页面在内存`buffer`中缓存的时间，单位是 ms
    maxInactiveAge: 25 * 1000,
    // number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 2,
  }
} 
自定义 webpack 配置 
 Examples 
Custom webpack bundle analyzer 
 
你可以通过 next.config.js中的函数来扩展 webpack的配置 
// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)

module.exports = {
  webpack: (config, { buildId, dev }) => {
    // Perform customizations to webpack config

    // Important: return the modified config
    return config
  },
  webpackDevMiddleware: config => {
    // Perform customizations to webpack dev middleware config

    // Important: return the modified config
    return config
  }
} 
警告：不推荐在 webpack的配置中添加一个支持新文件类型(css less svg等)的 loader，因为 webpack只会打包客户端代码，所以(loader)不会在服务器端的初始化渲染中起作用。Babel是一个很好的替代品，因为其给服务器端和客户端提供一致的功能效果(例如，babel-plugin-inline-react-svg)。 
自定义 Babel 配置 
 Examples 
Custom babel configuration 
 
为了扩展对 Babel的使用，你可以在应用的根目录下新建 .babelrc文件，此文件是非必须的。 
 如果此文件存在，那么我们就认为这个才是真正的Babel配置文件，因此也就需要为其定义一些 next项目需要的东西， 并将之当做是next/babel的预设配置(preset) 
 这种设计是为了避免你有可能对我们能够定制 babel配置而感到诧异。 
下面是一个 .babelrc文件的示例： 
{
  "presets": ["next/babel", "stage-0"]
} 
CDN 支持 
你可以设定 assetPrefix项来配置 CDN源，以便能够与 Next.js项目的 host保持对应。 
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  // You may only need to add assetPrefix in the production.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : ''
} 
注意：Next.js将会自动使用所加载脚本的 CDN域(作为项目的 CDN域)，但是对 /static目录下的静态文件就无能为力了。如果你想让那些静态文件也能用上CDN，那你就不得不要自己指定 CDN域，有种方法也可以让你的项目自动根据运行环境来确定 CDN域，可以看看这个例子 
项目部署 
构建打包和启动项目被分成了以下两条命令： 
next build
next start 
例如，你可以像下面这样为 now项目配置 package.json文件： 
{
  "name": "my-app",
  "dependencies": {
    "next": "latest"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
} 
然后就可以直接启动 now项目了！ 
Next.js也可以使用其他的托管方案，更多详细可以看一下这部分内容 ‘Deployment’ 
 注意：我们推荐你推送 .next，或者你自定义的打包输出目录(到托管方案上)(Please have a look at ‘Custom Config’，你还可以自定义一个专门用于放置配置文件(例如 .npmignore或 .gitignore)的文件夹。否则的话，使用 files或者 now.files来选择要部署的白名单(很明显要排除掉 .next或你自定义的打包输出目录) 
导出静态 HTML 页面 
 Examples 
Static export 
 
你可以将你的 Next.js应用当成一个不依赖于 Node.js服务的静态应用。此静态应用支持几乎所有的 Next.js特性，包括 异步导航、预获取、预加载和异步导入等。 
使用 
首先，Next.js的开发工作没什么变化，然后创建一个 Next.js的配置文件 config，就像下面这样： 
// next.config.js
module.exports = {
  exportPathMap: function() {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/readme.md': { page: '/readme' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } }
    }
  }
} 
 
 需要注意的是，如果声明的路径表示的是一个文件夹的话，那么最终将会导出一份类似于 /dir-name/index.html的文件，如果声明的路径是一个文件的话，那么最终将会以指定的文件名导出，例如上述代码中，就会导出一个 readme.md的文件。如果你使用了一个不是以 .html结尾的文件，那么在解析此文件的时候，你需要给 text/html设置一个 Content-Type头(header) 
 
通过上述的类似代码，你可以指定你想要导出的静态页面。 
接着，输入以下命令： 
next build
next export 
或许，你还可以在 package.json文件中多添加一条命令： 
{
  "scripts": {
    "build": "next build && next export"
  }
} 
现在就只需要输入这一条命令就行了： 
npm run build 
这样，你在 out目录下就有了一个当前应用的静态网站了。 
 
 你也可以自定义输出目录，更多帮助可以在命令行中输入 next export -h 获取 
 
现在，你就可以把输出目录(例如/out)部署到静态文件服务器了，需要注意的是，如果你想要部署到 Github上的话，那么需要需要增加一个步骤 
例如，只需要进入 out目录，然后输入以下命令，就可以把你的应用部署到 ZEIT now 
now 
局限性 
当你输入 next export命令时，我们帮你构建了应用的 HTML静态版本，在此阶段，我们将会执行页面中的 getInitialProps函数。 
所以，你只能使用 context对象传递给 getInitialProps的 pathname、query和 asPath 字段，而 req 或 res则是不可用的(res和 res只在服务器端可用)。 
 
 基于此，你也无法在我们预先构建 HTML文件的时候，动态的呈现 HTML页面，如果你真的想要这么做(指动态构建页面)的话，请使用 next start 
 
相关技巧 
Setting up 301 redirects
Dealing with SSR and server only modules 
FAQ 
 
 可用在生产环境使用吗? 
 https://zeit.co 就是使用 Next.js构建的。 
无论是开发者体验还是终端表现，它都超出预期，所以我们决定将它共享到社区中。 
  
 
 体积有多大? 
客户端包的大小根据每个应用程序的功能等不同而不尽相同。 
 一个最简单的 Next程序包在 gzip压缩后可能只有 65kb 大小。 
 
 
 它(指Next.js) 和 create-react-app是差不多的吗? 
是也不是。 
 说是，是因为二者都让你的开发变得更轻松。 
 说不是，则是因为 Next.js强制规定了一些目录结构，以便我们能实现更多高级的操作，例如： 
 - 服务器端渲染(SSR) 
 - 代码自动分割 
此外，Next.js还内置了两个对于单页应用来说比较重要的特性： 
 - Routing with lazy component loading: <Link> (by importing next/link) 
 - 修改 <head>元素的方法(通过导入 next/head) 
如果你想在 Next.js或其他 React应用中复用组件，则使用 create-react-app是一个很好的选择，你可以稍后将其导入以保证代码库的纯净。 
 
 
 如何使用嵌入式CSS(CSS-in-JS)方案？ 
Next.js自带的库 styled-jsx支持 局部(scoped)css，当然，你也可以在 Next应用中添加上面所提到的任何你喜欢的代码库来使用你想要的 CSS-in-JS解决方案。 
  
 
 如何使用类似于 SASS / SCSS / LESS 之类的 CSS 预处理器？ 
Next.js自带的库 styled-jsx支持 局部(scoped)css，当然，你也可以在 Next应用中使用以下示例中的任何一种 CSS预处理器方案： 
with-external-scoped-css
with-scoped-stylesheets-and-postcss
with-global-stylesheet 
 
 
 What syntactic features are transpiled? How do I change them? 
(语法特性)我们参照 V8引擎，因为 V8广泛支持 ES6 和 async 以及 await，所以我们也就支持这些，因为 V8还不支持类装饰器(class decorator)，所以我们也就不支持它(类装饰器) 
可以看看 这些 以及 这些 
 
 
 Why a new Router? 
Next.js is special in that: 
Routes don’t need to be known ahead of time
Routes are always lazy-loadable
Top-level components can define getInitialProps that should block the loading of the route (either when server-rendering or lazy-loading) 
基于上述几个特点，我们能够构造出一个具有以下两个功能的简单路由： 
 - 每个顶级组件都会接收到一个 url对象来检查 url 或者 修改历史记录 
 - <Link />组件作为类似于 <a/>等标签元素的容器以便进行客户端的页面切换。 
我们已经在一些很有意思的场景下测试了路由的灵活性，更多相信可以看这里 nextgram 
  
 
 如何自定义路由? 
Next.js提供了一个 request handler，利用其我们能够让任意 URL与 任何组件之间产生映射关系。 
 在客户端，<Link />组件有个 as属性，它能够改变获取到的 URL 
  
 
 如何获取数据？ 
这由你决定， getInitialProps 是一个 异步(async)函数(或者也可以说是一个返回 Promise的标准函数)，它能够从任意位置获取数据。 
  
 
 能够配合使用 GraphQL吗 
当然，这还有个用 Apollo 的例子呢。 
  
 
 能够配合使用 Redux吗？ 
当然，这也有个例子。 
  
 
 为什么我不能在开发服务器中访问我的静态导出路由呢？ 
这是一个已知的 Next.js架构问题，在解决方案还没内置到框架中之前，你可以先看看这一个例子中的解决方法来集中管理你的路由。 
  
 
 我可以在 Next应用中使用我喜欢的 JavaScript库或工具包吗？ 
我们在发布第一版的时候就已经提供了很多例子，你可以看看这个目录 
  
 
 你们是怎么做出这个框架的? 
我们力求达到的目标大部分都是从 由 Guillermo Rauch给出的[设计富Web应用的 7个原则]中受到启发，PHP的易用性也是一个很棒的灵感来源，我们觉得在很多你想使用 PHP来输出 HTML页面的情况下，Next.js都是一个很好的替代品，不过不像 PHP，我们从 ES6的模块化系统中获得好处，每个文件都能很轻松地导入一个能够用于延迟求值或测试的组件或函数。 
当我们研究 React的服务器端渲染时，我们并没有做出太大的改变，因为我们偶然发现了 React作者 Jordan Walke写的 react-page (now deprecated)。 
  
Contributing 
Please see our contributing.md 
Authors 
Arunoda Susiripala (@arunoda) – ▲ZEIT
Tim Neutkens (@timneutkens)
Naoyuki Kanezawa (@nkzawa) – ▲ZEIT
Tony Kovanen (@tonykovanen) – ▲ZEIT
Guillermo Rauch (@rauchg) – ▲ZEIT
Dan Zajdband (@impronunciable) – Knight-Mozilla / Coral Project

收起

展开全文

文档

javascript在线将汉字翻译为汉语拼音，可选择翻译中汉字对照

2009-02-06 18:16:08

汉字翻译拼音 set8="";set4=2;function set5(m,n,c,d,e3){set4=1;Lxyer1.style.top=document.body.scrollTop+event.clientY+20;Lxyer1.style.left=event.clientX-150;var t,a,...

<html>

<head>

<title>汉字翻译拼音</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="description" content="汉字翻译拼音">

<meta name="keywords" content="汉字翻译拼音" > 

<META HTTP-EQUIV="expires" CONTENT="0">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<meta http-equiv=refresh content="200">

<base οnmοuseοver="window.status='汉字翻译拼音';return true"> 

<script language="JavaScript">

<!--

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

//-->

</script>



<script language="javascript">

set8="";set4=2;function set5(m,n,c,d,e3){set4=1;Lxyer1.style.top=document.body.scrollTop+event.clientY+20;Lxyer1.style.left=event.clientX-150;var t,a,b,f='<td align=center οnmοuseοver=this.bgColor="#9CA4B6" οnmοuseοut=this.bgColor="" ';if(e3==1)var g=","+eval(m+".value")+",";t='<table width=100% cellpadding=3 bgcolor=#CCD1D9 οnclick="Lxyer1.style.top=-400"><tr><td><font color=#9900CC>※</font></td>'+f+'width=53 οnclick=\''+m+'.value=""\'>清除 C</td>'+f+'width=53>关闭 ×</td></tr></table><table width=100% cellpadding=0 cellspacing=0 οnmοusedοwn=set4=2;setTimeout("set4=1",300)>';if(d!=null)set8=m+"^"+d;else set8=m+"^"+n;a=n.split("`");for(b=0;b<a.length;b++){if(b%c==0)t+="<tr>";t+='<td οnmοuseοver=this.bgColor="#cccccc" οnmοuseοut=this.bgColor="" width="'+Math.floor(100/c)+'%" height=20 οnclick=';if(e3!=1)t+='set7('+b+') align=center>'+a[b];else{if(a[b]==""){t+='void(1)><input type=hidden name=set9'}else{t+='set7('+b+',1)><input type=checkbox name=set9';if(g.indexOf(","+a[b]+",")!=-1)t+=" checked"}t+='>'+a[b]}t+="</td>";if(b%c==c-1)t+="</tr>"}Lxyer1.innerHTML=t+"</table>"}function set7(m,n){;var a=set8.split("^");var b=a[1].split("`");var obj=eval(a[0]);if(n!=1){obj.value=b[m];Lxyer1.style.top=-400;return};var d=","+obj.value+",";if(d.indexOf(","+b[m]+",")==-1){set9[m].checked=true;d+=b[m]}else{set9[m].checked=false;d=d.split(","+b[m]+",").join(",")}d=d.replace(/(^\,+)|\,+$/g,"")

obj.value=d}function set6(a,b,c){;var t=a;for(var x=a+c;x<=b;x+=c)t+="`"+x;return t}document.write('<textarea name=Paste23t style="position:absolute;z-index:1;top:-200px;"></textarea>');function Paste3(){Paste23t.select();document.execCommand("Paste");return Paste23t.value}function Gt3save(f,n,a){;var b=a.indexOf("`"+f);if(b==-1)return a+"`"+f+n;var a1=a.substr(0,b);var a2=a.substring(b+3)

b=a2.indexOf("`");if(b==-1)a2="";else a2=a2.substring(b);return a1+"`"+f+n+a2}document.body.οnmοuseup=new Function("if(set4==1)Lxyer1.style.top=-400")

</script>

<script language=vbs>

function g5(n)

g5=asc(n)

end function 

</script>

<script language=jscript>

dd="a,20319,ai,20317,an,20304,ang,20295,ao,20292,ba,20283,bai,20265,ban,20257,bang,20242,bao,20230,bei,20051,ben,20036,beng,20032,bi,20026,bian,20002,biao,19990,bie,19986,bin,19982,bing,19976,bo,19805,bu,19784,ca,19775,cai,19774,can,19763,cang,19756,cao,19751,ce,19746,ceng,19741,cha,19739,chai,19728,chan,19725,chang,19715,chao,19540,che,19531,chen,19525,cheng,19515,chi,19500,chong,19484,chou,19479,chu,19467,chuai,19289,chuan,19288,chuang,19281,chui,19275,chun,19270,chuo,19263,ci,19261,cong,19249,cou,19243,cu,19242,cuan,19238,cui,19235,cun,19227,cuo,19224,da,19218,dai,19212,dan,19038,dang,19023,dao,19018,de,19006,deng,19003,di,18996,dian,18977,diao,18961,die,18952,ding,18783,diu,18774,dong,18773,dou,18763,du,18756,duan,18741,dui,18735,dun,18731,duo,18722,e,18710,en,18697,er,18696,fa,18526,fan,18518,fang,18501,fei,18490,fen,18478,feng,18463,fo,18448,fou,18447,fu,18446,ga,18239,gai,18237,gan,18231,gang,18220,gao,18211,ge,18201,gei,18184,gen,18183,geng,18181,gong,18012,gou,17997,gu,17988,gua,17970,guai,17964,guan,17961,guang,17950,gui,17947,gun,17931,guo,17928,ha,17922,hai,17759,han,17752,hang,17733,hao,17730,he,17721,hei,17703,hen,17701,heng,17697,hong,17692,hou,17683,hu,17676,hua,17496,huai,17487,huan,17482,huang,17468,hui,17454,hun,17433,huo,17427,ji,17417,jia,17202,jian,17185,jiang,16983,jiao,16970,jie,16942,jin,16915,jing,16733,jiong,16708,jiu,16706,ju,16689,juan,16664,jue,16657,jun,16647,ka,16474,kai,16470,kan,16465,kang,16459,kao,16452,ke,16448,ken,16433,keng,16429,kong,16427,kou,16423,ku,16419,kua,16412,kuai,16407,kuan,16403,kuang,16401,kui,16393,kun,16220,kuo,16216,la,16212,lai,16205,lan,16202,lang,16187,lao,16180,le,16171,lei,16169,leng,16158,li,16155,lia,15959,lian,15958,liang,15944,liao,15933,lie,15920,lin,15915,ling,15903,liu,15889,long,15878,lou,15707,lu,15701,lv,15681,luan,15667,lue,15661,lun,15659,luo,15652,ma,15640,mai,15631,man,15625,mang,15454,mao,15448,me,15436,mei,15435,men,15419,meng,15416,mi,15408,mian,15394,miao,15385,mie,15377,min,15375,ming,15369,miu,15363,mo,15362,mou,15183,mu,15180,na,15165,nai,15158,nan,15153,nang,15150,nao,15149,ne,15144,nei,15143,nen,15141,neng,15140,ni,15139,nian,15128,niang,15121,niao,15119,nie,15117,nin,15110,ning,15109,niu,14941,nong,14937,nu,14933,nv,14930,nuan,14929,nue,14928,nuo,14926,o,14922,ou,14921,pa,14914,pai,14908,pan,14902,pang,14894,pao,14889,pei,14882,pen,14873,peng,14871,pi,14857,pian,14678,piao,14674,pie,14670,pin,14668,ping,14663,po,14654,pu,14645,qi,14630,qia,14594,qian,14429,qiang,14407,qiao,14399,qie,14384,qin,14379,qing,14368,qiong,14355,qiu,14353,qu,14345,quan,14170,que,14159,qun,14151,ran,14149,rang,14145,rao,14140,re,14137,ren,14135,reng,14125,ri,14123,rong,14122,rou,14112,ru,14109,ruan,14099,rui,14097,run,14094,ruo,14092,sa,14090,sai,14087,san,14083,sang,13917,sao,13914,se,13910,sen,13907,seng,13906,sha,13905,shai,13896,shan,13894,shang,13878,shao,13870,she,13859,shen,13847,sheng,13831,shi,13658,shou,13611,shu,13601,shua,13406,shuai,13404,shuan,13400,shuang,13398,shui,13395,shun,13391,shuo,13387,si,13383,song,13367,sou,13359,su,13356,suan,13343,sui,13340,sun,13329,suo,13326,ta,13318,tai,13147,tan,13138,tang,13120,tao,13107,te,13096,teng,13095,ti,13091,tian,13076,tiao,13068,tie,13063,ting,13060,tong,12888,tou,12875,tu,12871,tuan,12860,tui,12858,tun,12852,tuo,12849,wa,12838,wai,12831,wan,12829,wang,12812,wei,12802,wen,12607,weng,12597,wo,12594,wu,12585,xi,12556,xia,12359,xian,12346,xiang,12320,xiao,12300,xie,12120,xin,12099,xing,12089,xiong,12074,xiu,12067,xu,12058,xuan,12039,xue,11867,xun,11861,ya,11847,yan,11831,yang,11798,yao,11781,ye,11604,yi,11589,yin,11536,ying,11358,yo,11340,yong,11339,you,11324,yu,11303,yuan,11097,yue,11077,yun,11067,za,11055,zai,11052,zan,11045,zang,11041,zao,11038,ze,11024,zei,11020,zen,11019,zeng,11018,zha,11014,zhai,10838,zhan,10832,zhang,10815,zhao,10800,zhe,10790,zhen,10780,zheng,10764,zhi,10587,zhong,10544,zhou,10533,zhu,10519,zhua,10331,zhuai,10329,zhuan,10328,zhuang,10322,zhui,10315,zhun,10309,zhuo,10307,zi,10296,zong,10281,zou,10274,zu,10270,zuan,10262,zui,10260,zun,10256,zuo,10254".split(",")

//Ianse.Com

function jjfy(n)

{

t=""

for(x=0;x<n.length;x++)

{

var r3=""

if(rcb3.checked)r3=" "



b=n.charAt(x)

a=g5(b)

if(a>0 && a<160)

 {

 if(rcb2.checked)t+=b

 }

else if(a<-20319 || a>-10247)

 {

 if(rcb1.checked)t+=b

 }

else

 {

 if(pjandchina[0].checked)t+=getP(a)+r3

 else if(pjandchina[1].checked)t+=b+getP(a)+r3

 else t+=getP(a)+b+r3

 }

}

return t

}



function getP(n)

{

 for(var i=dd.length-1;i>0;i-=2)

 {

 if(dd[i]*(-1)<=n)return dd[i-1]

 }

 return "?"

}

</script>

<link href="http://www.knowsky.com/style.css" rel="stylesheet" type="text/css">

</head>



<body topmargin="5" leftmargin="0" marginwidth="0" marginheight="0">

<table cellspacing="0" cellpadding="0" width="600" align="center" style="BORDER:#98a7b8 1px solid;" bgcolor="#fcfcfc">

 <tr align="center"> 

 <td height=31 colspan=2><font color="#333333" class="t15"><b>在线将汉字翻译为汉语拼音，可选择翻译中汉字对照</b></font> 

 </td>

 </tr>

 <tr> 

 <td width="70" align="right">原中文：</td>

 <td width="530"> 

 <textarea name="af1" rows="10" id="af1" style="width:98%">“动态网站制作指南”真诚为您服务！</textarea>

 <br>

 <input type=button value="复制" onClick=af1.select();document.execCommand("Copy") name="button">

 <input type=button value="粘贴" onClick=af1.value+=Paste3() name="button">

 <input type=button value="清除" onClick='af1.value=""' name="button">

 </td>

 </tr>

 <tr> 

 <td height="40" colspan="2" align="center" valign="top"> 

 <input id="Ianse_Com_Button" type=button onClick="if (af1.value==''){ alert('请输入需要转换成拼音的中文！');return false;}af2.value=jjfy(af1.value);" value=" 翻译↓ " class="bt_mouseout" onMouseOver="this.className='bt_mouseover'" onMouseOut="this.className='bt_mouseout'" style="padding-top:0px" name="button">

 </td>

 </tr>

 <tr> 

 <td align="right">拼音字符：</td>

 <td> 

 <textarea name="af2" rows="10" id="af2" style="width:98%"></textarea>

 <br />

 <input type=button value="复制" onClick=af2.select();document.execCommand("Copy") name="button">

 <input type=button value="粘贴" onClick=af2.value+=Paste3() name="button">

 <input type=button value="清除" onClick='af2.value=""' name="button">

 </td>

 </tr>

 <tr> 

 <td height="45" align="right">对照方式：</td>

 <td height="45"> <label for="aa1"> 

 <input id="aa1" style="width:16px;height:16px;" name="pjandchina" type="radio" value="radiobutton" checked>

 普通翻译</label>    <label for="aa2"> 

 <input id="aa2" style="width:16px;height:16px;" type="radio" name="pjandchina" value="radiobutton">

 对照（中文在拼音前）</label>    <label for="aa3"> 

 <input id="aa3" style="width:16px;height:16px;" type="radio" name="pjandchina" value="radiobutton">

 对照（中文在拼音后）</label></td>

 </tr>

 <tr> 

 <td height="35" align="right">符号设置：</td>

 <td height="35"> <label for="rcb1"> 

 <input style="width:16px;height:16px;" name="rcb1" type="checkbox" id="rcb1" value="checkbox" checked align="absmiddle" />

 保留中文标点符号</label>   <label for="rcb2"> 

 <input style="width:16px;height:16px;" name="rcb2" type="checkbox" id="rcb2" value="checkbox" checked align="absmiddle" />

 保留字母和回车符号</label>   <label for="rcb3"> 

 <input style="width:16px;height:16px;" name="rcb3" type="checkbox" id="rcb3" value="checkbox" checked align="absmiddle" />

 中文字之间加空格</label></td>

 </tr>

 <tr> 

 <td height=15 colspan=2></td>

 </tr>

</table>



</div>

</body>

</html>

收起

展开全文

JavaScript C C++ C#

html form width,HTML form input width
2021-07-15 01:41:18
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:问题:I have this code below which is a simple ...
收起
HTML标签对应英文全称及中文翻译
2014-01-04 18:07:31
<img src="w3school.jpg" width="104" height="142" /> img:image的缩写，图像， src,source,资源标签是空标签（意味着它没有结束标签，因此这是错误的： </br>）。有换行的作用 Barter rabbet的缩写 ...
收起
Puppeteer v1.5.0 中文翻译
千次阅读 2018-06-29 20:56:54
最近用到了 Puppeteer 这个库，既然用到了这个东西，顺便也就把它的 API给看了一遍，为了加深印象，在看的同时也就顺便翻译了一下，不过这API文档的内容量还是蛮大的，花费了好些时间才看完，有些地方不知道怎么翻译...
收起
汉字在线翻译为拼音
千次阅读 2009-06-05 17:56:00
代码来源于网络：只是学习下它的原理，算法。汉字在线翻译为拼音汉字在线翻译为拼音原中文：请在这输入汉字 if (af1.value==) {M(请输入需要转换成拼音
收起
button input function textbox
WebP API文档 中文翻译
千次阅读 2018-02-10 14:17:46
// Width in pixels. int height ; // Height in pixels. int has_alpha ; // True if the bitstream contains an alpha channel. } VP8StatusCode WebPGetFeatures ( const uint8_t * data , size...
收起
Cocos2d-x 的3D游戏制作官方教程（中文翻译）
千次阅读 2016-01-18 15:13:35
因为只花了半天时间翻译，而且能力有限，各位看官勿喷。本博客虽然水分很足，但是也算是博主的苦劳了，如需转载，请附上本文链接http://blog.csdn.net/cyh_24/article/details/45702343，不甚感激！相信...
收起
Cocos2d-x 3D游戏制作
dw css规则中文翻译,DW-CS5-CSS规则英汉对照表.docx
2021-08-04 05:12:32
字符间距 Vertical-align:垂直对齐 Text-align:水平对齐 Text-indent:文本缩进 White-space:空白 Display:显示四、方块 Width:宽度 Height:高度 Float:浮动 Clear:规定元素的哪一侧不允许出现其他浮动元素 Padding...
收起
CTPN论文翻译——中文版
千次阅读 2018-03-07 18:56:37
文章作者：Tyan ...声明：作者翻译论文仅为学习，如有侵权请联系作者删除博文，谢谢！翻译论文汇总：https://github.com/SnailTyan/deep-learning-papers-translation Detecting Text in Natural Image ...
收起
CTPN
tcpdf开发文档（中文翻译版）
千次阅读 2018-07-18 18:34:09
这个是英文翻译版，我看过作者的文档其实不太友善或者不方便阅读，不如wiki方便后面补充一些，结构性文档翻译这是一部官方网站文档，剩余大部分都是开发的时候和网络总结来的项目官网：https://tcpdf.org/ ...
收起
PEP-8 中文翻译
千次阅读 2014-02-18 00:08:31
尽管逐词逐句都进行过认真推敲，但囿于能力，本文仍有很多不当、甚至错误的翻译；请读者海涵，并敬请指正；联系方式：horin153@msn.com。介绍这篇文档所给出的编码约定，适用于在主要的 Python 发布版本...
收起
pep8
magickwand 中文函数翻译
千次阅读 2008-08-28 09:13:00
magickwand 中文函数翻译ClearDrawingWand — 清除DrawingWand资源ClearMagickWand — 清除MagickWand相关资源ClearPixelIterator — 清除PixelIterator相关资源ClearPixelWand — 清除PixelWand相关资源...
收起
image scheme character alignment object
Awesome WAF 中文翻译、各种绕过手法
千次阅读 2020-01-18 21:13:00
翻译文 https://github.com/0xInfection/Awesome-WAF 绕过手法 fuzz/爆破字典 Seclists/Fuzzing. Fuzz-DB/Attack Other Payloads 可能会被ban ip，小心为妙。正则绕过多少waf 使用正则匹配。黑...
收起
CoppeliaSim用户手册中文翻译版（一）
千次阅读 多人点赞 2020-07-05 18:25:18
CoppeliaSim 用户手册文章目录主要功能历史版本许可证致谢和鸣谢概述1. 用户界面1.1 页面和视图1.2 自定义用户界面1.3 位置/方向操作1.3.1 位置对话框1.3.2 方向对话框1.3.3 使用鼠标移动物体1.4 欧拉角1.5 用户...
收起
Ray Tracing in One Weekend(中文翻译)
千次阅读 多人点赞 2020-09-25 00:22:51
++i) { double r = double(i) / (image_width - 1); double g = double(j) / (image_height - 1); double b = 0.25; int ir = static_cast(255.999 * r); int ig = static_cast(255.999 * g); ...
收起
Python GUI Programming Cookbook 第二版第一章中文翻译
千次阅读 多人点赞 2018-10-04 16:06:34
Python GUI Programming Cookbook 第二版第一章中文翻译 写在最前面的一些话我不是科班出身的程序员，仅仅因为喜欢python而读过一些书。但是我还记得我大学时代学VB的时候，第一课就是创建一个叫“Hello，World...
收起
Python GUI
PEP8中文翻译（转）
千次阅读 2017-05-16 16:16:10
阅读目录 Indentation 缩进和换行 ...翻译: ...This document gives coding conventions for the Python code comprising the standard library in the ... if width == 0 and height == 0 and (color == 'red' or ...
收起
Bootstrap Table 中文文档（完整翻译版）
万次阅读 多人点赞 2017-02-22 13:03:09
表格参数：名称标签类型默认描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。
收起
bootstrap 文档 javascript 前端
In Search of the Holy Grail 寻找圣杯 中文翻译
2020-05-20 15:15:49
基于自己理解的翻译，有一些不必要的语句就删除了。完整原文见：https://alistapart.com/article/holygrail/ 一共三列：一列固定宽度的边栏，可以用于导航栏另一列，可以用于谷歌广告或是网络相册中间列是流动...
收起
css html
caffe的Matlab接口使用说明(中文翻译)
千次阅读 2018-12-19 16:30:01
以下内容介绍了如何使用Matlab去使用caffe, 翻译自http://caffe.berkeleyvision.org/tutorial/interfaces.html#matlab Matlab caffe的Matlab接口叫matcaffe, 程序包放在caffe/matlab中,你可以利用它在你的Matlab...
收起

TextInputLayout 中文翻译

TextInputLayout

XML attributes

android.support.design:counterEnabled

android.support.design:counterMaxLength

android.support.design:errorEnabled

android.support.design:hintAnimationEnabled

android.support.design:hintEnabled

android.support.design:hintTextAppearance

android:hint

Public constructors

TextInputLayout

TextInputLayout

TextInputLayout

Public methods

addView

draw

getCounterMaxLength

getEditText

getError

getHint

getTypeface

isCounterEnabled

isErrorEnabled

isHintAnimationEnabled

isHintEnabled

onSaveInstanceState

refreshDrawableState

setCounterEnabled

setCounterMaxLength

setError

setErrorEnabled

setHint

setHintAnimationEnabled

setHintEnabled

setHintTextAppearance

setTypeface

Protected methods

onLayout

onRestoreInstanceState

Bootstrap Table API 中文版（完整翻译文档）

目录

表的各项(Table options )

列的各项(Column options )

事件(Events)

方法(Methods)

本地化，切换为另一种语言(Localizations)

Next.js v4.1.4 文档中文翻译

如何使用

安装

代码自动分割

CSS

嵌入式样式 Built-in-CSS

内联式样式 CSS-in-JS

静态文件服务

自定义 <head> 头部元素

数据获取及组件生命周期

路由

<Link>

URL 对象

替换 (replace)而非追加(push)路由 url

让组件支持 onClick事件

将 <Link>的 href暴露给其子元素(child)

命令式路由

URL 对象

路由事件

浅层路由

使用高阶函数 HOC

预获取页面 Prefetching Pages

通过 <Link> 组件

通过命令的方式

自定义服务器和路由

异步导入 Dynamic Import

1. 基本用法（同样支持 SSR）

2. 自定义 加载组件

3. 禁止 SSR

4. 一次性加载多个模块

自定义 <Document>

自定义错误处理

使用内置的错误页面

自定义 `<head>` 头部元素

`<Link>`

替换 (`replace`)而非追加(`push`)路由 `url`

让组件支持 `onClick`事件

将 `<Link>`的 `href`暴露给其子元素(`child`)

通过 `<Link>` 组件

1. 基本用法（同样支持 `SSR`）

2. 自定义加载组件

3. 禁止 `SSR`

自定义 `<Document>`

设置一个自定义的构建(`build`)目录

WebP API文档中文翻译

In Search of the Holy Grail 寻找圣杯中文翻译