{%{{{ item.name }}}%}
+```
+
+
+
+`by` is exported as a stand-alone function and is named `trackBy`.
+
+```js
+import { trackBy } from "@abp/ng.core";
+
+@Component({
+ template: `
+
+ {%{{{ item.name }}}%}
+
+ `,
+})
+class DemoComponent {
+ list: Item[];
+
+ trackById = trackBy
+ {%{{{ item.tenant.name }}}%}
+
+```
+
+
+
+`byDeep` is exported as a stand-alone function and is named `trackByDeep`.
+
+```js
+import { trackByDeep } from "@abp/ng.core";
+
+@Component({
+ template: `
+
+ {%{{{ item.name }}}%}
+
+ `,
+})
+class DemoComponent {
+ list: Item[];
+
+ trackByTenantAccountId = trackByDeep
+
+````
+
+现在你可以运行应用程序看到结果:
+
+
+
+如果你需要,你也可以仅使用依赖注入系统替换组件[背后的C#类代码](https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Brand/MainNavbarBrandViewComponent.cs)
+
+### 重写主题
+
+正如上所解释的,你可以更改任何组件,layout或c#类. 参阅[主题文档]了解更多关于主题系统的信息.
+
+## 重写静态资源
+
+重写模块的静态资源(像JavaScript,Css或图片文件)是很简单的. 只需要在解决方案的相同路径创建文件,虚拟文件系统会自动处理它.
+
+## 操作捆绑
+
+[捆绑 & 压缩](Bundling-Minification.md) 系统提供了**动态可扩展的** 系统去创建**script**和**style**捆绑. 它允许你扩展和操作现有的包.
+
+### 示例: 添加全局CSS文件
+
+例如APP框架定义了一个**全局样式捆绑**添加到所有的页面(事实上由主题添加layout). 让我们添加一个**自定义样式文件**到这个捆绑文件的最后,我们可以覆盖任何全局样式.
+
+创建在 `wwwroot` 文件夹下创建一个CSS文件
+
+
+
+在CSS文件中定义一些规则. 例如:
+
+````css
+.card-title {
+ color: orange;
+ font-size: 2em;
+ text-decoration: underline;
+}
+
+.btn-primary {
+ background-color: red;
+}
+````
+
+然后在你的[模块](../../Module-Development-Basics.md) `ConfigureServices` 方法添加这个文件到标准的全局样式捆绑包:
+
+````csharp
+Configure
+
+
+````
+
+现在,我们创建一个类实现 `IToolbarContributor` 接口:
+
+````csharp
+public class MyToolbarContributor : IToolbarContributor
+{
+ public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+ {
+ if (context.Toolbar.Name == StandardToolbars.Main)
+ {
+ context.Toolbar.Items
+ .Insert(0, new ToolbarItem(typeof(NotificationViewComponent)));
+ }
+
+ return Task.CompletedTask;
+ }
+}
+````
+
+这个类向 `Main` 工具栏的第一项添加了 `NotificationViewComponent`.
+
+最后你需要将这个贡献者添加到 `AbpToolbarOptions`,在你模块类的 `ConfigureServices` 方法:
+
+````csharp
+ConfigureWell done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
+
+ First Deck
+
+ Ace
+ Here is the content for Ace.
+
+
+
+ Second Deck
+
+ Beta
+ Beta content.
+
+
+
+ Third Deck
+
+ Epsilon
+ Content for Epsilon.
+
+
+
+````
diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md
new file mode 100644
index 0000000000..65327de438
--- /dev/null
+++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md
@@ -0,0 +1,90 @@
+# Collapse
+
+## 介绍
+
+`abp-collapse-body` 是显示和隐藏内容的主要容器. `abp-collapse-id` 用于显示和隐藏内容容器. 可以通过 `abp-button` 和 `a` 标签触发.
+
+基本用法:
+
+````xml
+Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.s