generated from cotes2020/chirpy-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change: move subscription box to related post section
- Loading branch information
1 parent
29c07ee
commit c9a515b
Showing
2 changed files
with
180 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| <!-- substack subscription box --> | ||
|
|
||
| <style> | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview { | ||
| display: flex !important; | ||
| flex-direction: column !important; | ||
| justify-content: center !important; | ||
| margin-top: 10px !important; | ||
| margin-bottom: 20px !important; | ||
| padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important; | ||
| max-width: none !important; | ||
| border-radius: 6px !important; | ||
| box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview, | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview *{ | ||
| box-sizing: border-box !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading { | ||
| width: 100% !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5{ | ||
| margin-top: 0 !important; | ||
| margin-bottom: 0 !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field { | ||
| margin-top: 20px !important; | ||
| width: 100% !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input { | ||
| width: 100% !important; | ||
| height: 40px !important; | ||
| border-radius: 6px !important; | ||
| border: 2px solid #e9e8e8 !important; | ||
| background-color: #fff !important; | ||
| outline: none !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input { | ||
| color: #000000 !important; | ||
| font-family: "Montserrat" !important; | ||
| font-size: 14px !important; | ||
| font-weight: 400 !important; | ||
| line-height: 20px !important; | ||
| text-align: center !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder { | ||
| color: #000000 !important; | ||
| opacity: 1 !important; | ||
| } | ||
|
|
||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:-ms-input-placeholder { | ||
| color: #000000 !important; | ||
| } | ||
|
|
||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::-ms-input-placeholder { | ||
| color: #000000 !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button { | ||
| margin-top: 10px !important; | ||
| width: 100% !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button { | ||
| width: 100% !important; | ||
| height: 40px !important; | ||
| border: 0 !important; | ||
| border-radius: 6px !important; | ||
| line-height: 0px !important; | ||
| } | ||
| .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button:hover { | ||
| cursor: pointer !important; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <div class="followit--follow-form-container" attr-a attr-b attr-c attr-d attr-e attr-f> | ||
| <div data-v-1bbcb9ec="" class="preview-heading"><h5 data-v-1bbcb9ec="" | ||
| style="text-transform: none !important; font-family: Arial; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center;"> | ||
| Subscribe to get new posts like this by email | ||
| </h5></div> | ||
| <iframe src="https://adarshd.substack.com/embed" width="100%" height="100%" | ||
| style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe> | ||
| </div><br/> | ||
|
|
||
|
|
||
| <!-- Recommend the other 3 posts according to the tags and categories of the current post. --> | ||
|
|
||
| <!-- The total size of related posts --> | ||
| {% assign TOTAL_SIZE = 3 %} | ||
|
|
||
| <!-- An random integer that bigger than 0 --> | ||
| {% assign TAG_SCORE = 1 %} | ||
|
|
||
| <!-- Equals to TAG_SCORE / {max_categories_hierarchy} --> | ||
| {% assign CATEGORY_SCORE = 0.5 %} | ||
|
|
||
| {% assign SEPARATOR = ':' %} | ||
|
|
||
| {% assign match_posts = '' | split: '' %} | ||
|
|
||
| {% for category in page.categories %} | ||
| {% assign match_posts = match_posts | push: site.categories[category] | uniq %} | ||
| {% endfor %} | ||
|
|
||
| {% for tag in page.tags %} | ||
| {% assign match_posts = match_posts | push: site.tags[tag] | uniq %} | ||
| {% endfor %} | ||
|
|
||
| {% assign last_index = match_posts.size | minus: 1 %} | ||
| {% assign score_list = '' | split: '' %} | ||
|
|
||
| {% for i in (0..last_index) %} | ||
| {% assign post = match_posts[i] %} | ||
|
|
||
| {% if post.url == page.url %} | ||
| {% continue %} | ||
| {% endif %} | ||
|
|
||
| {% assign score = 0 %} | ||
|
|
||
| {% for tag in post.tags %} | ||
| {% if page.tags contains tag %} | ||
| {% assign score = score | plus: TAG_SCORE %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% for category in post.categories %} | ||
| {% if page.categories contains category %} | ||
| {% assign score = score | plus: CATEGORY_SCORE %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% if score > 0 %} | ||
| {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %} | ||
| {% assign score_list = score_list | push: score_item %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% assign index_list = '' | split: '' %} | ||
|
|
||
| {% if score_list.size > 0 %} | ||
| {% assign score_list = score_list | sort | reverse %} | ||
| {% for entry in score_list limit: TOTAL_SIZE %} | ||
| {% assign index = entry | split: SEPARATOR | last %} | ||
| {% assign index_list = index_list | push: index %} | ||
| {% endfor %} | ||
| {% endif %} | ||
|
|
||
| {% assign relate_posts = '' | split: '' %} | ||
|
|
||
| {% for index in index_list %} | ||
| {% assign i = index | to_integer %} | ||
| {% assign relate_posts = relate_posts | push: match_posts[i] %} | ||
| {% endfor %} | ||
|
|
||
| {% if relate_posts.size > 0 %} | ||
| <aside id="related-posts" aria-labelledby="related-label"> | ||
| <h3 class="mb-4" id="related-label"> | ||
| {{- site.data.locales[include.lang].post.relate_posts -}} | ||
| </h3> | ||
| <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"> | ||
| {% for post in relate_posts %} | ||
| <article class="col"> | ||
| <a href="{{ post.url | relative_url }}" class="post-preview card h-100"> | ||
| <div class="card-body"> | ||
| {% include datetime.html date=post.date lang=include.lang %} | ||
| <h4 class="pt-0 my-2">{{ post.title }}</h4> | ||
| <div class="text-muted"> | ||
| <p> | ||
| {% include no-linenos.html content=post.content %} | ||
| {{ content | markdownify | strip_html | truncate: 200 | escape }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </article> | ||
| {% endfor %} | ||
| </nav> | ||
| </aside> | ||
| <!-- #related-posts --> | ||
| {% endif %} |