Это бесплатное и простое руководство, с помощью которого вы, наконец, сможете самостоятельно встроить сетку 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> &nbsp;`
}
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)).

Как это использовать

Нажмите здесь, чтобы раскошелиться или:

Скрипты

Поместите скрипты в папку вместе с 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)