Перевод Документации:¶

Краткий справочник для быстрого доступа¶

Links с target:_blank¶

[Links](https://sait.net/interes){ target=_blank }

teg: Images¶

mkdocs.yml:

markdown_extensions:
  - attr_list
  - md_in_html
  - pymdownx.blocks.caption


plugins:
  - glightbox # увеличение картинок

requirements.txt

# добавить в файл requirements.txt для деплоя
mkdocs-glightbox

списки атрибутов

Варинты использования:¶

leftright

![Image title](https://dummyimage.com/600x400/000/aaa){ width="300" align=left }

какойто текст

![Image title](https://dummyimage.com/600x400/000/aaa){ width="300" align=right }

какойто текст

Изображение с подписью - figure:

<figure markdown="span">
  ![Image title](https://dummyimage.com/600x400/){ width="300" }
  <figcaption>Image caption figcaption</figcaption>
</figure>

Изображение с подписью - markdown:

![Image title](https://dummyimage.com/600x400/){ width="300" }
/// caption
Image caption
///

для больших картинок

![Image title](https://dummyimage.com/600x400/){ loading=lazy }

Блоки контента:¶

Закладки с контентом

=== "Feature enabled"

    [![Linked content tabs enabled]][Linked content tabs enabled]

=== "Feature disabled"

    [![Linked content tabs disabled]][Linked content tabs disabled]

  [instant loading]: ../setup/setting-up-navigation.md#instant-loading
  [Linked content tabs enabled]: ../assets/screenshots/content-tabs-link.png
  [Linked content tabs disabled]: ../assets/screenshots/content-tabs.png

Пример:

=== "nvidia-control1"
    ![nvidia-control1](../img/GPU/nvidia-blender0.png)
=== "nvidia-control2"
    ![nvidia-control2](../img/GPU/nvidia-blender1.png)
=== "nvidia-control3"
    ![nvidia-control3](../img/GPU/nvidia-blender2.png)
=== "nvidia-control4"
    ![nvidia-control4](../img/GPU/nvidia-blender3.png)

nvidia-control1nvidia-control2nvidia-control3nvidia-control4

Chat for Web¶

В разработке!

Step 1: Create a Custom MkDocs Theme¶

Create a new theme directory: If you don't already have one, create a themes folder in your MkDocs project root.

Create a custom_theme.py file:

from mkdocs import themes

class CustomTheme(themes.base.Theme):
    def render(self, page):
        return super().render(page)

This will allow you to customize the HTML templates.

Step 2: Create an HTML Template¶

Create a templates folder within your theme directory.

Add a custom base.html template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ pathto Static }}/custom.css" />
</head>
<body>
    <!-- Your base HTML structure here -->
    <div class="container">
        {{ super() }}
    </div>
</body>
</html>

This template will serve as the base for all MkDocs pages.

Step 3: Add Chatbot Interface to Template¶

Include the chatbot HTML structure within your base.html:

<div class="chat-container">
    <div class="floating-sidebar">
        <button onclick="openChat()" style="width: 100%; margin-top: 20px;">Start Chat</button>
    </div>

    <!-- Modal overlay -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="chat-modal">
            <!-- Chat header -->
            <div class="chat-header">
                <h2>Chat Bot</h2>
                <button onclick="closeChat()" style="float: right; cursor: pointer;">×</button>
            </div>

            <!-- Messages container -->
            <div class="messages-container">
                <!-- Messages will be added here -->
            </div>

            <!-- Input field -->
            <div class="input-field">
                <textarea id="messageInput" rows="3" placeholder="Type your message..."></textarea>
            </div>

            <!-- Send button -->
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
</div>

Step 4: Add CSS Styling¶

Create a custom.css file in your theme directory:

/* Style for the floating sidebar */
.chat-container .floating-sidebar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style for the modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

/* Style for the chat modal */
.chat-modal {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
}

/* Style for messages container */
.messages-container {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 10px;
}

/* Style for input field */
.input-field {
    width: 100%;
}

#messageInput {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

/* Style for send button */
.send-button {
    background-color: blue;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

Step 5: Add JavaScript Functions¶

Modify the chatbot JavaScript to work within MkDocs: ```javascript // Open chat modal function openChat() { document.getElementById('modalOverlay').style.display = 'flex'; }

// Close chat modal function closeChat() { document.getElementById('modalOverlay').style.display = 'none'; }

// Send message to the bot function sendMessage() { const input = document.getElementById('messageInput'); const message = input.value.trim();

   if (message) {
       addMessage(message, 'user');
       input.value = '';

       setTimeout(() => {
           addMessage('This is a simulated response from the chatbot.', 'bot');
       }, 1000);
   }

}

// Add message to the container with timestamp function addMessage(text, sender) { const messagesContainer = document.querySelector('.messages-container'); const time = new Date().toLocaleTimeString();

   const messageDiv = document.createE