Integrating a cross-platform portfolio into xLog

xLog has recently launched a portfolio feature. Let's hear from our developers @DIYgod!

For a Long Time#

I have always viewed personal blogs as an ideal "personal website" to showcase one’s IP profile rather than just a platform for publishing articles. I started using WordPress to create a website during my learning phase of coding in early 2014, “Hello, World!”. After delving into the front-end field, I switched to Hexo in 2017, “Made Minor Modifications”. Subsequently, with the ascension of Web3, I adopted xLog in 2022, “The First Open Source Blockchain-based Blogging System, xLog”. However, one question remained constant irrespective of the blogging system I chose - how to elegantly compile and exhibit my works published on other platforms, preferably with direct data display from these third-party sites. I previously published content in the form of articles with attached links, but this approach wasn’t elegant and the reader had to click further links.

Inspiration Striking#

While learning about DaVinci video editing, I discovered the website of Film Typhoon, who listed their bilibili videos using an external link method, including information about title, cover image, release time, and number of views. This discovery ignited an idea in my mind - I could design a portfolio on xLog, showcasing all my works from various platforms. This compilation could feature my videos on bilibili, repositories maintained on GitHub, podcasts on Xiaoyuzhou, and even my artwork on Pixiv. In this way, when people visit my blog, they would witness more than articles. They would get a glimpse into diverse facets of my life, bringing my blog closer to being a true ‘personal website’.

Embarking on It#

Once the idea sprouted, its execution was straightforward.

I optimized the xLog dashboard and categorically defined entries as posts, pages, and portfolios to avoid any user confusion due to the increase in categorization.

I designed a new editing page, keeping it different from articles and pages, retaining only the cover, title, summary, and publication date, with an additional field for external links.

I incorporated a feature to auto-fill portfolio information, alleviating the burden of manual input. This was made possible by fetching the Open Graph info of the link, involving fields like og:image og:title og:description og:date.

The portfolios were exhibited on the homepage and a separate portfolio page.

As for data collection and display, considering my familiarity with "stealing data" from my experiences as an RSSHub author, this was an easy part for me. Firstly, I crawled data from platforms like Bilibili, Xiaoyuzhou, GitHub, Pixiv, and Twitter, displaying the number of views and comments on xLog cards. Additionally, to consider the potential pressure and anti-scraping measures of the source sites, I especially set up a satisfactorily long cache for data.

Now, this handy little function is implemented and you can check out my portfolio page. Are you inspired to create your personal portfolio on xLog?