Serendipity96 commented on issue #607:
URL: https://github.com/apache/apisix-website/issues/607#issuecomment-940645230


   I have designed a plan for the blog issue raised above. 
   First, let me briefly describe my plan: I have divided APISIX related 
material into two categories, one is blog and the other is video. Blogs and 
videos will be added tags, so that everyone can easily find the information 
according to his or her needs.
   
   
![image](https://user-images.githubusercontent.com/23514812/136888944-f16584c9-cb2f-4f42-8dc4-a0389e695a70.png)
   
   APISIX related materials are divided into two categories, one is articles 
and the other is videos.
   **description**:
   Click on the navigation bar `blog` to enter the page. By default, select 
[Articles] category.
   Click the [Article] [Video] tab to switch to the corresponding page.
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2 
class="heading-h2">1.1 Article List Page
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Classification
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">Under the article tab, perform secondary classification. The following 
are all classifications:
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   
   Classification | Description
   -- | --
   Latest | The time sequence is reversed, the latest published articles are 
placed at the top, and all articles are listed.
   Tech | Technical solution, implementation principle, source code 
interpretation, architecture design type articles
   User Case | User case
   Best Practices | Collaboration with other communities/technologies to run 
APISIX on other platforms, eg: Rancher × APISIX,
   Weekly Report | Community weekly report
   Events | Event previews migrated from the Events page
   Release | APISIX release, feature articles, and release logs
   Easy | Easy article
   Medium | Medium article
   Hard | Hard Articles
   
   </div>
   
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2>
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Article Introduction
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   </div>
   
   The article introduction includes:
   - Title
   - Author name
   - Article introduction
   - tags
   - Release time, reading time
   
   To sum up, the content is not much different from the following screenshots, 
mainly add the cover picture.
   
   
![image](https://user-images.githubusercontent.com/23514812/136889427-d3cf5eae-8184-4c7d-983d-6df79f76aa7e.png)
   
   The purpose of adding a cover image:
   - Display corporate case logo
   - Improve the aesthetics of the article list page
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2>
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Pagination
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   </div>
   
   Add a pagination button at the bottom of the article list.
   
   
![image](https://user-images.githubusercontent.com/23514812/136889499-fc32121d-20e9-41cc-8efb-15e9fc29015c.png)
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2>
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Label
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   </div>
   Remove recent posts and change to tags collection Article tag collection.
   
   **description**:
   
   Click on a tag, the page will select the "latest" category by default, and 
display the articles under the tag, and the paging button will be displayed at 
the bottom.
   
   Tag only supports selecting one at a time.
   
   **Example 1**: In the user case, select Ingress and take the intersection of 
the two.
   
   
![image](https://user-images.githubusercontent.com/23514812/136889689-8cddd5dc-8129-4ddb-8664-1d4eaf2399c3.png)
   
   **Example 2**: Under Weekly Report, select Ingress, no releated content, so 
show the content of the article classification first, that is, the Weekly 
Report list.
   
   
![image](https://user-images.githubusercontent.com/23514812/136889865-e822ae5c-f1ca-4904-84ff-f4973b6660a6.png)
   
   
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2 
class="heading-h2">1.2 Article Details Page
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   
   
   No modified features.
   - Keep the previous and subsequent article recommendation buttons at the 
bottom.
   - Keep the bottom Tags to click and jump to the corresponding category.
   - Still keep the latest release on the left as a recommendation.
   
   
![image](https://user-images.githubusercontent.com/23514812/136890100-9415cde9-e1c9-4e57-9cea-c51121a4292f.png)
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2 
class="heading-h2">2.1 Video List Page
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;">Existing videos on youtube site, on twitter, ApacheCon video on API7 
website.
   </div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;"><h3 class="heading-h3">Classification
   </h3></div><div data-zone-id="0" data-line-index="3" style="white-space: 
pre;">
   </div>
   
   Classification | Description
   -- | --
   Latest | The time sequence is reversed, the latest published articles are 
placed at the top, and all articles are listed.
   Tech | Technical solution, implementation principle, source code 
interpretation, architecture design type videos
   User Case | user case
   Best Practices | Collaboration with other communities/technologies to run 
APISIX on other platforms, eg: Rancher × APISIX,
   Events | Like ApacheCon
   Release | APISIX release, function introduction videos
   Easy |  Easy videos
   Medium | Medium videos
   Hard | Hard videos
   
   
![image](https://user-images.githubusercontent.com/23514812/136890454-61b73699-35ee-438f-abbf-e917c1f0c084.png)
   
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2>
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Video Introduction
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   </div>
   
   - Video Cover
   - Video duration
   - Title
   - Release time
   Example:
   
   
![image](https://user-images.githubusercontent.com/23514812/136890539-eb75131c-74ba-4d42-a68c-448198e3b638.png)
   
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2>
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;"><h3 class="heading-h3">Pagination
   </h3></div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="3" style="white-space: pre;">
   </div>
   Pagination
   Add a pagination button at the bottom of the video list.
   
   
![image](https://user-images.githubusercontent.com/23514812/136890577-4aeaabbe-dbb6-4e84-8616-64c1134aa05a.png)
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2 
class="heading-h2">2.2 Video Details Page
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;"><h3 class="heading-h3">Classification
   </h3></div><div data-zone-id="0" data-line-index="3" style="white-space: 
pre;">
   </div>
   
   - Video Title
   - Video release date
   - Video tag
   
   
![image](https://user-images.githubusercontent.com/23514812/136890690-9a94f15c-ea0f-4ace-b3b7-f869f55405a0.png)
   
   
   <div data-zone-id="0" data-line-index="0" style="white-space: pre;"><h2 
class="heading-h2">3.1 Search 
   </h2></div><div data-zone-id="0" data-line-index="1" style="white-space: 
pre;">
   </div><div data-zone-id="0" data-line-index="2" style="white-space: 
pre;"><h3 class="heading-h3">
   </h3></div><div data-zone-id="0" data-line-index="3" style="white-space: 
pre;">
   </div>
   
   
   
![image](https://user-images.githubusercontent.com/23514812/136890802-22e1a09b-fb62-4cfe-8070-43c067f52715.png)
   
   
![image](https://user-images.githubusercontent.com/23514812/136890789-bfb12fbf-a692-4bad-9aa5-184fc6ff3b4b.png)
   
   After adding the video, can the search bar find the video and support 
jumping?
   
   @juzhiyuan @1502shivam-singh @yzeng25 What do you think? Looking forward to 
your feedback, thanks.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


Reply via email to