-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.json
1 lines (1 loc) · 21.5 KB
/
search.json
1
[{"title":"Giscus - dynamic dark mode","url":"/posts/2024/giscus-dynamic-dark-mode.html","content":"I've been procrastinating for almost a week before I finally realize that I have this blog on my todo list. In this blog, I will show you how I make the theme of my Giscus **dynamically change with the light/dark theme of my blog site** (a front-end layman's solution).\n\nAs I mentioned in my previous post [Born this way - how I built my blog](/posts/2024/how-i-built-my-blog.html), you can adjust the settings of Gisgus on [their website](https://giscus.app/).\n\n \n\n<strong><mark style=\"background: #FFB86CA6;\">NOTE</mark></strong>: Before we start, I assume that you already have your blog built in some ways using **Hexo**. **If this is not the case**, then this blog probably can not help you that much.\n# Body element of light/dark theme\n\nMy solution is to fetch the body element that hold the value of current color theme (light or dark) and adjust the theme of Giscus according to the value.\n\nSo step 1, we need to <strong><mark style=\"background: #ADCCFFA6;\">find out what is the name of the specific body element</mark></strong>.\n\nFirst, right click on your blog folder, and click on \"Open Git Bash here\". Then you need to starts a local server so that you can preview your blog, you can use the command below:\n\n```\nhexo s\n```\n\n Then you can go to http://localhost:4000/ for the preview. When you open the page, press F12 to see the html code of the webpage. Now you can focus on the body elements, and **switch your site from light to dark**. Did you see the changes are highlighted by your browser already? \n \n \n\nYou can see that here two elements of mine changed when I switch the theme:\n\n- data-color-scheme\n- data-current-color-scheme\n\nThe former one holds the value of the theme value input from the toggle on my blog page - light, dark, auto. The latter is the element that holds the value of the current color theme. The difference is that the former can be \"auto\" when switching the theme, and it will be more complex for us to make a function that can understand \"auto\" than take the value of the latter element, which tells you precisely what theme is in use.\n\nYou might find your correspond body element with very different name. <strong><mark style=\"background: #ADCCFFA6;\">The core here is to find the one can can tell you what color theme your are using</mark></strong>.\n\n# Add the JavaScript snippet to your header\n\nThen add this script in your head, usually, you can find it in the folder: `your-blog/themes/your-theme/layout/_partial`. \n\nRemember that you need to replace the \"data-current-color-scheme\" in the code to the name of the body element that holds the value of the current theme.\n\nThen the automatic syncing should be working~\n\n```javascript\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n const bodyElement = document.querySelector('body');\n \n // Function to update the giscus theme\n const updateGiscusTheme = (theme) => {\n const iframe = document.querySelector('iframe.giscus-frame');\n if (iframe) {\n iframe.contentWindow.postMessage({\n giscus: {\n setConfig: {\n theme: theme\n }\n }\n }, 'https://giscus.app');\n }\n };\n\n // Initial update of giscus theme based on the current data-current-color-scheme\n const initialTheme = bodyElement.getAttribute('data-current-color-scheme');\n updateGiscusTheme(initialTheme);\n\n // MutationObserver to monitor changes to the data-current-color-scheme attribute\n const observer = new MutationObserver((mutationsList) => {\n for (let mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-current-color-scheme') {\n const newTheme = bodyElement.getAttribute('data-current-color-scheme');\n updateGiscusTheme(newTheme);\n }\n }\n });\n\n // Observe changes to attributes of the body element\n observer.observe(bodyElement, { attributes: true });\n });\n</script>\n```\n\n\n# Giscus load for too long?\n\nI suffered from the problem that when it takes Gisgus too long to load, the assignment of the initial theme will fail to work. To fix that problem, below is an updated script that also listen to the load event.\n\n```javascript\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n const bodyElement = document.querySelector('body');\n \n // Function to update the giscus theme\n const updateGiscusTheme = (theme) => {\n const iframe = document.querySelector('iframe.giscus-frame');\n if (iframe) {\n iframe.contentWindow.postMessage({\n giscus: {\n setConfig: {\n theme: theme\n }\n }\n }, 'https://giscus.app');\n }\n };\n\n // Initial update of giscus theme based on the current data-current-color-scheme\n const initialTheme = bodyElement.getAttribute('data-current-color-scheme');\n updateGiscusTheme(initialTheme);\n \n // MutationObserver to monitor changes to the data-current-color-scheme attribute\n const observer = new MutationObserver((mutationsList) => {\n for (let mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-current-color-scheme') {\n const newTheme = bodyElement.getAttribute('data-current-color-scheme');\n updateGiscusTheme(newTheme);\n }\n }\n });\n\n // Observe changes to attributes of the body element\n observer.observe(bodyElement, { attributes: true });\n\n // Function to handle the giscus iframe load event\n const handleGiscusLoad = () => {\n const theme = bodyElement.getAttribute('data-current-color-scheme');\n updateGiscusTheme(theme);\n };\n\n // Add an event listener to the giscus iframe load event\n const addIframeLoadListener = () => {\n const giscusIframe = document.querySelector('iframe.giscus-frame');\n if (giscusIframe) {\n giscusIframe.addEventListener('load', handleGiscusLoad);\n }\n };\n\n // Retry adding the load listener if the iframe is not yet loaded\n const retryLoadListener = () => {\n if (!document.querySelector('iframe.giscus-frame')) {\n setTimeout(retryLoadListener, 500);\n } else {\n addIframeLoadListener();\n }\n };\n retryLoadListener();\n });\n\n</script>\n```\n\n\nNow, enjoy the dynamic theme~😮💨","tags":["blog","tech","experience","record"],"categories":["tech"]},{"title":"Born this way - how I built my blog","url":"/posts/2024/how-i-built-my-blog.html","content":"> \"Born this way\" was one of the first titles that came to my mind for this post. I really like the humor here which lies in the dual meaning of the phrase: 1) it indicates the attitude to embrace our inherent nature, and 2) it can be understood (maybe not for the native speakers) as born (in) this way - illustration of how something is born. \n> \n> (Isn't it some sort of a humor to explain the humor?😮💨)\n\nBelow I will write down how I built my blog.\n\n# Hexo\n\nI built my blog following the tutorial of [@DID321 (Di Wang)](https://github.com/DID321), you can find [his excellent tutorial here on bilibili](https://www.bilibili.com/video/BV1Eg41157tL/?spm_id_from=333.976.top_right_bar_window_default_collection.content.click&vd_source=080edb132758201384a3cfe0f3f7e143), note that the tutorial is in Chinese. Many thanks for his sharing~\n\n## Install Git and NodeJS\n### Git\n[Download Git here](https://git-scm.com/downloads) and install it. When it is done, you can find git options if you right click on any folder.\n\n\n### NodeJS\n[Download Node.js here](https://nodejs.org/en/download/prebuilt-installer) and install. You can check if the installation is successful using the commands below in Git Bash. To open the git bash, you can either right click on any folder or find Git Bash in your Start menu if you are using Windows.\n\n```\nnode -v\nnpm -v\n```\n\n\n\n## Install Hexo\n\nYou can find the [documentation of Hexo here](https://hexo.io/docs/index.html). If you did not quit Git Bash after checking the installation, just keep typing the following code, otherwise, you need to open git bash again 👉👈\n\n```\nnpm install -g hexo-cli\n```\n\nI ran into one problem here (seemingly failed to connect), so I used the mirror site from aliyun, more details 👉 [NPM镜像_NPM下载地址](https://developer.aliyun.com/mirror/NPM?spm=a2c6h.13651102.0.0.30da1b11rnOOiS)\n```\n# change to mirror site\nnpm config set registry https://registry.npmmirror.com\n# install hexo\nnpm install -g hexo-cli\n```\n\n## Initialize your blog\n\nAfter installation of hexo, you need to create a new folder or use your existing folder as your blog folder. Right click on the selected folder, and choose git bash~ After execute the commands below, hexo is going to prepare all files needed for a hexo blog in the selected folder.\n\n```\nhexo init <folder name of your blog>\ncd <folder name of your blog>\nnpm install\n```\n\n## Select a theme (optional)\n\nYou can find many many [Hexo themes here](https://hexo.io/themes/). I chose the [theme cupertino](https://github.com/MrWillCom/hexo-theme-cupertino) and [theme chic](https://github.com/Siricee/hexo-theme-Chic). Here I will show you how to configurate your cupertino theme.\n\nFirst, you need to go to the GitHub repository, and download the theme repository as zip. Unzip the file and put it in the `themes` folder under your root directory of your blog folder`.\\themes`.\n\n## Configuration\nThere are two configuration file, both called *\" \\_config.yml\"*, one is in the root directory of your blog `.\\_config.yml`; another one is in the theme you download `.\\themes\\hexo-theme-cupertino-master\\_config.yml`. Let's call them **site config** and **theme config** correspondingly. \n### site config\nTo make sure the theme works properly, you need to open the **site config** and copy-paste the theme folder name there.\n\n\nAlso, don't forget to change some basic information of your blog.\n\n\n\n### Theme config\n\nYou will not find a better guidance than the document by the author ([@MrWillCom (Mr. Will)](https://github.com/MrWillCom)) of this theme. You can find it here: [Introduction – Hexo Theme Cupertino](https://cupertino.mrwillcom.com/)\n\nHere I am only about to address one thing that is sorta unclear in the documents.\n\n#### Mathjax\n\nI followed this tutorial to configure mathjax - [Hexo渲染数学公式：配置方法与原理浅释](https://pku-zyf.github.io/formula/). \n\nAs before, you need to run some commands in Git Bash. It is said that *kramed* is a better renderer, so, let's uninstall the existing renderer and install this one!\n\n```\nnpm uninstall hexo-renderer-marked --save\nnpm install hexo-renderer-kramed --save\n```\n\nNow, in your **theme config**, add those lines:\n\n```\nmathjax:\n enable: true\n cdn: https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML\n```\nThen, in your **site config**, add those below:\n\n```\nmath:\n engine: 'mathjax'\n mathjax:\n src: custom_mathjax_source\n```\n\nNext, we need to add a JavaScript snippet. The snippet will be part of the theme, so we go to the theme folder `.\\themes\\hexo-theme-cupertino-master`, there should be a `layout` sub-folder. You can create a text file in the `layout` folder -> copy paste the code below -> save -> rename the text file into \"mathjax.ejs\".\n\n```\n<% if (theme.mathjax.enable){ %>\n <script type=\"text/x-mathjax-config\">\n MathJax.Hub.Config({\n tex2jax: {\n inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\n processEscapes: true,\n skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']\n }\n });\n MathJax.Hub.Queue(function() {\n var all = MathJax.Hub.getAllJax(), i;\n for(i=0; i < all.length; i += 1) {\n all[i].SourceElement().parentNode.className += ' has-jax';\n }\n });\n </script>\n <script type=\"text/javascript\" src=\"<%- theme.mathjax.cdn %>\"></script>\n <% } %>\n```\n\nLastly, we need to add the following lines below to call the snippet above when needed. The code below need to be added to `post.ejs` in the same `layout` folder as abov.\n\n```\n<% if (theme.mathjax){ %>\n <%- partial('mathjax') %>\n<% } %>\n\n```\n\nCool, now you can enjoy writing in math~ But don't forget to add *mathjax: true* in the YAML of your post when you need to use mathjax.\n\n```\n---\ntitle: blah blah\ndate: 2021-01-01 00:00:00\nmathjax: true\n---\n```\n\n# GitHub pages\n\nHere is an intuitive instruction on [creating a GitHub Pages site](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)\n\n## connect to GitHub\n\nTo use GitHub to host the blog, we need to connect to GitHub using the Secure Shell Protocol (SSH). Now we need to use Git Bash again, here is the code to generate your SSH:\n\n```\ngit config --global user.name \"user name\"\ngit config --global user.email \"email\"\nssh-keygen -t rsa -C 'the same email as above'\n```\n\nThree questions will be asked, note that when you enter the passphrase, nothing will be shown including \\*, don't panic (I did🥲), just input the passphrase twice~\n```\nEnter file in which to save the key (/c/Users/XXXX/.ssh/id_rsa):\nEnter passphrase (empty for no passphrase):\nEnter same passphrase again:\n```\n\nYou can then see you SSH with the command below:\n```\ncat ~/.ssh/id_rsa.pub\n```\n\nNow you need to go back to GitHub, in the upper-right corner of any page on GitHub, click your profile photo, then click Settings. Then:\n\n1. In the \"Access\" section of the sidebar, click **SSH and GPG keys**.\n2. Click **New SSH key** or **Add SSH key**.\n3. In the \"Title\" field, add a descriptive label for the new key. For example, if you're using a personal laptop, you might call this key \"Personal laptop\".\n4. Select the type of key - **Authentication Key**.\n5. In the \"Key\" field, paste your public key.\n6. Click **Add SSH key**.\n\nHere is the official instruction on how to add a new SSH - [Adding a new SSH key to your GitHub account - GitHub Docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)\n\nThen you can test the connection (especially important if you are setting the connection for the first time) Use the command below in your git bash:\n\n```\nssh -T [email protected]\n# Attempts to ssh to GitHub\n```\n\nIf you get an warning message like this:\n\n```\n> The authenticity of host 'github.com (IP ADDRESS)' can't be established.\n> ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.\n> Are you sure you want to continue connecting (yes/no)?\n```\n\nThen you need to verify that the fingerprint in the message you see matches [GitHub's public key fingerprint](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/githubs-ssh-key-fingerprints). If it does, then type `yes`. You might be asked to provide the passphrase here, hope you remember it 😮💨 When you see the message below, then your connection is very successful~\n\n```\n> Hi USERNAME! You've successfully authenticated, but GitHub does not\n> provide shell access.\n```\n\nLastly, we need to add more information in the **site config**:\n```\n# Deployment\ndeploy:\n type: git\n repo: https://github.com/iamacz/iamacz.github.io.git\n branch: main\n```\n\n\n## Deploy\nAlmost there!!! Now you need to install a plugin to help you deply, again we go back to git bash:\n\n```\nnpm install hexo-deployer-git --save\n```\n\nPhew, now you can deploy your blog to GitHub~\n\nHere are some useful command:\n\n```\nhexo g # Generates static files needed for your blog.\nhexo s # Starts a local server so that you can preview your blog.\nhexo d # deploy the blog to github\n```\n\nYou can always refer to these docs on how to use Hexo - [Documentation | Hexo](https://hexo.io/docs/)\n## Giscus\n\nYou can use Giscus to allow visitors to leave a comment in your blog. You can read more here: [giscus: A comment system powered by GitHub Discussions](https://github.com/giscus/giscus).\n\nI followed this tutorial to add giscus to my blog -> [Hugo 博客引入 Giscus 评论系统](https://www.lixueduan.com/posts/blog/02-add-giscus-comment/)\n\n#### Install Giscus\nGo [GitHub Apps - giscus](https://github.com/apps/giscus), click on the install, and select the blog repository on github. (Image from @lixd)\n\n\n\n#### Enable discussion\n\nSee [Enabling or disabling GitHub Discussions for a repository](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository) for instruction on how to enable discussion for your blog repository.\n\n#### Config Giscus\nVisit this site - [giscus](https://giscus.app/) - to configure your Giscus. One recommended configuration are shown as follow. You can of course explore more possibility~\n\n\n\n#### Enable giscus\n\nThe script will be generated automatically after you adjust the configuration above. \n\n\n\nYou can append the the script to the **site config** file. Remember to indicate that that the script is for giscus, see the code block below.\n\n```\ngiscus:\n <script src=\"https://giscus.app/client.js\"\n\t\t <your configuration here>\n </script>\n```\n\n\n","tags":["tech","experience","record"],"categories":["tech"]},{"title":"WeChat","url":"/WeChat/index.html","content":"\n你好吖~我想在这个公众号记录我的学习旅程，内容(也许会)包括社会网络分析，基于社会网络的干预，因果分析，同伴影响(peer influence)，同质性(homophily)。请大家多多关注，多多指教捏~\n\n\n"},{"url":"/categories/index.html"},{"title":"about","url":"/about/index.html","content":"\n# Tangbin?\n\nHello! This is Tangbin Chen. I sometimes also go by Arron (a name I like but is not used much lately). \n\n\n\nI was an engineering student who had always been interested in social questions. Very luckily, I got admitted to a master program in [Computational Social Science](https://liu.se/en/education/program/f7mcd) at Linköping University where I met a lot of interesting people and received my desired training. \n\nAfter my graduation in 2022, I decided to continue studying as a doctoral student and worked at the Institute for Analytical Sociology at Linköping University for another year as research asistant. After that, I was offered a PhD position at Karolinska Institutet to do social epidemiological research. I am very looking forward to my coming journey~\n\nMy main interest is in social influence and network study. My doctoral research will focus on health-related behaviors, especially their diffusion through social networks and network-based intervention.\n# Hobbies?\n\nEvery time being asked about my hobbies, I will be at a loss for a while. It is really hard to summarize what my hobbies are. I like music, movies, novel technologies, travelling, and handcrafts. I like peaceful tea time as well. I also like foods, I like cooking too. I also game sometimes, mainly Genshin Impact. There are so many things I like but I have never attempted to develop one as my hobby (Or maybe I can see it this way that all above are my hobbies). And now I am trying to start blogging as my (new) hobby🙈\n\n# About this blog...\n\nFirst I would like to send many thanks to [@MrWillCom (Mr. Will)](https://github.com/MrWillCom) and [@Siricee (Liu Zijian)](https://github.com/Siricee) for their excellent templates. And also, I'd like to thank [@DID321 (Di Wang)](https://github.com/DID321) for his tutorial on blogging with [Hexo](https://hexo.io/zh-cn/).\n\nIn this blog, I plan to post something about my life, my thoughts and most importantly to keep a record of my research and study.\n\n# Greetings~\n\nWelcome to my blog!"},{"url":"/tags/index.html"},{"url":"/search/index.html"},{"title":"Projects","url":"/projects/index.html","content":"# Coming soon~"}]