From a47f2c9c66c0ab732caeb9117423bf4871d0e944 Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Mon, 6 Jan 2025 18:37:07 +0530 Subject: [PATCH] Solve Error: Logging at level (debug GitHub Pages) --- blog/Web-Development-with-Django.md | 268 ---------------------- docs/dsa/algorithms/DivideAndConquer.md | 72 ------ docs/dsa/algorithms/DynamicProgramming.md | 155 ------------- docs/view-engine/EJS.md | 79 ------- docs/view-engine/HBS.md | 86 ------- docs/view-engine/Introduction.md | 20 -- docs/view-engine/PUG.md | 82 ------- docs/view-engine/_category_.json | 8 - 8 files changed, 770 deletions(-) delete mode 100644 blog/Web-Development-with-Django.md delete mode 100644 docs/dsa/algorithms/DivideAndConquer.md delete mode 100644 docs/dsa/algorithms/DynamicProgramming.md delete mode 100644 docs/view-engine/EJS.md delete mode 100644 docs/view-engine/HBS.md delete mode 100644 docs/view-engine/Introduction.md delete mode 100644 docs/view-engine/PUG.md delete mode 100644 docs/view-engine/_category_.json diff --git a/blog/Web-Development-with-Django.md b/blog/Web-Development-with-Django.md deleted file mode 100644 index 33c5b48f7..000000000 --- a/blog/Web-Development-with-Django.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: "Web Development With Django" -authors: [ajay-dhangar, akshitha-chiluka] -tags: - - Django - - Web Development - - Frontend Development - - Backend Development -date: 2024-06-10 ---- - -Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. This guide will introduce you to Django, walk you through setting up a Django project, and cover key features and best practices for developing robust web applications. - - - -## 1. Introduction to Django - -Django is a powerful and flexible framework that follows the "batteries-included" philosophy. It provides many built-in features such as an ORM, authentication, and an admin panel, which make it an excellent choice for web development. - -## 2. Setting Up the Development Environment - -### Installing Python and Django - -Download and install Python from the official website. Use `pip` to install Django: - -```bash -pip install django -``` - -## Setting Up a Virtual Environment - -Create a virtual environment to manage your project's dependencies: - -```bach -python -m venv myenv -source myenv/bin/activate # On Windows, use `myenv\Scripts\activate` -``` - -## Creating a New Django Project - -Start a new Django project using the django-admin command: - -```bash -django-admin startproject myproject -cd myproject -``` - -## 3. Understanding the Django Project Structure - -### Project vs. App - -A Django project is a collection of settings and configurations for an instance of Django, while an app is a web application that does something, like a blog or a poll system. A project can contain multiple apps. - -### Key Files and Directories - -- **manage.py:** A command-line utility for interacting with your project. -- **settings.py:** Configuration settings for your project. -- **urls.py:** URL declarations for your project. -- **wsgi.py and asgi.py:** Entry points for WSGI/ASGI-compatible web servers. - -## 4. Building Your First Django App - -### Creating a New App - -Create a new app within your project: - -```bash -python manage.py startapp myapp -``` - -### Defining Models - -Models are Python classes that define the structure of your database tables. Define a model in `models.py`: - -```python title="myapp/models.py" -from django.db import models - -class Post(models.Model): - title = models.CharField(max_length=100) - content = models.TextField() - published_date = models.DateTimeField(auto_now_add=True) -``` - -### Creating and Applying Migrations - -Generate and apply database migrations to create the tables: - -```bash -python manage.py makemigrations -python manage.py migrate -``` - -### Registering Models in Admin - -Register your models to be managed via the Django admin interface: - -```python title="myapp/admin.py" -from django.contrib import admin -from .models import Post - -admin.site.register(Post) - -``` - -## 5. Django Views and Templates - -### Creating Views -Views handle the logic of your application and return responses. Define a view in `views.py`: - -```python title="myapp/views.py" -from django.shortcuts import render -from .models import Post - -def index(request): - posts = Post.objects.all() - return render(request, 'index.html', {'posts': posts}) -``` - -### URL Routing - -Map URLs to views in `urls.py`: - -```python title="myapp/urls.py" -from django.urls import path -from . import views - -urlpatterns = [ - path('', views.index, name='index'), -] -``` - -### Using Templates - -Create HTML templates in the templates directory. For example, `index.html`: - -```html title="myapp/templates/index.html" - - - - My Blog - - -

Posts

- - - -``` - -### Template Inheritance - -Use template inheritance to avoid redundancy. Create a base template `base.html`: - -```html title="myapp/templates/base.html" - - - - {% block title %}My Site{% endblock %} - - - {% block content %}{% endblock %} - - -``` - -Extend it in `index.html`: - -```html title="myapp/templates/index.html" -{% extends 'base.html' %} -{% block title %}Home{% endblock %} -{% block content %} -

Posts

- -{% endblock %} -``` - -## 6. Working with Forms - -### Creating Forms - -Define a form in `forms.py`: - -```python title="myapp/forms.py" -from django import forms -from .models import Post - -class PostForm(forms.ModelForm): - class Meta: - model = Post - fields = ['title', 'content'] -``` - -### Handling Form Submissions -Handle form submissions in a view: - -```python title="myapp/views.py" -from django.shortcuts import render, redirect -from .forms import PostForm - -def create_post(request): - if request.method == 'POST': - form = PostForm(request.POST) - if form.is_valid(): - form.save() - return redirect('index') - else: - form = PostForm() - return render(request, 'create_post.html', {'form': form}) -``` - -### Form Validation -Django forms automatically handle validation, but you can add custom validation methods to your form fields if needed. - -### Using Django Forms with Models -Django forms can be used directly with models to simplify data handling and validation. - -## 7. Deploying Django Applications - -### Preparing for Deployment - -Configure your Django settings for production, including setting `DEBUG = False` and configuring allowed hosts. - -### Using Gunicorn and Nginx - -Deploy your Django application using Gunicorn as the application server and Nginx as the reverse proxy. - -### Deploying on Popular Platforms (Heroku, AWS, etc.) - -Deploy your Django application on popular platforms like Heroku and AWS, using their specific deployment guides. - -## 8. Advanced Django Features - -### Django REST Framework for APIs - -Use Django REST Framework (DRF) to build RESTful APIs with Django. - -### Caching in Django - -Implement caching to improve the performance of your Django application. - -### Internationalization and Localization - -Add internationalization (i18n) and localization (l10n) support to your Django application to handle multiple languages and regional settings. - -## 09. Best Practices and Tips - -### Code Organization - -Organize your code using best practices for maintainability and readability. - -### Security Best Practices - -Follow Django's security best practices to protect your application from common vulnerabilities. - -### Performance Optimization - -Optimize your Django application for better performance, including database indexing and query optimization. - -## 10. Conclusion - -Django is a powerful and versatile framework that simplifies web development. By following best practices and leveraging Django's built-in features, you can build scalable, secure, and maintainable web applications. diff --git a/docs/dsa/algorithms/DivideAndConquer.md b/docs/dsa/algorithms/DivideAndConquer.md deleted file mode 100644 index 2940ce10a..000000000 --- a/docs/dsa/algorithms/DivideAndConquer.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: Divide&Conquer-in-dsa -title: Divide And Conquer in Data Structures and Algorithms -sidebar_label: Divide And Conqure Algorithm -sidebar_position: 1 -description: "" -tags: - [dsa,data-algorithms , divide&conqure - ] ---- - - - -The divide and conquer algorithm is a problem-solving technique that involves breaking down a complex problem into smaller subproblems, solving them independently, and then combining the solutions to solve the original problem. This approach is particularly useful for solving problems that can be divided into similar, smaller subproblems. - -![Divide & Conquer](image-4.png) -### Steps of the Divide and Conquer Algorithm - -1. **Divide**: The first step is to divide the problem into smaller subproblems. This can be done recursively until the subproblems become simple enough to be solved directly. - -2. **Conquer**: Once the problem is divided into subproblems, solve each subproblem independently. This can be done by applying the same divide and conquer algorithm recursively. - -3. **Combine**: Finally, combine the solutions of the subproblems to obtain the solution to the original problem. This step may involve merging, sorting, or any other operation that combines the subproblem solutions. - -### Example: Merge Sort - -One classic example of the divide and conquer algorithm is the merge sort algorithm. It follows the steps mentioned above to sort an array of elements. - -1. **Divide**: The array is divided into two halves recursively until each subarray contains only one element. - -2. **Conquer**: Each subarray is sorted independently using the merge sort algorithm. - -3. **Combine**: The sorted subarrays are then merged together to obtain the final sorted array. - -The merge sort algorithm has a time complexity of O(n log n) and is widely used for sorting large datasets efficiently. - -### Example: Binary Search - -Another example of the divide and conquer algorithm is the binary search algorithm. It is used to search for a specific element in a sorted array. - -1. **Divide**: The array is divided into two halves, and the middle element is compared with the target element. - -2. **Conquer**: Based on the comparison, the search is continued in either the left or right half of the array recursively. - -3. **Combine**: The search is completed when the target element is found or when the search space is reduced to zero. - -The binary search algorithm has a time complexity of O(log n) and is much more efficient than linear search for large arrays. - -By using the divide and conquer algorithm, complex problems can be efficiently solved by breaking them down into smaller, manageable subproblems. This technique is widely used in various algorithms and data structures in the field of computer science. - - -Applications of Divide and Conquer Approach: -### Following algorithms are based on the concept of the Divide and Conquer Technique: - -- **Binary Search:** The binary search algorithm is a searching algorithm, which is also called a half-interval search or logarithmic search. It works by comparing the target value with the middle element existing in a sorted array. After making the comparison, if the value differs, then the half that cannot contain the target will eventually eliminate, followed by continuing the search on the other half. We will again consider the middle element and compare it with the target value. The process keeps on repeating until the target value is met. If we found the other half to be empty after ending the search, then it can be concluded that the target is not present in the array. -- **Quicksort:** It is the most efficient sorting algorithm, which is also known as partition-exchange sort. It starts by selecting a pivot value from an array followed by dividing the rest of the array elements into two sub-arrays. The partition is made by comparing each of the elements with the pivot value. It compares whether the element holds a greater value or lesser value than the pivot and then sort the arrays recursively. -- **Merge Sort:** It is a sorting algorithm that sorts an array by making comparisons. It starts by dividing an array into sub-array and then recursively sorts each of them. After the sorting is done, it merges them back. -- **Closest Pair of Points:** It is a problem of computational geometry. This algorithm emphasizes finding out the closest pair of points in a metric space, given n points, such that the distance between the pair of points should be minimal. -- **Strassen's Algorithm:** It is an algorithm for matrix multiplication, which is named after Volker Strassen. It has proven to be much faster than the traditional algorithm when works on large matrices. -- **Cooley-Tukey Fast Fourier Transform (FFT) algorithm:** The Fast Fourier Transform algorithm is named after J. W. Cooley and John Turkey. It follows the Divide and Conquer Approach and imposes a complexity of O(nlogn). -- **Karatsuba algorithm for fast multiplication:** It is one of the fastest multiplication algorithms of the traditional time, invented by Anatoly Karatsuba in late 1960 and got published in 1962. It multiplies two n-digit numbers in such a way by reducing it to at most single-digit. - -### Advantages of Divide And Conquer - -- Divide and Conquer tend to successfully solve one of the biggest problems, such as the Tower of Hanoi, a mathematical puzzle. It is challenging to solve complicated problems for which you have no basic idea, but with the help of the divide and conquer approach, it has lessened the effort as it works on dividing the main problem into two halves and then solve them recursively. This algorithm is much faster than other algorithms. -- It efficiently uses cache memory without occupying much space because it solves simple subproblems within the cache memory instead of accessing the slower main memory. -- It is more proficient than that of its counterpart Brute Force technique. -- Since these algorithms inhibit parallelism, it does not involve any modification and is handled by systems incorporating parallel processing. -## Disadvantages of Divide and Conquer -- Since most of its algorithms are designed by incorporating recursion, so it necessitates high memory management. -- An explicit stack may overuse the space. -- It may even crash the system if the recursion is performed rigorously greater than the stack present in the CPU. \ No newline at end of file diff --git a/docs/dsa/algorithms/DynamicProgramming.md b/docs/dsa/algorithms/DynamicProgramming.md deleted file mode 100644 index f397c7131..000000000 --- a/docs/dsa/algorithms/DynamicProgramming.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: DynamicProgramming-in-dsa -title: Dynamic-programming in Data Structures and Algorithms -sidebar_label: Dynamic-Programming Algorithm -sidebar_position: 10 -description: "Dynamic programming is a technique used in computer programming to solve complex problems by breaking them down into smaller overlapping subproblems." -tags: [dsa,data-algorithms , Dynamic-Programming , DP] ---- - -Dynamic programming is a technique used in computer programming to solve complex problems by breaking them down into smaller overlapping subproblems. It is particularly useful when the problem can be divided into smaller subproblems that can be solved independently, and the solution to the larger problem can be constructed from the solutions of the subproblems. - - -![DP](image-10.png) - - -**Approaches in Dynamic Programming** - -There are two main approaches in dynamic programming: - -1. Top-down approach (Memoization): This approach involves breaking down the problem into smaller subproblems and solving them recursively. The solutions to the subproblems are stored in a memoization table to avoid redundant computations. The top-down approach is often implemented using recursion with memoization. - -2. Bottom-up approach (Tabulation): This approach involves solving the subproblems iteratively, starting from the base cases and working towards the larger problem. The solutions to the subproblems are stored in a tabulation table or array. The bottom-up approach is often implemented using loops or iteration. - -Both approaches have their advantages and disadvantages. The top-down approach is more intuitive and easier to implement, but it may suffer from stack overflow issues for large problem sizes. The bottom-up approach is more efficient in terms of space and time complexity, but it may be more challenging to implement for certain problems. - -It is important to choose the appropriate approach based on the problem requirements and constraints. Experimentation and analysis are often required to determine the most suitable approach for a specific problem. - -**Here are the steps to apply dynamic programming:** - -1. Identify the problem: Start by understanding the problem you are trying to solve and determine if it can be broken down into smaller subproblems. - -2. Define the recursive relation: Express the problem in terms of its subproblems. This involves identifying the dependencies between the subproblems and how they can be combined to solve the larger problem. - -3. Create a memoization table or array: This is used to store the solutions to the subproblems as they are computed. It helps avoid redundant computations by storing the results of previously solved subproblems. - -4. Define the base cases: Determine the simplest subproblems that can be solved directly without further recursion. These are the base cases that will terminate the recursive calls. - -5. Implement the recursive function: Write a recursive function that uses the memoization table to solve the subproblems. The function should check if the solution to a subproblem is already available in the table before computing it. - -6. Fill the memoization table: Start solving the subproblems from the base cases and work your way up to the larger problem. As each subproblem is solved, store its solution in the memoization table. - -7. Return the solution: Once all the subproblems have been solved, the solution to the original problem can be found in the memoization table. - -**Dynamic programming has several advantages:** - -- Optimal substructure: Dynamic programming guarantees that the solution to the larger problem is constructed optimally from the solutions of the subproblems. This can lead to more efficient and optimal solutions. - -- Overlapping subproblems: Dynamic programming avoids redundant computations by storing the solutions to subproblems in a memoization table. This can greatly improve the efficiency of the algorithm. - -However, dynamic programming also has some disadvantages: - -- Increased space complexity: The memoization table used in dynamic programming can consume additional memory, especially for problems with a large number of subproblems. This can be a concern in memory-constrained environments. - -- Complexity of identifying subproblems: Identifying the subproblems and their dependencies can be challenging for certain problems. It requires careful analysis and understanding of the problem domain. - -Dynamic programming can be applied to a wide range of problems, including optimization problems, graph algorithms, string algorithms, and more. It is commonly used in areas such as algorithm design, artificial intelligence, and operations research. - - -## Example - -Here's an example of dynamic programming in Python: -#### Codes in Different Languages - - - -```Python showLineNumbers -def fibonacci(n): - if n <= 1: - return n - - a, b = 0, 1 - for _ in range(2, n + 1): - a, b = b, a + b - return b - -# Test the function -print("Fibonacci of 5:", fibonacci(5)) # Output: 5 -print("Fibonacci of 10:", fibonacci(10)) # Output: 55 - -``` - - - ```cpp - #include -using namespace std; -int fibonacci(int n) { - if (n <= 1) return n; - - int a = 0, b = 1, c; - for (int i = 2; i <= n; i++) { - c = a + b; - a = b; - b = c; - } - return b; -} - -int main() { - cout << "Fibonacci of 5: " << fibonacci(5) << endl; // Output: 5 - cout << "Fibonacci of 10: " << fibonacci(10) << endl; // Output: 55 - return 0; -} - ``` - - -``` jsx showLineNumbers -public class Fibonacci { - public static int fibonacci(int n) { - if (n <= 1) return n; - - int a = 0, b = 1, c; - for (int i = 2; i <= n; i++) { - c = a + b; - a = b; - b = c; - } - return b; - } - - public static void main(String[] args) { - System.out.println("Fibonacci of 5: " + fibonacci(5)); // Output: 5 - System.out.println("Fibonacci of 10: " + fibonacci(10)); // Output: 55 - } -} -``` - - - -``` jsx showLineNumbers -function fibonacci(n) { - if (n <= 1) return n; - - let a = 0, b = 1, c; - for (let i = 2; i <= n; i++) { - c = a + b; - a = b; - b = c; - } - return b; -} - -// Test the function -console.log("Fibonacci of 5:", fibonacci(5)); // Output: 5 -console.log("Fibonacci of 10:", fibonacci(10)); // Output: 55 -``` - - - - - -In this example, we use dynamic programming to efficiently compute Fibonacci numbers. We create a memoization table to store the computed values and avoid redundant computations. The recursive function `fib` checks if the value is already computed in the memoization table before computing it. This approach significantly improves the efficiency of the algorithm. - - -Dynamic programming (DP) is a powerful technique used in computer programming to solve complex problems by breaking them down into smaller, overlapping subproblems. It is particularly useful when the problem exhibits optimal substructure and overlapping subproblems. - diff --git a/docs/view-engine/EJS.md b/docs/view-engine/EJS.md deleted file mode 100644 index c4f45ebbd..000000000 --- a/docs/view-engine/EJS.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: ejs-engine -title: Ejs Engine -sidebar_label: Ejs Engine -sidebar_position: 3 -tags: [Express.js,JavaScript,View Engine Introduction,Ejs,Framework] -description: Ejs. ---- - -EJS is a popular template engine that lets you embed JavaScript code directly into your HTML templates. - -### Example using EJS (Embedded JavaScript) - -1. **Install EJS**: First, you need to install EJS using npm if you haven't already: - - ```bash - npm install ejs - ``` - -2. **Setup Express App**: Set up your Express.js application to use EJS as the template engine: - - ```javascript - const express = require('express'); - const app = express(); - const port = 3000; - - // Set EJS as the template engine - app.set('view engine', 'ejs'); - - // Define a route to render a template - app.get('/', (req, res) => { - const data = { - title: 'Express Template Engine Example', - message: 'This is rendered using EJS!' - }; - // Render 'index.ejs' template with the data - res.render('index', data); - }); - - // Start the server - app.listen(port, () => { - console.log(`Server is running on http://localhost:${port}`); - }); - ``` - -3. **Create EJS Template**: Create an `index.ejs` file in the `views` directory (by default, Express looks for templates in the `views` directory) with the following content: - - ```html - - - - <%= title %> - - -

<%= message %>

- - - ``` - - In this template: - - `<%= title %>` and `<%= message %>` are placeholders that will be replaced with the actual data (`data.title` and `data.message`) when rendered by Express. - -4. **Run the Application**: Start your Express application: - - ```bash - node app.js - ``` - - Visit `http://localhost:3000` in your browser, and you should see the rendered HTML page with the message "This is rendered using EJS!". - -### Explanation - -- **Setting the Template Engine**: `app.set('view engine', 'ejs');` sets EJS as the template engine for your Express application. - -- **Rendering a Template**: `res.render('index', data);` renders the `index.ejs` template and replaces placeholders (`<%= %>` tags) with data from the `data` object. - -- **EJS Template Syntax**: In the EJS template (`index.ejs`), `<%= %>` is used to output the value of a variable or expression. - -This example demonstrates the basics of using a template engine (EJS in this case) with Express.js to generate HTML dynamically based on data fetched or processed on the server-side. Template engines are powerful tools for building dynamic web applications efficiently and maintaining clean separation of concerns between server-side logic and presentation. \ No newline at end of file diff --git a/docs/view-engine/HBS.md b/docs/view-engine/HBS.md deleted file mode 100644 index 6dd1f553e..000000000 --- a/docs/view-engine/HBS.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: hbs-engine -title: HBS-engine -sidebar_label: Hbs Engine -sidebar_position: 2 -tags: [Express.js,JavaScript,View Engine Introduction,Handlebars,Framework] -description: Hbs(Handlebars). ---- - -Handlebars is a popular templating engine that allows you to create semantic templates with built-in helpers for common tasks. - -### Example using Handlebars (HBS) Template Engine - - -1. **Install Handlebars**: First, you need to install `express-handlebars`, which is the Handlebars view engine for Express: - - ```bash - npm install express-handlebars - ``` - -2. **Setup Express App**: Configure your Express.js application to use Handlebars as the template engine: - - ```javascript - const express = require('express'); - const exphbs = require('express-handlebars'); - const app = express(); - const port = 3000; - - // Set Handlebars as the template engine - app.engine('.hbs', exphbs({ extname: '.hbs' })); - app.set('view engine', '.hbs'); - - // Define a route to render a template - app.get('/', (req, res) => { - const data = { - title: 'Express Handlebars Example', - message: 'This is rendered using Handlebars!' - }; - // Render 'index' template with the data - res.render('index', data); - }); - - // Start the server - app.listen(port, () => { - console.log(`Server is running on http://localhost:${port}`); - }); - ``` - -3. **Create Handlebars Template**: Create an `index.hbs` file in the `views` directory (by convention): - - ```handlebars - - - - {{ title }} - - -

{{ message }}

- - - ``` - - In this template: - - `{{ title }}` and `{{ message }}` are Handlebars placeholders that will be replaced with the actual data (`data.title` and `data.message`) when rendered by Express. - -4. **Run the Application**: Start your Express application: - - ```bash - node app.js - ``` - - Navigate to `http://localhost:3000` in your browser, and you should see the rendered HTML page with the message "This is rendered using Handlebars!". - -### Explanation - -- **Setting the Template Engine**: - - `app.engine('.hbs', exphbs({ extname: '.hbs' }));` sets Handlebars as the template engine and configures it to use `.hbs` as the file extension for templates. - - `app.set('view engine', '.hbs');` sets `.hbs` as the default file extension for views. - -- **Rendering a Template**: `res.render('index', data);` renders the `index.hbs` template and replaces placeholders (`{{ }}` tags) with data from the `data` object. - -- **Handlebars Template Syntax**: - - `{{ }}` is used to output the value of a variable or expression. - - Handlebars also supports helpers (`{{#if}}, {{#each}}, {{#unless}},` etc.) for more complex logic directly in your templates. - -This example demonstrates how to integrate Handlebars as the template engine in an Express.js application. Handlebars simplifies the creation of dynamic HTML pages by allowing you to focus on the structure and content of your templates while keeping your JavaScript code separate. \ No newline at end of file diff --git a/docs/view-engine/Introduction.md b/docs/view-engine/Introduction.md deleted file mode 100644 index f2e17d31e..000000000 --- a/docs/view-engine/Introduction.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: view-engines -title: View Engine Introduction -sidebar_label: View Engine Introduction -sidebar_position: 1 -tags: [Express.js,JavaScript,View Engine Introduction,Framework] -description: View Engine Introduction. ---- - -Express.js is a popular Node.js web application framework that provides a robust set of features for building web applications and APIs. One of its key features is the ability to use template engines to generate dynamic HTML pages on the server-side. Here’s an explanation and example of using a template engine with Express.js: - -### Template Engines in Express.js - -Template engines allow you to create HTML templates with placeholders for dynamic data, which are then filled in and rendered on the server before being sent to the client's browser. Express.js supports various template engines such as EJS, Handlebars, Pug (formerly Jade), Mustache, etc. These template engines help in separating the presentation logic from the application logic. - -### Famous Engines - -1. Pug (formerly Jade) -2. HBS (Handlebars) -3. EJS (Embedded JavaScript) \ No newline at end of file diff --git a/docs/view-engine/PUG.md b/docs/view-engine/PUG.md deleted file mode 100644 index 03a05c14a..000000000 --- a/docs/view-engine/PUG.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: pug-engine -title: Pug Engine -sidebar_label: Pug Engine -sidebar_position: 1 -tags: [Express.js,JavaScript,View Engine Introduction,Pug,Framework] -description: Pug. ---- - - -Pug is a concise and powerful templating engine that simplifies writing HTML templates with a clean and expressive syntax. - - -### Example using Pug Template Engine - - -1. **Install Pug**: First, you need to install `pug`: - - ```bash - npm install pug - ``` - -2. **Setup Express App**: Configure your Express.js application to use Pug as the template engine: - - ```javascript - const express = require('express'); - const app = express(); - const port = 3000; - - // Set Pug as the template engine - app.set('view engine', 'pug'); - - // Define a route to render a template - app.get('/', (req, res) => { - const data = { - title: 'Express Pug Example', - message: 'This is rendered using Pug!' - }; - // Render 'index' template with the data - res.render('index', data); - }); - - // Start the server - app.listen(port, () => { - console.log(`Server is running on http://localhost:${port}`); - }); - ``` - -3. **Create Pug Template**: Create an `index.pug` file in the `views` directory (by convention): - - ```pug - doctype html - html - head - title= title - body - h1= message - ``` - - In this template: - - `title=` outputs the value of `title` from the `data` object. - - `h1=` outputs the value of `message` from the `data` object. - -4. **Run the Application**: Start your Express application: - - ```bash - node app.js - ``` - - Visit `http://localhost:3000` in your browser, and you should see the rendered HTML page with the message "This is rendered using Pug!". - -### Explanation - -- **Setting the Template Engine**: `app.set('view engine', 'pug');` sets Pug as the template engine for your Express application. - -- **Rendering a Template**: `res.render('index', data);` renders the `index.pug` template and replaces placeholders (`=` tags) with data from the `data` object. - -- **Pug Template Syntax**: - - Pug uses indentation to define the structure of the HTML, which makes it more concise compared to traditional HTML. - - Variables and expressions are embedded directly within the template using `=` for outputting values. - -This example demonstrates how to integrate Pug as the template engine in an Express.js application. Pug's syntax reduces boilerplate and makes it easier to create HTML templates with dynamic content, maintaining the separation of presentation and application logic. \ No newline at end of file diff --git a/docs/view-engine/_category_.json b/docs/view-engine/_category_.json deleted file mode 100644 index 1f612d160..000000000 --- a/docs/view-engine/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "View Engine", - "position": 26, - "link": { - "type": "generated-index", - "description": "View engines allow you to create HTML templates with placeholders for dynamic data, which are then filled in and rendered on the server before being sent to the client's browser. " - } -} \ No newline at end of file