Integrate a cross-platform portfolio into your blog.

For a Long Time#

I have always regarded my personal blog as an ideal platform to showcase my personal IP, rather than just a platform for publishing articles. In the beginning of 2014, when I started learning programming, I used WordPress to build my website, titled "Hello, World!" 《世界，你好！》; After diving into front-end development, in 2017, I switched to Hexo 《做了一点微小的改动》; After the rise of Web3 in 2022, I switched to xLog 《第一个开源链上博客系统 xLog》. However, no matter which blogging system I used, there has always been one problem: how to elegantly collect and showcase the works I have published on other platforms, preferably directly displaying data from external sites. Previously, I usually published my works in the form of articles and included links in the articles. However, this approach is obviously not elegant enough, and readers still need to click on the links to navigate.

Inspiration Strikes#

While studying DaVinci Resolve editing, I discovered the website of Film Hurricane 影视飓风, which lists their videos published on Bilibili through external links, including titles, cover images, release dates, and view counts. This discovery inspired me. I realized that I could create a portfolio on xLog that showcases my works from various platforms, including videos I have published on Bilibili, repositories I maintain on GitHub, podcasts I participate in, and even artworks I create on Pixiv. This way, when people visit my blog, they will not only see articles but also a more diverse and comprehensive representation of me, making my blog more like a true "personal website."

Getting Started#

Once the idea emerged, implementation became simple.

I optimized and categorized the backend of xLog: articles, pages, and portfolios, to eliminate any potential confusion caused by the increasing number of types.

I designed a brand new editing page, different from articles and pages. Here, I only kept the cover image, title, summary, and release date, and added a new field for external links.

I implemented an automatic filling feature for work information, reducing the burden of manual input. This is achieved by retrieving Open Graph information from the links, including og:image, og:title, og:description, and og:date.

I displayed the works on the homepage and a separate portfolio page.

For data retrieval and display, as an experienced "data thief" from RSSHub, this was a familiar task. I first crawled data from platforms such as Bilibili, GitHub, Pixiv, and Twitter to retrieve view counts and comment numbers, which are then displayed on xLog's cards. Considering the potential pressure and anti-scraping measures on the source sites, I set up sufficiently long data caching.

Now, this simple and practical feature has been implemented. You can take a look at my portfolio page. Would you like to try creating your own personal portfolio on xLog?