Article directory
- 19. Content Fragment (content fragment)
-
- Create ContentFragment
- Populate data in ContentFragment
- Using ContentFragment in components
- Export ContentFragment as JSON file
- ContentFragment common operations
-
- version comparison
19, Content Fragment (content fragment)
At present, most websites contain bottom link blocks and various static content blocks. In AEM, the same can be achieved by using ContentFragment.
Create ContentFragment
Open the Content Fragment Models configuration page
Enter the WKND folder, click the Create button to create a new ContentFragment
Fill in the title, save and open ContentFragment for editing
Drag the data type component on the right to the content area on the left and set the properties. After setting, click the Save button to save
Fill data in ContentFragment
After the ContentFragment is created, you need to fill in the data and open the Assets page
Enter the Files directory
Enter the WKND Site directory
Click the Create button to create the ContentFragment directory
Enter the ContentFragment directory, click the Create button to create a ContentFragment asset
Click on the newly created ContentFragment asset to fill in the data
- The red box No. 1 marks different variable branches, fills in different data for different branches, and selects different branches to see different data
- The No. 2 red box is to fill the previously created ContentFragment property with data
Using ContentFragment in components
Open the CRXDE page and create a new component contentfragmentdemo
Fill in component properties
- componentGroup = Steven Group, the group to which the component belongs
- jcr:title = contentfragmentdemo, component name
- sling:resourceSuperType = core/wcm/components/contentfragment/v1/contentfragment, the path of the parent component inherited by the component
Open the Steven page, filter components by group name, and select the contentfragmentdemo component
Double-click the component to open the component dialog box, configure the ContentFragment path, and create the ContentFragment in the asserts directory
- Single Text Element, display only one text attribute in the component
- Multiple Elements, display multiple attribute information
- Elements, select the attributes to be displayed in the component
- Variation, select the ContentFragment branch to display
View the effect
In this way, content fragments can be displayed on different pages according to different branches.
Export ContentFragment as a JSON file
ContentFragment supports json export by default, visit the address localhost:4502/api/assets/wknd/content-fragment/content-fragment-demo-1.json to see all the information of Content Fragment Demo Steven
{<!-- -->
"links": [
{<!-- -->
"rel": [
"self"
],
"href": "http://localhost:4502/api/assets/wknd/content-fragment/content-fragment-demo-1.json"
},
{<!-- -->
"rel": [
"parent"
],
"href": "http://localhost:4502/api/assets/wknd/content-fragment.json"
}
],
"class": [
"assets/asset"
],
"actions": [
{<!-- -->
"method": "DELETE",
"name": "delete",
"href": "http://localhost:4502/api/assets/wknd/content-fragment/content-fragment-demo-1",
"title": "Delete"
},
{<!-- -->
"method": "PUT",
"name": "update-fragment",
"href": "http://localhost:4502/api/assets/wknd/content-fragment/content-fragment-demo-1",
"type": "application/json",
"title": "Update Content Fragment"
}
],
"properties": {<!-- -->
"metadata": {<!-- -->
},
"created": 1679474133606,
"description": "",
"title": "Content Fragment Demo Steven",
"contentFragment": true,
"createdBy": "admin",
"elementsOrder": [
"name",
"age",
"male",
"brithday"
],
"elements": {<!-- -->
"brithday": {<!-- -->
"variationsOrder": [
"zhao"
],
"translatable": false,
":type": "calendar",
"variations": {<!-- -->
"zhao": {<!-- -->
":type": "calendar",
"dataType": "calendar",
"description": "",
"title": "Zhao",
"multiValue": false,
"value": 1676592000000
}
},
"dataType": "calendar",
"title": "BrithDay",
"multiValue": false,
"value": 1676419200000
},
"name": {<!-- -->
"variationsOrder": [
"zhao"
],
"translatable": true,
":type": "string",
"variations": {<!-- -->
"zhao": {<!-- -->
":type": "string",
"dataType": "string",
"description": "",
"title": "Zhao",
"multiValue": false,
"value": "Zhao"
}
},
"dataType": "string",
"title": "Name",
"multiValue": false,
"value": "Steven"
},
"age": {<!-- -->
"variationsOrder": [
"zhao"
],
"translatable": false,
":type": "long",
"variations": {<!-- -->
"zhao": {<!-- -->
":type": "long",
"dataType": "long",
"description": "",
"title": "Zhao",
"multiValue": false,
"value": 33
}
},
"dataType": "long",
"title": "Age",
"multiValue": false,
"value": 32
},
"male": {<!-- -->
"variationsOrder": [
"zhao"
],
"translatable": false,
":type": "boolean",
"variations": {<!-- -->
"zhao": {<!-- -->
":type": "boolean",
"dataType": "boolean",
"description": "",
"title": "Zhao",
"multiValue": false,
"value": true
}
},
"dataType": "boolean",
"title": "Male",
"multiValue": false,
"value": true
}
},
"name": "content-fragment-demo-1",
"modified": 1679474310486,
"modifiedBy": "admin",
"cq:model": {<!-- -->
"path": "/conf/wknd/settings/dam/cfm/models/content-fragment-demo"
},
"srn:paging": {<!-- -->
"total": 0,
"offset": 0,
"limit": 20
}
}
}
ContentFragment common operations
Version comparison
Find the tab of Content Fragment Demo Steven in the assets and select it, click the view button in the upper left corner to select Timeline, and the version record will appear on the left
Select one of the versions, you can fill in the Label and Comment, and there are two buttons Revert to this Version (back to this version) and Compare to Current (compared with the current version)
Click the Compare button to jump to the comparison page, and the comparison page will show the difference between the two versions
