Alter the Appearance (HBS) alter-the-appearance-hbs
Now that the components for the custom comment system in the application directory (https://experienceleague.adobe.com/apps?lang=en) are in place, with a resourceSuperType referencing the default comment system, and the custom Model/View registered, you can edit the implementation.
For a simple demonstration, a visual feature, the avatar shown of the signed-in user who posts a comment, is removed.
Modify the HBS Scripts modify-the-hbs-scripts
Using CRXDE Lite:
-
Open /apps/custom/components/comments/comment/comment.hbs
-
Comment out the tag which includes the avatar for a comment post (~ line 21):
code language-none <!-- <<img class="scf-comment-avatar {{#if topLevel}}withTopLevel{{/if}}" src="{{author.avatarUrl}}"></img> -->
-
-
Open /apps/custom/components/comments/comments.hbs
-
Comment out the tag which includes the avatar for the next comment entry (~ line 44):
code language-none <!-- <img class="scf-composer-avatar" src="{{loggedInUser.avatarUrl}}"></img> -->
-
-
Select Save All
Replicate Custom App replicate-custom-app
After the application has been modified, it is necessary to re-replicate the custom component.
One way to do so is:
-
From the main menu
- Select Tools > Operations > Replication.
- Select Activate Tree.
- Set
Start Pathto/apps/custom. - Deselect Only Modified.
- Select Activate button.
View Modified Comment on Published Sample Page view-modified-comment-on-published-sample-page
Continuing the experience on the publish instance, still signed in as the same user, it is now possible to refresh the page in the publish environment to view the modification to remove the avatar:
Sample Comment Extension Package sample-comment-extension-package
Attached is a package of the custom comments application created in this tutorial.