The DevMagazine demo site is the Sitefinity demo project, written in pure MVC and demonstrating Feather functionality and capabilities. The demo site is primarily aimed at frontend developers, as it showcases how they can easily and quickly create any Sitefinity site using intuitive methods for developing UI components.
Click here to browse the DevMagazine web site.
The DevMagazine site is an online magazine where you can read technical articles on IT topics. You can view the demo site on a variety of devices - desktop computers, tablets, and smartphones, as it is designed with using responsive web design methods. Each article on the site is associated to a certain issue that the article attempts to resolve. You have a number of options to filter the articles:
By topics - .NET, Mobile, Testing, Web, etc.
To filter articles by topics, select the topics in the navigation bar.
By issues to which the articles are associated.
To filter the articles by issue, from the navigation bar click Issues and select an issue.
By authors - you can find all articles written by a specific author.
For each article, you can see information about its author - short biography, job title, avatar, etc. To search by author, on the home page scroll and find the Authors section. When you click on the author's image or name, you are redirected to the author's details, which includes all articles written by the author.
The DevMagazine demo site is based on the popular frontend framework Bootstrap. By using the Bootstrap framework, you can build a responsive, mobile-first design and project by taking advantage of Feather's resource packages. Feather uses the Bootstrap framework because of its popularity, but you can built packages with any other frontend framework, for example, SemanticUI or Foundation.
The DevMagazine project consists of three parts - the SitefinityWebApp and a code library - DevMagazine.Core.
DevMagazine.Core - this code library contains generic methods that work with the Sitefinity API.
SitefinityWebApp - as any other Sitefinity application, the SitefinityWebApp contains all the information required for a Sitefinity site plus the Feather resource packages (Bootstrap), and all widget templates.
Similar to any Sitefinity site, the DevMagazine demo site is organized by pages and a page template. The page template is based on the Bootstrap framework, backed by Feather's resource packages. For details, see Feather: Base page templates on layout files. Several Sitefinity pages are created just to serve or preview specific content - Issues, Authors, Topics, etc.
The DevMagazine demo site has fixed navigation to make filtering of the articles by topics easier and the search capabilities faster. As this navigation is part of every page, you drag the Feather Navigation widget on the page template itself. Each topic represents a tag and each article is classified by a tag field. The filtering is achieved by the taxonomy selector provided by Sitefinity Feather. In the selector, you can filter by tags each particular Feather widget, for example News.
Articles represent News items in Sitefinity with a related author and image. Feather provides several ready-to-use content widgets: News, Content Blocks, and Navigation. As articles are representing Sitefinity News items, they are displayed on the site by the Feather News widget. Since there are specific appearance requirements, you replace the template of the widget with a custom one. For details how to do this, see Feather: Modify widget templates.
Similar to any other Sitefinity widget, the News widget in Feather is built to support the Master/Detail functionality. Therefore, two views are used - Index and Details. For more details, see Feather: Implement Master Detail content controllers.
Filtering of articles by topic is achieved by using a taxa selector in the designer of the News widget. For details how to do this, see Feather: Flat taxon selector.
Authors are represented by the dynamic content type Authors. The author's details and information are populated in the corresponding field and the avatar of the author is created by using a related media field - an image. For more details, see Content relations.
To display a list of all the authors on the site, you use the Feather Dynamic content widget. Sitefinity automatically generates separate widgets for each dynamic content type so you only have to change their templates according to the appearance requirements.
Issues in the DevMagazine demo site are also represented by a dynamic content type Issues. Each issue has a Title, IssueNumber, and Description. These fields are standart Short text fields. However, to display the relations between issues and other items, you create several related data items:
You use the generated Issues MVC widget to display a list of issues with paging and issue's details.
Topics are displayed in the navigation bar as items that you can select - .NET, Web, Testing, Cloud, Desktop, Mobile. Each topic leads to a list of related articles. Topics represent Sitefinity pages with News widgets on each of them. You can filter each News widget by tags using the tag selector in the designer.
The DevMagazine provides search capability, as well, via the Search button next to the Navigation bar. Once you hit the Enter key, the window location is redirected to the Results page. The search functionality is achieved by using combination of build-in Feather widgets - SearchBox and SearchResults. These widgets utilize the Sitefinity Search engine and enhance its capabilities and speed.
As any website nowadays, the DevMagazine demo site provides a social share widget. In it you can see two different approaches for displaying social share buttons:
Sitefinity CMS license
.NET Framework 4.5
Visual Studio 2012
Microsoft SQL Server Express and SQL Server 2008R2 or later versions
NOTE: If you do not have an SQL Server Express installed on your computer, you can download it from the Microsoft official site.
Clear the NuGet cache files. To do this:
You need to restore the database files to your SQL Server. To do this:
To login to Sitefinity backend, use the following credentials:
Back To Top