Это бесплатное и простое руководство, с помощью которого вы, наконец, сможете самостоятельно встроить сетку Medium Grid на свой веб-сайт, не беспокоясь о том, что ваша личная информация будет упакована сторонними API.
После утомительного поиска инструментов для встраивания носителя в конкретный веб-сайт я решил, что должен написать свой собственный, потому что в настоящее время вы не доверяете какому-либо случайному API, особенно когда вам нужно передать свою личную информацию. . Итак, это все. Я пишу и создаю это, чтобы помочь всем, кто, как и я, боролся за его достижение. Во-первых, спасибо (Встроить Medium как блог на свой сайт… | by Sabesan Sathananthan | DataDrivenInvestor), который первым создал скрипт. Позже я построил современный на его основе.
var yourString = item.description.replace(/<img[^>]*>/g,""); //replace with your string. yourString = yourString.replace('h4', 'p'); yourString = yourString.replace('h3', 'p'); var maxLength = 120; // maximum number of characters to extract //trim the string to the maximum length var trimmedString = yourString.substr(0, maxLength); //re-trim if we are in the middle of a word trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))) display += `<p class="card-text">${trimmedString}...</p>`;
Часть описания изменения может столкнуться с проблемами, особенно когда в первых 120 текстах отображаются элементы, отличные от текста. Я удалил его и заменил категориями в RSS. (используйте http://jsonviewer.stack.hu/, чтобы упростить проверку json-файла)
display += ' <p>' var categories = item["categories"]; for (var i=0; i<categories.length; i++){ display += ` <a href="#"><i>#${categories[i]}</i></a> ` } display += ' </p>'
Помимо этого, я также изменил нумерацию страниц и решил проблему с неподходящим миниатюрным изображением.
.medium-card span { padding: 8px 8px 8px 8px; } /* https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image */ .medium-card span img { width: 200px; height: 200px; object-fit: cover; /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */ object-position: center; /* Center the image within the element */ min-height: 100%; min-width: 100%; }
Короче говоря. Вы можете найти демо здесь и как это выглядит на моем сайте (Hung, Chien-Hsiang (chienhsiang-hung.github.io)).
Как это использовать
Нажмите здесь, чтобы раскошелиться или:
Скрипты
- CS — EmbeddingMedium.css
- JS — EmbeddingMedium.js
Поместите скрипты в папку вместе с index.html
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="asset/cs/EmbeddingMedium.css">
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="asset/js/EmbeddingMedium.js"></script>
тело
<div> <!-- EmbeddingMedium --> <div class="row" id="jsonContent"></div> <div id="pagin"></div> </div>
GitHub: chienhsiang-hung/embed-medium-blog-on-website (github.com)