Customizing the frontpage text in DSpace 8 is straightforward. Follow these steps to update the text and rebuild the production environment.
Step 1: Locate the Template File
The frontpage template is located in:
[dspace-angular-frontend]/src/themes/dspace/app/home-page/home-news/home-news.component.html
Step 2: Backup and Edit the File
Open a terminal and switch to superuser:
sudo su
Backup the original file:
sudo cp /home/dspace/dspace-angular-dspace-8.0/src/themes/dspace/app/home-page/home-news/home-news.component.html \
/home/dspace/dspace-angular-dspace-8.0/src/themes/dspace/app/home-page/home-news/original_home-news.component.html
Edit the file using a text editor like Vim or Nano:
sudo vim /home/dspace/dspace-angular-dspace-8.0/src/themes/dspace/app/home-page/home-news/home-news.component.html
Step 3: Update the Text
<div class="background-image-container mt-ncs">
<div class="container">
<div class="jumbotron jumbotron-fluid">
<div class="d-flex flex-wrap">
<div>
<h1 class="display-3">Devagiri CMI Public School E-Library</h1>
<p class="lead">Explore knowledge, inspiration, and possibilities at our digital library. At DCMIPS, we empower students with resources that spark curiosity, foster creativity, and nurture lifelong learning. Access online books, school handbooks, magazines, and past Class X and XII board exam papers.</p>
</div>
</div>
</div>
</div>
<picture class="background-image">
<source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
<source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">
<img alt="" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
</picture>
<small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
</div>
Replace banner with your own
cd /home/dspace/dspace-angular-
mv banner.webp o_banner.webp
cp banner.webp /home/dspace/dspace-angular-
mv banner.webp o_banner.webp
cp banner.webp /home/dspace/dspace-angular-
Step 4: Rebuild the Production Environment
Navigate to the DSpace Angular directory:
cd /home/dspace/dspace-angular-dspace-8.0/config
Run the production build command:
yarn run build:prod
Step 5: Refresh the Home Page
After the build completes, refresh the DSpace homepage to view your changes.
