diff --git a/README.md b/README.md index 4277677344451fefc2e52cdf3ddad38d9137867d..1e443c0b0ce91425525816b1914a8271e28558eb 100644 --- a/README.md +++ b/README.md @@ -1,212 +1,55 @@ -# White Cabinet theme for Hugo - -White Cabinet theme can make sites with - -- slide images -- site title w/ black ribbon & hamburger menu -- accordion menu (expandable menu) -- post card -- banner at sidebar -- quicklinks (& address) - -components. White Cabinet theme can create introduction site for indivisual, group and all of facilities with upcoming/past events, information, location, etc... - - - -See our **[Demo page]()** - -White Cabinet theme deal with not only PC but also Mobile without any extra codes. - -## Installation - -1. Install [Hugo](https://gohugo.io/) in your server/client. -1. Make web source directory (ex. `/foo/bar`) and clone our git repository - -``` -$ mkdir -p /foo/bar/themes -$ cd /foo/bar/themes -$ git clone ---NEED TO CHECK--- -``` - -1. If you test by our demo page, please type such as: - -``` -$ cp white_cabinet_themes/demo-page/ /foo/bar/ -$ hugo server -``` +# The White Cabinet theme for Hugo -and access to `localhost:1313` in your web browser, you will check it. +![The image of the webpage created by the White Cabinet](https://www.cns.s.u-tokyo.ac.jp/white_cabinet/img/thumbnail.png) -Here in README is according to the demo pages. - -## Edit `config.toml` -You can customize the site at the `config.toml`. - -1. At first, edit your server name - -```config.toml -baseurl = (*_YOUR_SERVER_NAME_*) -``` + +Furnished with a simple design and numerous features, the White Cabinet theme serves as a versatile basis for your website construction. -2. You can set the parameters in each lauguage code. -These are the example in the case of English. -各言語のページは自動的に作られます。baseurl/en/ -index.en.md, index.ja.md, .... - -```config.toml -[Languages] -[Languages.en] - title = "THE TITLE OF YOUR SITE" -[Languages.en.params] - subtitle = "THE SUBTITLE OF YOUR SITE" - ... -[[Languages.en.menu.main]] - ... -``` +By making use of the responsive menu styles organized into a classical block-based layout, you and your visitors can obtain the necessary information at ease, just like opening a ***cabinet***. By keeping the base color ***white***, it will match any content, from a daily blog to the introduction of a research institute. - - -### Header -At the header, following contents are stored: - - title and subtitle - - logo - - slide images (= top figures) - - hamburger menu : automatically changed with accordion menu. - - heder menu - - -#### 1. Change the title. - -The site title can be changed by the parameter `title`. -```config.toml -[Languages] -[Languages.en] - title = "SITE TITLE" -[Languages.en.params] - subtitle = "SITE SUBTITLE" -``` +## Key features -#### 2. Change the logo and top figures. +![Main components of the White Cabinet](https://www.cns.s.u-tokyo.ac.jp/white_cabinet/img/white_cabinet_components.png) -Prepare image files for logo and top figures and copy them under the directory "static". +Some of the features that make the White Cabinet unique are: -(ex. logo: `/foo/bar/static/img/logo.png`, top figure: `/foo/bar/static/img/topfig1.jpg`) +- slideshow of images and black ribbon that stand out in the white background +- accordion-style main menu that allows you to put visual emphasis on certain contents +- easy-to-see postcard listing of events which includes automatic date filtering +- customizable side banner displaying the most important posts on top +- uncomplicated footer serving as a guide for visitors both in the screen and out on the streets +- responsive design which allows you to visit the page on your favourite device -Change the path to files at `config.toml`. -Several image files are supported for top figures in sliding style. +To see how it looks, check out our **[Demo page](https://www.cns.s.u-tokyo.ac.jp/white_cabinet/)**! -```config.toml -[Params] - logo = "img/logo.png" - top_figures = [ - "img/topfig1.jpg", - "PATH TO FILE2", - "PATH TO FILE3" - ] -``` -#### 3. Change the header menu. +## Installation -To add new header menu, add new parameter block `menu.header`. - +1. Install [Hugo](https://gohugo.io/) in your server/client +2. Create the directory for the web source (ex. `/foo/bar`) and clone into our git repository -```config.toml -[[menu.header]] - name = "DISPLAYED NAME" - url = "/URL" #Permanent Link of content - weight = 1 #Order of each menu ``` - -To add banner link, add new parameter block `Params.exlink`. - -```config.toml -[[Params.exlink]] - url = "LINK" - pass = "PATH TO IMAGES" + $ mkdir -p /foo/bar/themes + $ cd /foo/bar/themes + $ git clone ---NEED TO CHECK--- ``` -### Main contents - -In White Cabinet theme, accordion menu is used as top menu. -Hamburger menu at header is automatically changed with accordion menu. - -To add new accordion menu, add new parameter block `menu.main`. +3. **Quick start:** You can check out the demo page we have prepared by building Hugo locally: -```config.toml -[[menu.main]] - identifier = "ID" #Identifier for each menu - name = "DISPLAYED NAME" - url = "/URL" #Permanent Link of content - weight = 1 #Order of each menu - pre = "open"/"closed" #Default status of accordion menu ``` - -In this case, the page created by `/foo/bar/content/URL/_index.md` is corresponded. -
You can store contents in three ways for each accordion menu: - - list - - tile - - post card -
To use the postcard style, add parameter `post = "postcard"` in the block `menu.header`. - -See **[HOW TO MENU]()** for more information. - -### Sidebar (list of banners) - -There are List of banners and "Links" at the sidebar. - -Banners are automatically created for latest posts in the directory specified by parameter `sidebar_url`. -
Parameter `sidebar_maxnum` define the maximum number of banners at sidebar. - -Ex. banners are automatically created for latest 10 posts in the directory `/post`: -```config.toml -[Params] -... - sidebar_maxnum = 10 - sidebar_url = "/post" -... + $ cp white_cabinet_themes/demo-page/ /foo/bar/ + $ hugo server ``` -You can also create fixed banner. -See **[FRONT MATTER]()**. +The demo page can be seen at `localhost:1313` in your web browser. -Below the banners list, "Links" is prepared. +## Setting up your site -This is determined by parameters `link` and `linkPath`. -In the following case, the page created by `/foo/bar/content/link/index.en.md` is corresponded. +Global settings of your website can be customized in the file `config.toml`. At first, edit your server name so that the internal paths are correctly directed: -```config.toml -[Languages.en.params] - link = "DISPLAYED NAME" - linkPath = "en/link" #Permenent link of "Links". ``` - -### Footer -Footer is consisted by "sitemap" and "location". - -1. Sitemap is created by `/foo/bar/content/sitemap.en.md`. -2. Location is created with the parameter block `[[Params.address]]`. -
You can set several locations. - -``` config.toml -[[Params.address]] - description = "BUILDING" - postcode = "POSTCODE" - address = "ADDRESS" - room = "ROOM NUMBER" - tel = "XXX-XXXX-XXXX" - fax = "XXX-XXXX-XXXX" - googlemap_url = "https://www.google.com/maps/****" #Shared link from google map. + baseurl = (YOUR_SERVER_NAME) ``` -Embedded google maps are shown at the page `/access` - -### taxsonomies -To be updated. - -## How to edit each page (About front matter) +We have prepared several pages that demonstrate how you can make full use of the functionalities. See the [Features]({{< ref "features" >}}) section for details. - diff --git a/example/LICENSE b/example/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/example/config.toml b/example/config.toml new file mode 100644 index 0000000000000000000000000000000000000000..e990f7571b71272c10c2abeb64ecf3e36b916471 --- /dev/null +++ b/example/config.toml @@ -0,0 +1,134 @@ +baseurl = "https://pages.gitlab.io/hugo/" + +contentdir = "content" +layoutdir = "layouts" +publishdir = "public" +canonifyurls = true + +DefaultContentLanguage = "en" +defaultContentLanguageInSubdir = true +theme = "white_cabinet_theme" +metaDataFormat = "yaml" +pygmentsUseClasses = true +pygmentCodeFences = true +enableEmoji = true +#disqusShortname = "XXX" +#googleAnalytics = "XXX" + +#title = "White Cabinet" #for single language + +##### For multilingual ##################### +[Languages] +[Languages.en] + weight = 1 + title = "White Cabinet" +[Languages.en.params] + Language_name="English" + subtitle = "Hugo Theme" + link = "Links" + linkPath = "en/link" + sitemap = "Quicklinks" + location = "Location" + address = [ + "greenwich.md", + "individual.md" + ] + +[Languages.ja] + weight = 2 + title = "White Cabinet" +[Languages.ja.params] + Language_name="日本語" + subtitle = "日本語ページ" + link = "関連リンクはこちら" + linkPath = "en/link" + sitemap = "サイトマップ" + location = "所在地" + +######################################### + +[Params] +####For single language ################ +# subtitle = "Hugo Theme" +# link = "Links" +# linkPath = "/link" +# sitemap = "Quicklinks" +# location = "Location" +######################################## + + logo = "img/hugo_logo.png" + favicon = "img/favicon.ico" + dateFormat = "2006/01/02" + # defaultBannerImage = "/img/ForBanner/book-test.jpg" + defaultBannerImage = "" + commit = false + rss = true + comments = true + math = true + + top_figures = [ + "img/topfigure1.jpg", + "img/topfigure2.jpg", + "img/topfigure3.jpg", + "img/topfigure4.jpg", + "img/topfigure5.jpg", + ] + sidebar_maxnum = 10 + sidebar_url = "/post" + # categories_colors = [ + # "Information", "red", + # "News", "blue", + # "Event", "green" + # ] + ribbon_color = "#a9a9a9" + + copy_year = "2020" + copy_name = "Center for Nuclear Study, the University of Tokyo" + +[[Params.category_colors]] + Information = "#8b0000" + News = "#00008b" + Event = "#2f4f4f" + +[taxonomies] + tag = "tags" + category = "categories" + + +##### Header menu ############################## +[[menu.header]] + name = "Home" + url = "/" + weight = 1 +[[menu.header]] + name = "Access" + url = "/access" + weight = 2 + +##### Accordion menu ############################## +[[menu.main]] + identifier = "about" + name = "Welcome to the 'White Cabinet' Demo Page" + url = "/about" + weight = 1 + pre = "closed" + +[[menu.main]] + identifier = "features" + name = "Features of the White Cabinet theme" + url = "/features" + weight = 2 + pre = "open" + +[[menu.main]] + identifier = "post" + name = "Demonstration of the postcard style" + url = "/post" + weight = 3 + pre = "open" + post = "postcard" + +#### For advance user ###################################### +## in the case using HTML, uncomment following two lines ### +[markup.goldmark.renderer] + unsafe = true diff --git a/example/content/about/README.md b/example/content/about/README.md new file mode 120000 index 0000000000000000000000000000000000000000..9a62b944488e62f67adb1622c4556a5bf314376b --- /dev/null +++ b/example/content/about/README.md @@ -0,0 +1 @@ +../../themes/white_cabinet_theme/README.md \ No newline at end of file diff --git a/example/content/about/_index.ja.md b/example/content/about/_index.ja.md new file mode 100644 index 0000000000000000000000000000000000000000..7ccdef3d2289f781ad0b84cff3bfd21991d8ed93 --- /dev/null +++ b/example/content/about/_index.ja.md @@ -0,0 +1,24 @@ ++++ +title = "Welcome to White Cabinet demo page" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "1" +layout = "single" ++++ + +White Cabinet theme can create introduction site for indivisual blogs, commercial use and any kinds of facilities. + +Hugoテーマ『White Cabinet』をご利用いただきありがとうございます。 + +個人のブログから公的機関のホームページなど様々なシーンでご利用ください。 + +現在日本語ページについては準備中です。 + +『White Cabinet』についての詳細な情報は英語ページからご参照ください。 + +{{< textlist >}} +
+

特徴

+{{< tilelist path="/features" >}} diff --git a/example/content/about/_index.md b/example/content/about/_index.md new file mode 100644 index 0000000000000000000000000000000000000000..a7a48e767aa8b220c8444cd0aa3ebd89251fb66e --- /dev/null +++ b/example/content/about/_index.md @@ -0,0 +1,66 @@ ++++ +title = "Welcome to White Cabinet demo page" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "1" +layout = "single" ++++ + +# The White Cabinet theme for Hugo + +![The image of the webpage created by the White Cabinet](/img/thumbnail.png) + + +Furnished with a simple design and numerous features, the White Cabinet theme serves as a versatile basis for your website construction. + +By making use of the responsive menu styles organized into a classical block-based layout, you and your visitors can obtain the necessary information at ease, just like opening a ***cabinet***. By keeping the base color ***white***, it will match any content, from a daily blog to the introduction of a research institute. + +## Key features + +![Main components of the White Cabinet](/img/white_cabinet_components.png) + +Some of the features that make the White Cabinet unique are: + +- slideshow of images and black ribbon that stand out in the white background +- accordion-style main menu that allows you to put visual emphasis on certain contents +- easy-to-see postcard listing of events which includes automatic date filtering +- customizable side banner displaying the most important posts on top +- uncomplicated footer serving as a guide for visitors both in the screen and out on the streets +- responsive design which allows you to visit the page on your favourite device + +To see how it looks, check out our **[Demo page]({{< ref "/" >}})**! + + +## Installation + +1. Install [Hugo](https://gohugo.io/) in your server/client +2. Create the directory for the web source (ex. `/foo/bar`) and clone into our git repository + +``` + $ mkdir -p /foo/bar/themes + $ cd /foo/bar/themes + $ git clone ---NEED TO CHECK--- +``` + +3. **Quick start:** You can check out the demo page we have prepared by building Hugo locally: + +``` + $ cp white_cabinet_themes/demo-page/ /foo/bar/ + $ hugo server +``` + +The demo page can be seen at `localhost:1313` in your web browser. + +## Setting up your site + +Global settings of your website can be customized in the file `config.toml`. At first, edit your server name so that the internal paths are correctly directed: + +``` + baseurl = (YOUR_SERVER_NAME) +``` + +We have prepared several pages that demonstrate how you can make full use of the functionalities. See the [Features]({{< ref "features" >}}) section for details. + + diff --git a/example/content/about/_index.zh.md b/example/content/about/_index.zh.md new file mode 100644 index 0000000000000000000000000000000000000000..3d921d82c004868cb6f58071c36b3bf64d8e1ae1 --- /dev/null +++ b/example/content/about/_index.zh.md @@ -0,0 +1,19 @@ ++++ +title = "Welcome to White Cabinet demo page" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "1" +layout = "single" ++++ + +White Cabinet theme can create introduction site for indivisual blogs, commercial use and any kinds of facilities. + +This page is just a sample for multilingual mode. + +For more information, please read English pages. +{{< textlist >}} +
+

Features

+{{< tilelist path="/features" >}} diff --git a/example/content/access.en.md b/example/content/access.en.md new file mode 100644 index 0000000000000000000000000000000000000000..63f4d7edb2dd54f74fffe5fd65d77e7a6a1101ec --- /dev/null +++ b/example/content/access.en.md @@ -0,0 +1,9 @@ ++++ +title = "Access" +draft = false ++++ + +{{< access >}} + + +* The map is based on "Google Map". diff --git a/example/content/access.md b/example/content/access.md new file mode 100644 index 0000000000000000000000000000000000000000..3cd313439f2df8c9f9b275605b93a2518807a75a --- /dev/null +++ b/example/content/access.md @@ -0,0 +1,6 @@ ++++ +title = "交通アクセス" +draft = false ++++ + +{{< access >}} diff --git a/example/content/features/_index.md b/example/content/features/_index.md new file mode 100644 index 0000000000000000000000000000000000000000..fc58af5f4af1d646dc86bd8a29bf8cefdcb4874a --- /dev/null +++ b/example/content/features/_index.md @@ -0,0 +1,16 @@ ++++ +title = "Features" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "2" +layout = "single" ++++ + +The White Cabinet theme is equipped with a variety of features that make posting and browsing easier. We have provided a simple guide to demonstrate what you can do in our theme and how they can be used. + +{{< tilelist >}} + +Each tile that is shown above corresponds to a section of the guide. The `Build your site` section deals with the basic configurations of your entire website and page layouts. The `List layout` section deals with the content structure of your site and the listing techniqes that can be used. The tiles you see above are examples of the `tilelist`. The `Edit contents` section deals with the basic method of creating each page. + diff --git a/example/content/features/build/_index.md b/example/content/features/build/_index.md new file mode 100644 index 0000000000000000000000000000000000000000..333453633a50c24246ecb28ae9ec611283608b6a --- /dev/null +++ b/example/content/features/build/_index.md @@ -0,0 +1,15 @@ ++++ +title = "Build your site" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "img/build1.jpg" +draft = false +weight = "1" +layout = "single" +mktile = true ++++ + + +The first step to create your own website is to configure the settings and place things where they are supposed to be. The pages below are devoted to showing how you can customize the basic framework of your site, especially the settings in the `config.toml` file. + +{{< textlist >}} diff --git a/example/content/features/build/access.md b/example/content/features/build/access.md new file mode 100644 index 0000000000000000000000000000000000000000..fb00dfbf1bcb2287fd1752eb6b99af8e91fd30f7 --- /dev/null +++ b/example/content/features/build/access.md @@ -0,0 +1,117 @@ ++++ +title = "Creating the contact information" +date = 2020-03-09T14:30:41+09:00 +publishDate = 2020-03-09T14:30:41+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 8 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +Your contact information, from the address of your institute to your social app profile, can be directly shown on the footer. In order to ensure flexibility in the type of information you give, we have set the site to show the selected markdown files directly in the "contact" region. Also, the same information can be shown on the `access` page. + + +## Showing the contact information in the footer + +As a set of examples, we provide two cases of the content that could appear as a contact information. They will be directly posted on the footer by adding their filenames as an array to the variable `address` in the `config.toml` (for the example below): + +```toml +address = [ + "greenwich.md", + "individual.md" + ] +``` + + + +### Case 1: The address of the institute + +If you host a website of your institute, and you want to display the address, phone number, etc. as the contact information, you can write on a file under the `content` directory (for example, `greenwich.md`): + +1. the [front matter]({{< ref "features/contents/front_matter.md" >}}) with the `title` and `googlemap_url`: + +```markdown ++++ +title = "Royal Observatory Greenwich" +googlemap_url = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4691.037791089049!2d-0.002803868719612036!3d51.4766855086724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a82a8ca9dca7%3A0x31abb25f451c8402!2sRoyal%20Observatory%20Greenwich!5e0!3m2!1sen!2sjp!4v1584327192393!5m2!1sen!2sjp" ++++ +``` + +and + +2. the content with the necessary information in the preferred format: + +```markdown +Bussiness hours: 10:00 AM - 5:00 PM +Address: Blackheath Ave, Greenwich, London SE10 8XJ, United Kingdom +tel: XX-XXXX-XXXX +e-mail: foo@bar.com +``` + + + +### Case 2: Showing a link to your social app account + +For the individuals, you can also post links to your social acconts. Assuming you have created a file `individual.md` within the `content` directory: + +```markdown ++++ +title = "Hugo" ++++ + +[Twitter](https://twitter.com/GoHugoIO) +[GitHub](https://github.com/gohugoio/hugo) +``` + + + + +## Creating the access page + +You can build the **Access information** page, by creating the file `access.md` within the `content` directory and write: + +```markdown ++++ +title = "Access" ++++ + +{{< access >}} +``` + +This page will display the contents of the markdown files designated to the `address` parameter in the `config.toml`. When the front matter variable `googlemap_url` is filled in the markdown files, you can embed a Google Map in the page. + + +### Embedding the Google Maps + +You need the Google Map embedding URL to display it on the `Access` page.This can be obtained in the following way. + +First, designate a point to display on Google Maps. + +![embedmap1](/img/screenshots/embmap1.png) + +Second, click the "Share" button and select the "Embed a map" tab. An HTML code will be generated, so copy only the URL section. + +![embedmap2](/img/screenshots/embmap2.png) + +Finally, paste the URL to the `googlemap_url` variable of the front matter of `access.md`. + + diff --git a/example/content/features/build/footer.md b/example/content/features/build/footer.md new file mode 100644 index 0000000000000000000000000000000000000000..54d4cc89226cb6db0d262330a40bc24ef0643c98 --- /dev/null +++ b/example/content/features/build/footer.md @@ -0,0 +1,86 @@ ++++ +title = "Adding information to the footer" +date = 2020-03-09T14:30:41+09:00 +publishDate = 2020-03-09T14:30:41+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 8 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + + +The footer at the bottom of the page consists of a "sitemap", the "location", and the "copyright". The names can be specified in the `config.toml`: + +```config.toml +[Params] + sitemap = "DISPLAYED NAME OF SITEMAP" + location = "DISPLAYED NAME OF LOCATION" +``` + +![footer_fig](/img/screenshots/footer_fig.png) + + +## Creating the sitemap + +The sitemap can be created manually by explicitly listing the links in the file `/foo/bar/content/sitemap.md`. This allows you to decide how you organize the sitemap, regardless of the menu structure. You can set the label displayed above the sitemap in the `params` block in the `config.toml`: + +```toml +[Params] + ... + sitemap = "The Sitemap" + ... +``` + +Note that it should be placed in the `[Languages.en.params]` block, etc. for multilingual sites. + + +## Creating the contact information + +For institute homepages, it is convenient to post the address and contact information in the footer. For personal blogs, you probably want to post a link to your social apps, rather than your home address. We have also left this part flexible. + +You can customize the label in the config in the same way as the sitemap: + +```toml +[Params] + ... + location = "Address of institute" + ... +``` + +A method of posting the contact information on the footer and posting the detail in an `Access` page is explained in the [Creating the contact information]({{< ref "features/build/access" >}}) page. + + +## Copyright + +You can explicitly print the copyright notice on the bottom of the footer by adding the year and copyright-holder name: + +```toml +[Params] + ... + copy_year = "2020" + copy_name = "Center for Nuclear Study, the University of Tokyo" + ... +``` + +to the `[Params]` block in the `config.toml`. If these parameters are not specified, copyright will not be displayed. + diff --git a/example/content/features/build/headermenu.md b/example/content/features/build/headermenu.md new file mode 100644 index 0000000000000000000000000000000000000000..f8f9ade26a6d8ce03aa87b2baadc64028b450710 --- /dev/null +++ b/example/content/features/build/headermenu.md @@ -0,0 +1,73 @@ ++++ +title = "Creating the header menu" +date = 2020-03-09T14:08:22+09:00 +publishDate = 2020-03-09T14:08:22+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 3 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + + +The header menu is the set of links on the bottom edge of the black banner on the top part of the page. It can be an internal link to a certain page in your website that is often visited, an external link to another website, or a button to switch the content language. + +![topfigures_headermenu_fig](/img/screenshots/topfigures_headermenu_fig.png) + +## Internal links + +The most basic way to add a new header menu is to add a new parameter block `menu.header` in the `config.toml`. Suppose you want to add a header menu entry for the content at `/URL`, you should add + +```config.toml +[[menu.header]] + name = "DISPLAYED NAME" + url = "/URL" + weight = 1 +``` + +where the `weight` specifies the order of the header menu when there are multiple entries. + + +## External links + +You can also add external links with small banners. Add a new parameter block `Params.exlink` in the `config.toml`: + +```config.toml +[[Params.exlink]] + url = "LINK" + pass = "PATH TO IMAGES" +``` + + +## Language-switch button + +The link for switching languages is created by the parameter block `Languages.**.params`: + +```config.toml +[Languages.en] + weight = 1 +[Languages.en.params] + Language_name = "English" +``` + +The `weight` corresponds to the order in which the languages are placed, and the `Language_name` is the string that is displayed for the language. See also [Going global]({{< ref "features/build/multilingual.md" >}}) for an example. + diff --git a/example/content/features/build/links.md b/example/content/features/build/links.md new file mode 100644 index 0000000000000000000000000000000000000000..5c046a436644d85ff7150e58eb82e7128fe5bd47 --- /dev/null +++ b/example/content/features/build/links.md @@ -0,0 +1,48 @@ ++++ +title = "Creating the link page" +date = 2020-03-09T14:35:40+09:00 +publishDate = 2020-03-09T14:35:40+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 7 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +You can create a page to list important links. This will be placed below the infobar for landscape-oriented screens, or just above the footer for portrait-oriented screens. + + +![links_fig](/img/screenshots/links_fig.png) + + +## How to make the link page + +The list of links can be created directly as the `index.md` file in the `/content/link` directory. To show the link to the link page, add + +```config.toml +[Params] + link = "DISPLAYED NAME" + linkPath = "en/link" +``` + +in the `config.toml`. The "DISPLAYED NAME" corresponds to the string that will be shown on the page. You can customize the `linkPath` if you need to place the `index.md` in a directory other than `/content/link`. Note the language specification. + + diff --git a/example/content/features/build/mainmenu.md b/example/content/features/build/mainmenu.md new file mode 100644 index 0000000000000000000000000000000000000000..33b3da62714e71e63b1c5b116cffe5906ea33c31 --- /dev/null +++ b/example/content/features/build/mainmenu.md @@ -0,0 +1,51 @@ ++++ +title = "Creating the main menu" +date = 2020-03-09T14:19:32+09:00 +publishDate = 2020-03-09T14:19:32+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 5 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + + +The main menu, or the "accordion" menu, is where all the sections are listed. Each section is represented by a horizontal button, which springs open upon pressing to display the contents of the corresponding section page. + +We have also created a "hamburger" menu, which is the three-line pulldown menu on the top corner, and lists the direct links to each section page. + + +![mainmenu_fig](/img/screenshots/mainmenu_fig.png) + +The contents of these menus are based on the menu entries defined in the `config.toml` and the directory structure under the `content` directory, where all the pages are located. + +One advantage of this accordion menu is that you can choose whether you want to keep an accordion open or closed when the website is visited. This means, if you have five menu entries, and you want to make one of them stand out, you can keep the other four closed by default so that the visitors will see the contents of the single open accordion. + +Also, newcomers can find the correct links and pages just by opening each accordion menu, which will be a lot faster than having to access every section page just to look for one piece of information. + + +## Adding a new entry in the accordion menu + +To add a new slot in the accordion menu, you need to add the corresponding `menu.main` block in the `config.toml`, and create the directory for that section. A detailed description is given in the [Create a section]({{< ref "features/list/section_page.md" >}}) page. + +By default, the accordion menu will show the section page, or the `_index.md` in the base directory of the section. The only exception is for [date-dependent contents]({{< ref "features/list/post_type_content.md" >}}). + diff --git a/example/content/features/build/multilingual.md b/example/content/features/build/multilingual.md new file mode 100644 index 0000000000000000000000000000000000000000..95a1e6bd3285578a714b6ca4b72c013257711791 --- /dev/null +++ b/example/content/features/build/multilingual.md @@ -0,0 +1,73 @@ ++++ +title = "Going global" +date = 2020-03-09T14:40:14+09:00 +publishDate = 2020-03-09T14:40:14+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 4 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + +Hugo allows you to make your website multilingual. Check [Multilingual mode](https://gohugo.io/content-management/multilingual/) for the details. + +If you want to set your default language as English, and add Japanese as a secondary language, it can be done by adding + +```toml +DefaultContentLanguage = "en" +defaultContentLanguageInSubdir = true +``` + +and + +```config.toml +[Languages] +[Languages.en] + weight = 1 + title = "THE TITLE OF YOUR SITE" +[Languages.en.params] + Language_name = "English" + subtitle = "THE SUBTITLE OF YOUR SITE" + ... + +[Languages.ja] + weight = 2 + title = "ウェブサイトのタイトル" +[Languages.ja.params] + Language_name = "日本語" + subtitle = "ウェブサイトのサブタイトル" + ... +``` + +to the `config.toml`. For the menus, you can add identical entries for the English version and the Japanese version as + +```toml +[[Languages.en.menu.main]] + ... + +[[Languages.ja.menu.main]] + ... +``` + +The method of setting menu contents will be presented in the [Create a section]({{< ref "features/list/section_page.md" >}}) page. + + diff --git a/example/content/features/build/sidebar.md b/example/content/features/build/sidebar.md new file mode 100644 index 0000000000000000000000000000000000000000..56720de60b3dc5442fc54e34dd3b8530cb4e5f70 --- /dev/null +++ b/example/content/features/build/sidebar.md @@ -0,0 +1,65 @@ ++++ +title = "Creating the infobar" +date = 2020-03-09T14:35:40+09:00 +publishDate = 2020-03-09T14:35:40+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 6 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + + + +We have created a region on the right-hand side (or on the top for portrait-oriented screens) where a list of rectangular banners are placed. They can be used to show contents that are particularly important, such as an announcement for an event, or information about a press release. You could also use them to show some recent posts that would be of particular interest to your frequent visitors. + + +![infobar_fig](/img/screenshots/infobar_fig.png) + + +There are two methods for generating a banner. + + +## Latest posts + +For [date-dependent contents]({{< ref "features/list/post_type_content.md" >}}), banners are automatically generated for the several latest posts in a selected directory. The directory can be specified with the variable `sidebar_url`, and the maximum number of banners that is generated this way can be specified with the variable `sidebar_maxnum`, both in the `[Params]` block of the `config.toml`: + +```config.toml +[Params] +... + sidebar_maxnum = 10 + sidebar_url = "/post" +... +``` + +In the above example, banners are automatically created for the 10 latest posts in the directory `/content/post`. + +You can set an image that represents the post. See [Front matter variables]({{< ref "features/contents/front_matter.md" >}}) for details. The specified image will be transparently shown, and the date and title of the post will be written in black on top. Posts with no image specified will be shown as a white box with just the date and title. + + +## Fixed banner + +You can also create a fixed banner, regardless of the date of creation. See [Front matter variables]({{< ref "features/contents/front_matter.md" >}}) to find out how this can be done. The fixed banners will be listed above the "latest posts" banners, in the order of their `weight`s. It is also possible to set a time limit for the banner display. + +Only the specified image will be shown on a fixed banner, and not the date and title. + + diff --git a/example/content/features/build/title.md b/example/content/features/build/title.md new file mode 100644 index 0000000000000000000000000000000000000000..41a590cadb8cbe9e3ddb097bc9ccc516175a1a59 --- /dev/null +++ b/example/content/features/build/title.md @@ -0,0 +1,35 @@ ++++ +title = "Change the title" +date = 2020-03-09T16:34:55+09:00 +publishDate = 2020-03-09T16:34:55+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 1 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +The title of the site can be changed by the parameter `title` in the `config.toml`. +```config.toml + title = "SITE TITLE" +[Params] + subtitle = "SITE SUBTITLE" +``` diff --git a/example/content/features/build/topfigures.md b/example/content/features/build/topfigures.md new file mode 100644 index 0000000000000000000000000000000000000000..f60b9314828d07434a90913959db69e2194148bb --- /dev/null +++ b/example/content/features/build/topfigures.md @@ -0,0 +1,62 @@ ++++ +title = "Change the logo and top figures" +date = 2020-03-09T14:23:27+09:00 +publishDate = 2020-03-09T14:23:27+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 2 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + + + +You can use your original logo to represent your website. Also, you can set several images to be shown as a slideshow on the top part of the top page. + +![topfigures_headermenu_fig](/img/screenshots/topfigures_headermenu_fig.png) + +The logo and image files should be placed under the directory "static". Assuming that the root directory of the site is `/foo/bar`, place the logo as `/foo/bar/static/img/logo.png` and the top figure as `/foo/bar/static/img/topfig1.jpg`, etc. + +Then, set the path to these files in the `config.toml` as: + +```config.toml +[Params] + logo = "img/logo.png" + top_figures = [ + "img/topfig1.jpg", + "PATH TO FILE2", + "PATH TO FILE3", + ... + ] +``` + +## Display the color ribbon + +If you want to display the color ribbon, which is shown in a figure, add `ribbon_color` parameter with hex color like: + +```config.toml +[Params] +... + ribbon_color = "#a9a9a9" +... +``` + +. If `ribbon_color` is null or empty, a ribbon is not displayed. diff --git a/example/content/features/contents/_index.md b/example/content/features/contents/_index.md new file mode 100644 index 0000000000000000000000000000000000000000..9fa0bd4a846f0f4cc6cebe5942724dde620937c5 --- /dev/null +++ b/example/content/features/contents/_index.md @@ -0,0 +1,15 @@ ++++ +title = "Edit contents" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "img/edit1.jpg" +draft = false +weight = "3" +layout = "single" +mktile = true ++++ + +In this theme, each individual page is generated from a markdown file (`.md` file) located under the directory `content`. There are some variables you can tweak for each page that you write. These can be used to organize your every-day entries. + +{{< textlist >}} + diff --git a/example/content/features/contents/front_matter.md b/example/content/features/contents/front_matter.md new file mode 100644 index 0000000000000000000000000000000000000000..3e46ad4bb286573d98fd9cfd5d64cfa208331802 --- /dev/null +++ b/example/content/features/contents/front_matter.md @@ -0,0 +1,148 @@ ++++ +title = "Front matter variables" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "2" +layout = "single" +mktile = false ++++ + + +When you create a new post using the `hugo new` command, the generated markdown file will already contain the predefined front matter. + +Supposing you created a post called `newpost.md` on Mar. 9th, 2020, the front matter will look like: + + +```front-matter ++++ +title = "newpost" +date = 2020-03-09T14:06:22+09:00 +publishDate = 2020-03-09T14:06:22+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-09 +#eventEndDate = 2020-03-09 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-09 +bannerimg = "" +weight = 3 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ +``` + +In this part, you can set when and how you want this entry to be displayed. The following variables are defined. + + +## Title of the post + +![fmtitle_fig](/img/screenshots/fmtitle_fig.png) + + +The variable `title` will be set to the name of the markdown file by default, but can also be customized. The default title of this page was `front_matter`, but it has been changed to `Front matter parameters`. + + + +## Date variables + + +### `date` & `publishDate` + +These will be set to the date and time of creation of the entry. See the [HUGO Website](https://gohugo.io/content-management/front-matter/#predefined) for the descriptions of these predefined date variables. + + + +### `eventStartDate` & `eventEndDate` + +These are variables exclusively used for [date-dependent contents]({{< ref "features/list/post_type_content" >}}). By setting these values, you can set the time period when this entry appears on the top page. For example, if you want to tell everyone about a conference that is held from March 9, 2020 till March 11, 2020, you can set + +``` +eventStartDate = 2020-03-09 +eventEndDate = 2020-03-11 +``` + +so that it will be announced as one of the `Upcoming events` on the top page until it ends. After it has ended, it will disappear from the `Upcoming events` area. + + +### `bannerEndDate` + +This is a variable exclusively used for [fixed banners on the infobar]({{< ref "features/build/sidebar" >}}). See below for the usage. + + + +## Taxonomies + +![fmtags_fig](/img/screenshots/fmtags_fig.png) + + +You can attach `tags` to your post to organize them into groups. Suppose you hold a conference once a month, and you hold a seminar once a week. By setting + +``` +tags = ["Conference"] +``` +to the former and + +``` +tags = ["Seminar"] +``` +to the latter, you can find out about the conferences by just clicking on the `Conference` tag, without having to sort out the more frequent seminars. See also [Tags]({{< ref "features/contents/tags_fm" >}}). + +The variable `categories` is currently not used. + + + +## The `image` variable + +You can set an image that represents the content by using the variable `image`. There are two cases where the image set here can be used. + +### As the image for a tilelist + +When the page is displayed as a [tilelist]({{< ref "features/list/list_techs" >}}), it will need a representative image. The link to the image given to this variable will be used. + + +### As the background image of a banner + +If the page is listed on the [infobar]({{< ref "features/build/sidebar" >}}), it will look appealing if it has an image. The recommended variable to be used here will be the `bannerimg` (see below), but if it is not used, the image given to the `image` variable will be shown transparently on the background and the date and title of the post will be printed on top. + + +## Displaying your post on the infobar + + +![fmbanner_fig](/img/screenshots/fmbanner_fig.png) + +You can display posts on the [infobar]({{< ref "features/build/sidebar" >}}) by setting + +``` +mkbanner = true +``` + +so that it will be emphasized to your visitors. When there are multiple `mkbanner` entries, the order will be determined by weight, and then the date. + +The front matter variables related to this are as follows: + +### `bannerEndDate` + +The post will be displayed on the infobar until the date specified by `bannerEndDate`, which is set to one month after the date of creation by default. + + +### `bannerimg` + +When a path to the image is given to the `bannerimg`, the post will show up on the infobar as just the image, without a title or a date. The aspect ratio of 4:3 is recommended for the image used. + +If you do not specify the `bannerimg`, the image specified in `image` will be used as a background image (see above), and if that is also unspecified, the date and title of the entry will be shown on a white background. + diff --git a/example/content/features/contents/multilang_posts.md b/example/content/features/contents/multilang_posts.md new file mode 100644 index 0000000000000000000000000000000000000000..871a954bdff2e3eba2dc397a308a5a46b1ab74b1 --- /dev/null +++ b/example/content/features/contents/multilang_posts.md @@ -0,0 +1,20 @@ ++++ +title = "Create posts in other languages" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "4" +layout = "single" +mktile = false ++++ + + +For multilingual websites, each page must be duplicated and translated. The file name in the language other than the main language must have the format `..md`. + +For example, this page is written as a file named `multilang_posts.md`. Suppose the main language of the website is English and there is also a Japanese version. In order to create a Japanese version of this page, you need to create a file named `multilang_posts.ja.md` and translate the contents. + +Check [Going global]({{< ref "features/build/multilingual" >}}) or the [official Hugo documentation](https://gohugo.io/content-management/multilingual/) on how to set your website multilingual. + + + diff --git a/example/content/features/contents/post_creation.md b/example/content/features/contents/post_creation.md new file mode 100644 index 0000000000000000000000000000000000000000..e8b9a8f2667d1ee69aff8aad10931d034eccf9f1 --- /dev/null +++ b/example/content/features/contents/post_creation.md @@ -0,0 +1,34 @@ ++++ +title = "Create your own post" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "1" +layout = "single" +mktile = false ++++ + + +A page in your website corresponds to a markdown file created under the `content` directory. They can be categorized into sections by creating corresponding subdirectories. For example, you want to create a section called "about". There are two types of pages you can create under the section "about". + +#### 1. The `_index.md` + +One is the `_index.md` which serves as the "section page", or the cushion page of the section. By default, the webpage specified by the subdirectory `/about` will direct you to the content of `content/about/_index.md`. See [Create a section]({{< ref "features/list/section_page" >}}) for instructions on how to create a section page. + + +#### 2. Regular pages + +The other type is a regular page. You can name it in any way other than "_index.md", and you can create it by the Hugo command `hugo new`. (You may also create a section page using the `hugo new` command, but it will contain unnecessary front matter parameters by default). + +For example, if you create your `about` section page and enter `hugo new about/description.md`, the directory structure will become like: + + +``` +content +└ about + ├ _index.md + └ description.md +``` + +The regular pages can be customized by tweaking the [front matter variables]({{< ref "features/contents/front_matter" >}}). diff --git a/example/content/features/contents/post_image.md b/example/content/features/contents/post_image.md new file mode 100644 index 0000000000000000000000000000000000000000..3795179f0ae2a562fbbcef6bdf89b42cfbfed0fd --- /dev/null +++ b/example/content/features/contents/post_image.md @@ -0,0 +1,20 @@ ++++ +title = "Inserting images" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "5" +layout = "single" +mktile = false ++++ + +Images may be inserted into the page with the usual markdown notation: + +![Image posted by the usual markdown notation](/img/rabbit2.png) + + +It is also possible to insert an image using the HTML `img` tag, which requires additional settings in the `config.toml` depending on the markdown parser used. Refer to the corresponding Hugo documentations for this issue. + +By default, the figure width is set to 40% of the main section. To override this, you must set the figure size manually using the `img` HTML tag. + diff --git a/example/content/features/contents/post_math.md b/example/content/features/contents/post_math.md new file mode 100644 index 0000000000000000000000000000000000000000..743320adf434eeb81e5cc8a7bcb2c60e0f2b9451 --- /dev/null +++ b/example/content/features/contents/post_math.md @@ -0,0 +1,42 @@ ++++ +title = "Inserting mathematical expressions" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "6" +layout = "single" +mktile = false ++++ + + + + +By enabling `math` in the `config.toml`, you can include mathematical expressions powered by [$$\KaTeX$$](https://katex.org/) in your pages: + +```toml +[Params] + ... + math = true + ... +``` + +This will be useful especially for pages with scientific contents. + +For example, by writing + +``` +$$ +-\frac{\hbar^2}{2m}\left(\nabla^2 + V(\boldsymbol{r}) \right)\phi(t,\boldsymbol{r}) = i\hbar \frac{\partial}{\partial t} \phi(t,\boldsymbol{r}), +$$ +``` + +it will be rendered as + +$$ +-\frac{\hbar^2}{2m}\left(\nabla^2 + V(\boldsymbol{r}) \right)\phi(t,\boldsymbol{r}) = i\hbar \frac{\partial}{\partial t} \phi(t,\boldsymbol{r}) . +$$ + +If you want to insert an equation inline, by writing `$E=mc^2$`, you get $E=mc^2$. + + diff --git a/example/content/features/contents/tags_fm.md b/example/content/features/contents/tags_fm.md new file mode 100644 index 0000000000000000000000000000000000000000..6aafb48b67ca767fbdd3334a922495ed0a94fed3 --- /dev/null +++ b/example/content/features/contents/tags_fm.md @@ -0,0 +1,27 @@ ++++ +title = "Adding tags to your posts" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "3" +layout = "single" +mktile = false ++++ + + +![fmtags_fig](/img/screenshots/fmtags_fig.png) + + +In the [front matter]({{< ref "features/contents/front_matter" >}}) of each post, you can set tags which can be used to categorize your pages. In the [postcard listing style]({{< ref "features/list/list_techs" >}}), the tags attached to each post will be placed on each card as colored buttons. + +The color for each tag button can be specified by hex color code in the `config.toml` as, for example, + +```toml +[[Params.category_colors]] + Information = "#a22041" + News = "#2a83a2" + Event = "#316745" +``` +. + diff --git a/example/content/features/list/_index.md b/example/content/features/list/_index.md new file mode 100644 index 0000000000000000000000000000000000000000..7c429f7a583a29008bd91d7dbb5b5b054cdc3fae --- /dev/null +++ b/example/content/features/list/_index.md @@ -0,0 +1,17 @@ ++++ +title = "List layout" +date = 2019-07-21T14:06:22+09:00 +tags = [""] +image = "img/list1.jpg" +draft = false +weight = "2" +layout = "single" +mktile = true ++++ + +The starting point for adding contents to your website is to create a `section`, or a menu content. After creating a section, you can start creating pages and subsections within the section. A `section page` serves as a cushion page to list the contents that belong to that section. This page, for example, is the section page for the `List layout` section. + +You can also add date-dependent contents such as conferences, seminars, festivals, etc. An independent page will be devoted to the description of this `post-type` contents, as it requires special treatment. + +{{< textlist >}} + diff --git a/example/content/features/list/list_techs.md b/example/content/features/list/list_techs.md new file mode 100644 index 0000000000000000000000000000000000000000..736eb05fd72e7591490fd6a1f3eef4ffdec23f0e --- /dev/null +++ b/example/content/features/list/list_techs.md @@ -0,0 +1,63 @@ ++++ +title = "Listing techniques" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "2" +layout = "single" +mktile = false ++++ + + +The [Section page]({{< ref "features/list/section_page" >}}) should include a list of links to the pages within the corresponding section. To realize this, we have prepared three methods of listing pages. + + +# Three listing methods + +Each method of listing can be used by embedding the corresponding shortcode in the `_index.md` file. See the [official documentation](https://gohugo.io/content-management/shortcodes/) for a general description of shortcodes. + + +## Text lists + +![textlist_fig](/img/screenshots/textlist_fig.png) + +This is the most basic method, where the `title` of each page is listed in the order of their `weight`. This can be generated by embedding the shortcode + +```markdown +{{}} +``` + +in the `_index.md`. + + +## Tile lists + + +![tilelist_fig](/img/screenshots/tilelist_fig.png) + + +By setting an image for each page, the link to the page could be arranged in a tile-like format consisting of the image and the title as a caption. This will be useful if you have characteristic images for each page. This can be generated by embedding the shortcode + +```markdown +{{}} +``` + +in the `_index.md`. Note that the image can be specified by adding the link to the image to the `image` variable in the [front matter]({{< ref "features/contents/front_matter" >}}) of each page (i.e. .md file). + + +## Post lists + + + +![postlist_fig](/img/screenshots/postlist_fig.png) + +This method displays each page in a card-like format with the date and short preview of the content. You can also set tags to the page by writing them explicitly on the [front matter]({{< ref "features/contents/front_matter" >}}). This method can be used similarly as the previous two by embedding the shortcode + +```markdown +{{}} +``` + +in the `_index.md`, but is also intended to be used as [a method of displaying date-dependent contents]({{< ref "features/list/post_type_content" >}}). Note that the usage for the latter is a little different from the description given here. + + diff --git a/example/content/features/list/post_type_content.md b/example/content/features/list/post_type_content.md new file mode 100644 index 0000000000000000000000000000000000000000..1ea2f3129d041e23e37610c01ac2faa2e5681401 --- /dev/null +++ b/example/content/features/list/post_type_content.md @@ -0,0 +1,87 @@ ++++ +title = "Posting date-dependent contents" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "3" +layout = "single" +mktile = false ++++ + +If you organize conferences, seminars, festivals, etc., you will most probably want to advertise them to the public. We have prepared a system to display such date-dependent contents. + +For instance, you may want to inform people about a weekly meeting. Showing the post about it on the top page will be most effective, but at the same time, it has to disappear as soon as it has ended. Also, you may want to check the page of a particular meeting that had been held years ago. Our method of posting date-dependent contents is realized by + +1. selecting future posts and several newest posts to show on the top page, + +and + +2. preparing a paginated list of all the past posts. + + +## Creating a section devoted to date-dependent content + +This method requires special treatment compared to the [regular listing methods]({{< ref "features/list/list_techs" >}}), since by default, the content displayed in the accordion menu is identical to the content of the section page. For date-dependent contents, the section page may be a list of all the pages, but it will be too long to post in the accordion menu. Thus, we override the default structure, and make them as different pages. + +The first step is to create a section named `post`. + +**Currently, `post` is the only section name that could be used for this feature.** + +You should not create an `_index.md` in the section. Instead, set in the `config.toml`: + +```toml +[[Languages.en.menu.main]] + name = "News" + url = "/post" + weight = 4 + pre = "open" + post = "postcard" +``` + +You may customize the `name`, `weight`, `pre`, but note that the `url = "/post"` and `post = "postcard"` are requirements. + + +## Customizing what to show in the accordion menu + + +![post_fig](/img/screenshots/post_fig.png) + + +By setting the `eventEndDate` in the [front matter]({{< ref "/features/contents/front_matter" >}}) for each entry, the site will distinguish which event comes up in the future, and which has already ended. + +To make these show up in the accordion menu, create the page `/content/post/postcard.md` and write + + +```markdown +{{}} +{{}} +[List of all posts]({{}}) +``` + +where you can customize + +* the labels "Upcoming Events", "Newest Posts", and "List of all posts" +* the number of newest posts that will be displayed (3 in this example). + +In this case, The upcoming events will be posted under the heading "Upcoming Events", and three of the latest entries will be posted under the heading "3 Newest Posts". The comparison of `endEventDate` and the current date will be done upon each build, so by rebuilding Hugo everyday, the posts will be updated on a daily basis. + +If the arguments for the shortcodes are not given, the default setting of + +```markdown +upcoming posts: title = "Upcoming" +newest posts: title = "Newest Posts" +number of newest posts: 3 +``` + +will be chosen. + +You can also choose not to show the upcoming events, for example, by omitting the first line. For multilingual pages, create the same kind of page for each language. + + +An example can be seen from the top page in the "Demonstration of the postcard style" section. Note that you can also place tags on each entry, which can be set in the [front matter]({{}}). The color settings of the tag buttons can be customized in the `config.toml`. See the ["Adding tags to your posts"]({{< ref "features/contents/tags_fm" >}}) page for details. + +The "List of all posts" link will direct you to the default `section` template of the `post` section, which displays all the pages in [postlist]({{< ref "features/list/list_techs" >}}) within the section in chronological order. You can see here that creating an `_index.md` file in the `post` section will override this action, and you will have to create the corresponding page by yourself. + + + diff --git a/example/content/features/list/section_page.md b/example/content/features/list/section_page.md new file mode 100644 index 0000000000000000000000000000000000000000..f4fcead782c9e59dccca2261778ebdc020c2037d --- /dev/null +++ b/example/content/features/list/section_page.md @@ -0,0 +1,56 @@ ++++ +title = "Create a section" +date = 2020-03-09T14:06:22+09:00 +tags = [""] +image = "" +draft = false +weight = "1" +layout = "single" +mktile = false ++++ + +In order to create a section, you need to create a corresponding menu entry and a directory under the `content` directory. + +## Creating a section + +Assuming that the home directory for the site is `/foo/bar`, a new menu entry can be created by adding + +```toml +[[menu.main]] + identifier = "section_one" + name = "Section One" + url = "/section_one" + weight = 1 + pre = "open" +``` + +to the `/foo/bar/config.toml` and creating a directory `section_one` under `/foo/bar/content/`. The meaning of each variable is as follows: + +* `identifier`: an ID that is used to identify each menu entry (corresponding to the section name) +* `name`: the name of the menu entry that is displayed in each menu +* `url`: the permanent link to the section page +* `weight`: the sequencing index for the menu entry +* `pre`: setting the corresponding accordion menu to be "open" or "closed" upon access (original variable for our theme) + +Refer to the [Hugo official documentation](https://gohugo.io/templates/menu-templates/#site-config-menus) for details on the parameters other than `pre`. + +The example above will create a section named `section_one`, displayed as `Section One`, and accessed via `/section_one`. On the top page, the corresponding accordion menu will be placed on the top, and will be open upon access by default. + + + + +## Creating the section page + +A section page serves as a "cushion page", or a table of contents for the entries that belong to that section. It will typically contain an introduction to that section and a list of links to the pages within the section. + +The content of the section page can be written on the markdown file `/foo/bar/content/section_one/_index.md`. It is important that the file is named `_index.md`, so that it can be distinguished from the other regular pages. Upon build, Hugo will parse the markdown content to a static HTML file, which will be displayed as the section page. On the top page, the content of the section page will be displayed in the accordion menu. + +See [Lists in the section page]({{< ref "features/list/list_techs" >}}) to learn how to show a list of contents within the section. A description of writing regular entries will be given in the [Edit contents]({{< ref "features/contents" >}}) section. + + + +## Creating subsections + +You may also create a subsection `section_two` within the `section_one` by creating a corresponding subdirectory. It is not necessary to create a submenu entry in the `config.toml` for subsections. + + diff --git a/example/content/greenwich.md b/example/content/greenwich.md new file mode 100644 index 0000000000000000000000000000000000000000..509efea4e48697b1cc5e1631f120275f5bd8e9e2 --- /dev/null +++ b/example/content/greenwich.md @@ -0,0 +1,10 @@ ++++ +title = "Royal Observatory Greenwich" +googlemap_url = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4691.037791089049!2d-0.002803868719612036!3d51.4766855086724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a82a8ca9dca7%3A0x31abb25f451c8402!2sRoyal%20Observatory%20Greenwich!5e0!3m2!1sen!2sjp!4v1584327192393!5m2!1sen!2sjp" ++++ + +Bussiness hours: 10:00 AM - 5:00 PM +Address: Blackheath Ave, Greenwich, London SE10 8XJ, United Kingdom +tel: XX-XXXX-XXXX +e-mail: foo@bar.com + diff --git a/example/content/individual.md b/example/content/individual.md new file mode 100644 index 0000000000000000000000000000000000000000..ec3a07cfedb0defd939ba9eb282bb340f2b6d949 --- /dev/null +++ b/example/content/individual.md @@ -0,0 +1,6 @@ ++++ +title = "Hugo" ++++ + +[Twitter](https://twitter.com/GoHugoIO) +[GitHub](https://github.com/gohugoio/hugo) diff --git a/example/content/link/index.md b/example/content/link/index.md new file mode 100644 index 0000000000000000000000000000000000000000..39ae2dd584f1f5727b94db8941847cbcfb42a9f1 --- /dev/null +++ b/example/content/link/index.md @@ -0,0 +1,15 @@ ++++ +title = "Links" ++++ + +# Hugo Official + +[Web](https://gohugo.io/) +[Twitter](https://twitter.com/GoHugoIO) +[GitHub](https://github.com/gohugoio/hugo) + +# Our page + +[Demo page](https://www.cns.s.u-tokyo.ac.jp/white_cabinet) +[Repository (GitLab)](https://gitlab.com) +[Institute infomation](https://www.cns.s.u-tokyo.ac.jp/en) diff --git a/example/content/post/post2.md b/example/content/post/post2.md new file mode 100644 index 0000000000000000000000000000000000000000..b8ae729f6ef4dd601336fe8b7749baaaa6c81985 --- /dev/null +++ b/example/content/post/post2.md @@ -0,0 +1,29 @@ ++++ +title = "Post2" +date = 2019-10-11T15:32:38+09:00 +publishDate = 2019-10-11T15:32:38+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2019-12-11 +#eventEndDate = 2019-12-11 + +tags = [""] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = true +bannerEndDate = 2025-01-11 +bannerimg = "img/rabbit4.png" +weight = 1 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + diff --git a/example/content/post/post3.md b/example/content/post/post3.md new file mode 100644 index 0000000000000000000000000000000000000000..6376d516d7029a31baa9e745a73cdc8d25b12576 --- /dev/null +++ b/example/content/post/post3.md @@ -0,0 +1,32 @@ ++++ +title = "New service is available!" +date = 2019-12-11T16:31:34+09:00 +publishDate = 2019-12-11T16:31:34+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2019-12-11 +#eventEndDate = 2019-12-11 + +tags = ["News"] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = true +bannerEndDate = 2025-01-11 +bannerimg = "img/landscape2.JPG" +weight = 3 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +We will start the new service. + + diff --git a/example/content/post/post4.md b/example/content/post/post4.md new file mode 100644 index 0000000000000000000000000000000000000000..7a65c6d06cfac8c7242ada0a495327f10d01a6c0 --- /dev/null +++ b/example/content/post/post4.md @@ -0,0 +1,30 @@ ++++ +title = "Closed infomation" +date = 2019-12-01T16:34:34+09:00 +publishDate = 2019-12-01T16:34:34+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2019-12-11 +#eventEndDate = 2019-12-11 + +tags = ["Information"] +##ex: tags = ["Seminar","Conference"]## + +image = "/img/2.jpg" + +###banner#### +mkbanner = true +bannerEndDate = 2025-02-25 +bannerimg = "/img/2.jpg" +weight = 4 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +Our store will be closed on 25th Feburary, 2020 because of the maintenance. diff --git a/example/content/post/post5.md b/example/content/post/post5.md new file mode 100644 index 0000000000000000000000000000000000000000..df72c50384b714cb6b35fe7e337517821466438f --- /dev/null +++ b/example/content/post/post5.md @@ -0,0 +1,31 @@ ++++ +title = "Special Event" +date = 2019-11-12T19:09:55+09:00 +publishDate = 2019-11-12T19:09:55+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +eventStartDate = 2020-03-01 +eventEndDate = 2020-03-31 + +tags = ["Event"] +##ex: tags = ["Seminar","Conference"]## + +#image = "" +image = "img/landscape.JPG" + +###banner#### +mkbanner = true +bannerEndDate = 2025-04-12 +#bannerimg = "img/landscape.JPG" +weight = 200 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +Special event coming! diff --git a/example/content/post/post6.md b/example/content/post/post6.md new file mode 100644 index 0000000000000000000000000000000000000000..7fd61a66af57d07032d53e647e4ff1ea2a56674c --- /dev/null +++ b/example/content/post/post6.md @@ -0,0 +1,30 @@ ++++ +title = "Renewal page!" +date = 2019-03-25T18:04:30+09:00 +publishDate = 2019-03-25T18:04:30+09:00 + +categories = "" +##ex: categories = "event"## +## for categ. event : remove "#" following 2 columns. ## +#eventStartDate = 2020-03-25 +#eventEndDate = 2020-03-25 + +tags = ["Information","News"] +##ex: tags = ["Seminar","Conference"]## + +image = "" + +###banner#### +mkbanner = false +bannerEndDate = 2020-04-25 +bannerimg = "" +weight = 300 + +#For main menu contents +#mktile false + +#For Local +draft = false ++++ + +Our home page is renewal diff --git a/example/content/postcard.md b/example/content/postcard.md new file mode 100644 index 0000000000000000000000000000000000000000..e26a59580251ccdcccc1a3a3290466a169e7708d --- /dev/null +++ b/example/content/postcard.md @@ -0,0 +1,14 @@ ++++ +title = "List of Posts" +date = 2019-08-02T10:25:28+09:00 +tags = [""] +image = "img/2.jpg" +draft = false +weight = "" ++++ + +{{< upcoming_posts title="Upcoming Events" >}} + +{{< newest_posts title="Newest Posts" number=3 >}} + +[Posts]({{< ref "/post" >}}) diff --git a/example/content/sitemap.md b/example/content/sitemap.md new file mode 100644 index 0000000000000000000000000000000000000000..09fe9ffa93d39671251b4085f21d7ca7d3c39138 --- /dev/null +++ b/example/content/sitemap.md @@ -0,0 +1,12 @@ ++++ +title = "Sitemap" +date = 2019-09-05T19:47:05+09:00 +publishDate = 2019-09-05T19:47:05+09:00 ++++ + + - [About this theme]({{< ref "about/" >}}) + - [Features]({{< ref "features/" >}}) + - [Build your site]({{< ref "features/build/" >}}) + - [List layout]({{< ref "features/list/" >}}) + - [Edit contents]({{< ref "features/contents/" >}}) + diff --git a/example/static/img/2.jpg b/example/static/img/2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bccaf8b0e3dbc288a0ed842657f680a74d3477c8 Binary files /dev/null and b/example/static/img/2.jpg differ diff --git a/example/static/img/4.png b/example/static/img/4.png new file mode 100644 index 0000000000000000000000000000000000000000..f2f4e35b3db6e4a4cb76f61554b00fbf9da14a4c Binary files /dev/null and b/example/static/img/4.png differ diff --git a/example/static/img/build1.jpg b/example/static/img/build1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6003649d826268d3af631f75c82ef27e3057b8ed Binary files /dev/null and b/example/static/img/build1.jpg differ diff --git a/example/static/img/edit1.jpg b/example/static/img/edit1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9ca5ce2f62e5c01e589b736748b7e6b25911ebe8 Binary files /dev/null and b/example/static/img/edit1.jpg differ diff --git a/example/static/img/hugo_logo.png b/example/static/img/hugo_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..48acf346c9e87d15ca919141c2b283e7fa8bce4e Binary files /dev/null and b/example/static/img/hugo_logo.png differ diff --git a/example/static/img/landscape.JPG b/example/static/img/landscape.JPG new file mode 100755 index 0000000000000000000000000000000000000000..47e361fa76eb870b8c8f9a643a097b61d957abff Binary files /dev/null and b/example/static/img/landscape.JPG differ diff --git a/example/static/img/landscape2.JPG b/example/static/img/landscape2.JPG new file mode 100755 index 0000000000000000000000000000000000000000..94edca36c61c022763b0df663b2a87dcddc03f6f Binary files /dev/null and b/example/static/img/landscape2.JPG differ diff --git a/example/static/img/list1.jpg b/example/static/img/list1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9e7676dc05b7477b130ab0de134b1a3bf49dae12 Binary files /dev/null and b/example/static/img/list1.jpg differ diff --git a/example/static/img/rabbit2.png b/example/static/img/rabbit2.png new file mode 100644 index 0000000000000000000000000000000000000000..cfb1f9cfa9af3d824fb76e0993ae6c7865ff8614 Binary files /dev/null and b/example/static/img/rabbit2.png differ diff --git a/example/static/img/rabbit4.png b/example/static/img/rabbit4.png new file mode 100755 index 0000000000000000000000000000000000000000..453fafc281dadc30a8dfdca46dac6c1545c36cf3 Binary files /dev/null and b/example/static/img/rabbit4.png differ diff --git a/example/static/img/screenshots/embmap1.png b/example/static/img/screenshots/embmap1.png new file mode 100755 index 0000000000000000000000000000000000000000..b37d2592c97525c225d3c8f49710353d4ceb5ade Binary files /dev/null and b/example/static/img/screenshots/embmap1.png differ diff --git a/example/static/img/screenshots/embmap2.png b/example/static/img/screenshots/embmap2.png new file mode 100755 index 0000000000000000000000000000000000000000..301fe1ca28e1aacfa734f148c5404f89789d8372 Binary files /dev/null and b/example/static/img/screenshots/embmap2.png differ diff --git a/example/static/img/screenshots/fmbanner_fig.png b/example/static/img/screenshots/fmbanner_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..7a221ba8454e849b02d8e3110eaf59ceec0b3e38 Binary files /dev/null and b/example/static/img/screenshots/fmbanner_fig.png differ diff --git a/example/static/img/screenshots/fmtags_fig.png b/example/static/img/screenshots/fmtags_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..b16e6ee237cbe97ba32ae270663634486c19c5bb Binary files /dev/null and b/example/static/img/screenshots/fmtags_fig.png differ diff --git a/example/static/img/screenshots/fmtitle_fig.png b/example/static/img/screenshots/fmtitle_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..44b4dff1e32b13d245464d866c34141ce270d12e Binary files /dev/null and b/example/static/img/screenshots/fmtitle_fig.png differ diff --git a/example/static/img/screenshots/footer_fig.png b/example/static/img/screenshots/footer_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..e2b8411dfc8933217c4ce8556455376737fdfe6a Binary files /dev/null and b/example/static/img/screenshots/footer_fig.png differ diff --git a/example/static/img/screenshots/infobar_fig.png b/example/static/img/screenshots/infobar_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..e31a0e89c134d0d0142529a4a8132b74b5dfd598 Binary files /dev/null and b/example/static/img/screenshots/infobar_fig.png differ diff --git a/example/static/img/screenshots/links_fig.png b/example/static/img/screenshots/links_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..c0fcebc7f5b936378cd0d2a9fbd21e6b228baf2a Binary files /dev/null and b/example/static/img/screenshots/links_fig.png differ diff --git a/example/static/img/screenshots/mainmenu_fig.png b/example/static/img/screenshots/mainmenu_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..b2b3e0bfc6fd8c86622c9dfe8566bd186b55ec53 Binary files /dev/null and b/example/static/img/screenshots/mainmenu_fig.png differ diff --git a/example/static/img/screenshots/post_fig.png b/example/static/img/screenshots/post_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..f7fd464eb2a8cfda5ad9bf33c9bd2c560a2df84b Binary files /dev/null and b/example/static/img/screenshots/post_fig.png differ diff --git a/example/static/img/screenshots/postlist_fig.png b/example/static/img/screenshots/postlist_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..12d72c686c83cfd22c77e283105d51c075e542c4 Binary files /dev/null and b/example/static/img/screenshots/postlist_fig.png differ diff --git a/example/static/img/screenshots/textlist_fig.png b/example/static/img/screenshots/textlist_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..c8357744a69173bbc00da431e1cee02adcc69bb9 Binary files /dev/null and b/example/static/img/screenshots/textlist_fig.png differ diff --git a/example/static/img/screenshots/tilelist_fig.png b/example/static/img/screenshots/tilelist_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..03fd54f33fe12d5c7b5f9698f1e2862c1213a3be Binary files /dev/null and b/example/static/img/screenshots/tilelist_fig.png differ diff --git a/example/static/img/screenshots/topfigures_headermenu_fig.png b/example/static/img/screenshots/topfigures_headermenu_fig.png new file mode 100644 index 0000000000000000000000000000000000000000..5eee6d6a8f2577f3caed576c0db8a2696677db65 Binary files /dev/null and b/example/static/img/screenshots/topfigures_headermenu_fig.png differ diff --git a/example/static/img/thumbnail.png b/example/static/img/thumbnail.png new file mode 100755 index 0000000000000000000000000000000000000000..94793595ad7fb23c09cbaeba321b0126ee690d0d Binary files /dev/null and b/example/static/img/thumbnail.png differ diff --git a/example/static/img/topfigure1.jpg b/example/static/img/topfigure1.jpg new file mode 100755 index 0000000000000000000000000000000000000000..55dd6c0b92c73cc1e273a8a135fef6d4209b8b1d Binary files /dev/null and b/example/static/img/topfigure1.jpg differ diff --git a/example/static/img/topfigure2.jpg b/example/static/img/topfigure2.jpg new file mode 100755 index 0000000000000000000000000000000000000000..4ebf62ca418a450f0f5224ba8515de043f1e1ffa Binary files /dev/null and b/example/static/img/topfigure2.jpg differ diff --git a/example/static/img/topfigure3.jpg b/example/static/img/topfigure3.jpg new file mode 100755 index 0000000000000000000000000000000000000000..0ff7dcb291b2cf32f2f9564c40d566a5ac7ca31b Binary files /dev/null and b/example/static/img/topfigure3.jpg differ diff --git a/example/static/img/topfigure4.jpg b/example/static/img/topfigure4.jpg new file mode 100755 index 0000000000000000000000000000000000000000..4bc15a68191afcaf4aa38dbfc6e7ae7cb99a7ed0 Binary files /dev/null and b/example/static/img/topfigure4.jpg differ diff --git a/example/static/img/topfigure5.jpg b/example/static/img/topfigure5.jpg new file mode 100755 index 0000000000000000000000000000000000000000..af9ce73625bcd8865c65870735fa2b0bedfb4ce5 Binary files /dev/null and b/example/static/img/topfigure5.jpg differ diff --git a/example/static/img/white_cabinet_components.png b/example/static/img/white_cabinet_components.png new file mode 100755 index 0000000000000000000000000000000000000000..64e129daa46b599aba636e828bb9b2940d45a1a5 Binary files /dev/null and b/example/static/img/white_cabinet_components.png differ diff --git a/example/themes b/example/themes new file mode 120000 index 0000000000000000000000000000000000000000..6581736d62382ae8c6af9609548b31b112d5234c --- /dev/null +++ b/example/themes @@ -0,0 +1 @@ +../../ \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 6355bbc38b8489a975ff22b37d397f63bee80cf4..8e62925b2a45658d2a220858fef48aceef7395b8 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,7 +1,6 @@ {{ define "main" }} - @@ -10,10 +9,10 @@ {{ partial "breadcrumb.html" . }}
{{ .Title }}
- {{ $paginator := .Paginate .Data.Pages }} + {{ $paginator := .Paginate .RegularPages }} {{ range ($paginator.Pages.GroupByDate "2006") }}

{{ .Key }}

- {{ range .Pages }} + {{ range .Pages}} {{ partial "postcard" (dict "context" . "card_type" "simple" ) }} {{ end }} {{ end }} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index b1edf8d3a3054248b6d996b383768be6b634e49d..d03ebe443abd19445c53e6f5c0af7edb6f882c9a 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -21,7 +21,6 @@ } - @@ -32,11 +31,10 @@
- - {{ range .Site.Menus.main.ByWeight }} - {{ if eq .Identifier $pgttl }} + {{ range .Site.Menus.main.ByWeight }} + {{ if eq .Identifier $pgttl }} - {{ end }} + {{ end }} {{ partial "breadcrumb.html" . }}
{{ .Title }}
@@ -48,11 +46,13 @@
{{ end }}*/}} +
{{ partial "breadcrumb.html" . }}
{{ .Title }}
- {{ $paginator := .Paginate .Data.Pages }} + + {{ $paginator := .Paginate .RegularPages }} {{ range ($paginator.Pages.GroupByDate "2006") }}

{{ .Key }}

{{ range .Pages }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 97cdce005110d45280b35857f8944c7a6ffe7cd9..c8be37d6ce41aa6f92edd5c807dfcd335460ebda 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,18 +1,29 @@ {{ define "main" }} - + -
-
- {{ partial "breadcrumb.html" . }} -
{{ .Title }}
-
-
- {{ .Content }} -
-
-
-
+
+
+ {{ partial "breadcrumb.html" . }} +
{{ .Title }}
+ {{ $tag_color := .Site.Params.categories_colors }} + {{ if .Params.tags }} + {{ $numtags := len .Params.tags }} + {{ $first_tag := index .Params.tags 0 }} + {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} {{/* --if-- insert tag box */}} +
+ {{ range .Params.tags }} + {{ $param_tag_name := . }} + {{ $param_tag_name }} + {{ end }} +
+ {{ end }} {{ end }} {{/* --end-- insert tag box */}} + {{ end }} +
+ {{ .Content }} +
+
+
{{end}} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 3c745e6e7b5f31f7be4bc8c932486baff6b1eaeb..92d12d08320221b4735b91a3cbf1945c1bcf07d4 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -4,6 +4,7 @@
{{ partial "breadcrumb.html" . }}
+
{{ .Title }}
    {{ $data := $.Data }} diff --git a/layouts/partials/analytics.html b/layouts/partials/analytics.html new file mode 100644 index 0000000000000000000000000000000000000000..c72bc4e51c159ca6ab4d4c4ab645b1337cca0cec --- /dev/null +++ b/layouts/partials/analytics.html @@ -0,0 +1,13 @@ +{{ if not .Site.IsServer }} +{{ with .Site.GoogleAnalytics }} + + + +{{ end }} +{{ end }} diff --git a/layouts/partials/embedded_css.html b/layouts/partials/embedded_css.html new file mode 100644 index 0000000000000000000000000000000000000000..caedaedf1f8caec4b6d8df92c53cb2216ea646c5 --- /dev/null +++ b/layouts/partials/embedded_css.html @@ -0,0 +1,17 @@ + + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8e8e47dfebbd428ea91327c90d44d5782e561d29..295faf84dd60f849e9866f03d1c7d81e87c4fc81 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -25,9 +25,10 @@ clear: both; } - .footer_all a:link { - color: #aaa; - } + .footer_all a:link { color: #aaa; } + .footer_all a:visited { color:#aea; } + .footer_all a:hover { color:#aae; } + .footer_all a:active { color:#eaa; } .sitemap { float: left; @@ -126,7 +127,7 @@ footer { position: relative; - background-color: #2f4f4f; + background-color: #2a2a2a; width: 100%; height: 100%; margin: 0; @@ -148,13 +149,8 @@
{{ with .Site.GetPage "sitemap"}} - {{ .Content }} + {{ .Content }} {{ end }} - - - - -
@@ -165,20 +161,23 @@
- {{ range .Site.Params.address }} + {{ range $val := .Site.Params.address }}
- {{ .description }}
- 〒 {{ .postcode }}
- {{ .address }}
- {{ .room }}
- TEL: {{ .tel }}
- FAX: {{ .fax }}
+ {{ with $.Site.GetPage $val }} + {{ .Title }} + {{ .Content }} + {{ end }}
{{ end }}
-
© 2019 : - Center for Nuclear Study, the University of Tokyo +
+ {{ if .Site.Params.copy_year }} + {{ if .Site.Params.copy_name }} + © {{ .Site.Params.copy_year }} : + {{ .Site.Params.copy_name }} + {{ end }} + {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6be09b08f49a05970b8cb5039daf898fea8542a3..ff90b79802af423de17f2c42aa51b50c75ec20f1 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,13 +1,44 @@ - + + + {{- partial "analytics" . -}} {{ if not .IsHome }}{{ .Title }}｜{{ end }}{{ .Site.Title }} + + + + + {{ if .Site.Params.math }} + + + + + + + + + {{ end }} + + {{ partial "embedded_css.html" . }} + @@ -21,7 +52,7 @@
-
diff --git a/layouts/partials/main_menu.html b/layouts/partials/main_menu.html index 76d37e4b634d49d4a7307dd94a4c96bfda70631b..b4f6ed2bd2fd8fedf22514bb17c48b78d9689598 100644 --- a/layouts/partials/main_menu.html +++ b/layouts/partials/main_menu.html @@ -1,6 +1,5 @@ - diff --git a/layouts/partials/postcard.html b/layouts/partials/postcard.html index 3dbb991bdbca19c37bbebedcf4682bcffc4aeafb..39cc8f0a43d811f0b7c82ff19e2a02d64409490b 100644 --- a/layouts/partials/postcard.html +++ b/layouts/partials/postcard.html @@ -1,108 +1,91 @@ + {{ if eq .card_type "upcoming" }} -{{ with .context }} -{{ $tag_color := .Site.Params.categories_colors }} -
+ {{ with .context }} + {{ $tag_color := .Site.Params.categories_colors }} +
{{ if ne (.Params.eventStartDate) (.Params.eventEndDate) }} -
- {{ dateFormat "2 Jan, 2006" .Params.eventStartDate }}-{{ dateFormat "2 Jan, 2006" .Params.eventEndDate }} - {{ if .Params.tags }} - {{ $numtags := len .Params.tags }} - {{ $first_tag := index .Params.tags 0 }} - {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} -
- {{ range .Params.tags }} +
+ {{ dateFormat "2 Jan, 2006" .Params.eventStartDate }} - {{ dateFormat "2 Jan, 2006" .Params.eventEndDate }} + {{ if .Params.tags }} + {{ $numtags := len .Params.tags }} + {{ $first_tag := index .Params.tags 0 }} + {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} {{/* --if-- insert tag box */}} +
+ {{ range .Params.tags }} {{ $param_tag_name := . }} - {{ if in $tag_color $param_tag_name }} {{/* if tag_name is defined in categories_color */}} - {{ range $i, $tag_name := $tag_color }} - {{ if eq $tag_name $param_tag_name }} - {{ $param_tag_name }} - {{ end }} - {{ end }} - {{ else }} - {{ $param_tag_name }} - {{ end }} - {{ end }} -
- {{ end }} {{ end }} {{ end }} -
+ {{ $param_tag_name }} + {{ end }} +
+ {{ end }} {{ end }} {{/* --end-- insert tag box */}} + {{ end }} +
- {{ else }} + {{ else }} {{/* if eventStartDate == eventEndDate */}} -
- {{ dateFormat "2 Jan, 2006" .Params.eventEndDate }} - {{ if .Params.tags }} - {{ $numtags := len .Params.tags }} - {{ $first_tag := index .Params.tags 0 }} - {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} -
- {{ range .Params.tags }} +
+ {{ dateFormat "2 Jan, 2006" .Params.eventEndDate }} + {{ if .Params.tags }} + {{ $numtags := len .Params.tags }} + {{ $first_tag := index .Params.tags 0 }} + {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} +
{{/* --if-- insert tag box */}} + {{ range .Params.tags }} {{ $param_tag_name := . }} - {{ if in $tag_color $param_tag_name }} {{/* if tag_name is defined in categories_color */}} - {{ range $i, $tag_name := $tag_color }} - {{ if eq $tag_name $param_tag_name }} - {{ $param_tag_name }} - {{ end }} - {{ end }} - {{ else }} - {{ $param_tag_name }} - {{ end }} - {{ end }} -
- {{ end }} {{ end }} {{ end }} -
+ {{ $param_tag_name }} + {{ end }} {{/* --end-- insert tag box */}} +
+ {{ end }} {{ end }} + {{ end }} +
{{ end }}

{{ .Title }}

{{ .Content }}

-

Read more

+

Read more...

+
-{{ end }} + + {{ end }} {{/* --end-- with */}} {{ else if eq .card_type "normal" }} -{{ with .context }} -{{ $tag_color := .Site.Params.categories_colors }} -
+ {{ with .context }} + {{ $tag_color := .Site.Params.categories_colors }} +
{{ dateFormat "2 Jan, 2006" .Date }} {{ if .Params.tags }} - {{ $numtags := len .Params.tags }} - {{ $first_tag := index .Params.tags 0 }} - {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} -
- {{ range .Params.tags }} - {{ $param_tag_name := . }} - {{ if in $tag_color $param_tag_name }} {{/* if tag_name is defined in categories_color */}} - {{ range $i, $tag_name := $tag_color }} - {{ if eq $tag_name $param_tag_name }} - {{ $param_tag_name }} - {{ end }} + {{ $numtags := len .Params.tags }} + {{ $first_tag := index .Params.tags 0 }} + {{ if gt $numtags 0 }} {{ if ne $first_tag "" }} +
+ {{ range .Params.tags }} + {{ $param_tag_name := . }} + {{ $param_tag_name }} {{ end }} - {{ else }} - {{ $param_tag_name }} - {{ end }} +
+ {{ end }} {{ end }} {{ end }}
- {{ end }} {{ end }} {{ end }} +

{{ .Title }}

+

{{ .Content }}

+

Read more...

-

{{ .Title }}

-

{{ .Content }}

-

Read more

-
-{{ end }} + {{ end }} + {{ else if eq .card_type "simple" }} - {{ with .context }} + {{ with .context }} {{ $tag_color := .Site.Params.categories_colors }} -
-
+
+
{{ dateFormat "2 Jan, 2006" .Date }} -
-

{{ .Title }}

-

{{ .Content }}

-

Read more

-
- {{ end }} +
+

{{ .Title }}

+

{{ .Content }}

+

Read more...

+
+ {{ end }} {{ end }} diff --git a/layouts/shortcodes/access.html b/layouts/shortcodes/access.html index 5d02bc60a416df128fc762589045facb41b6691c..ac9cc7d0a1ba09a66b712106de3fc76cc0a5a013 100644 --- a/layouts/shortcodes/access.html +++ b/layouts/shortcodes/access.html @@ -1,10 +1,14 @@ -{{ range .Site.Params.address }} - {{ .description }}
- 〒 {{ .postcode }}
- {{ .address }}
- {{ .room }}
- TEL: {{ .tel }}
- FAX: {{ .fax }}
- -
+{{ range $val := .Site.Params.address }} +
+ {{ with $.Site.GetPage $val }} + {{ .Title }} + {{ .Content }} + {{ if .Params.googlemap_url }} + + {{ end }} + {{ end }} +
+
{{ end }} + + diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html deleted file mode 100644 index f62b1eff467de58d98c5cf91a1a1b530aecfaeb4..0000000000000000000000000000000000000000 --- a/layouts/shortcodes/img.html +++ /dev/null @@ -1,9 +0,0 @@ -{{ $src := .Get "src" }} -{{ $config := imageConfig (printf "/static/%s") $src }} -{{ .Get - - diff --git a/layouts/shortcodes/newest_posts.html b/layouts/shortcodes/newest_posts.html new file mode 100644 index 0000000000000000000000000000000000000000..b250e8c82f6587c797bdcf24ef7c2ab92e69e580 --- /dev/null +++ b/layouts/shortcodes/newest_posts.html @@ -0,0 +1,15 @@ +{{- $title := .Get "title" -}} +{{- if not $title -}} + {{- $title := "Newest Posts" -}} +{{- end -}} +{{- $number:= .Get "number" -}} +{{- if not $number -}} + {{- $number:= 3 -}} +{{- end -}} + +
{{ $title }}
+{{ range first $number (where .Site.RegularPages "Section" "post").ByDate.Reverse }} + {{ partial "postcard" (dict "context" . "card_type" "normal" ) }} +{{ end }} +
+
diff --git a/layouts/shortcodes/postcards.html b/layouts/shortcodes/postcards.html index f5f48594ee541ffa458b7560a397d46d9652099d..17f0499e4d9b7b40d09eedd87e2a2d3a8487cfee 100644 --- a/layouts/shortcodes/postcards.html +++ b/layouts/shortcodes/postcards.html @@ -7,7 +7,7 @@

Upcoming

-{{ range ($.Page.CurrentSection.Pages.ByParam "endEventDate") }} +{{ range (where (.Site.RegularPages.ByParam "eventEndDate") "Section" "post") }} {{ $FormattedNow := (now.AddDate 0 0 -1) }} {{ if le $FormattedNow .Params.eventEndDate }} {{ partial "postcard" (dict "context" . "card_type" "upcoming" ) }} @@ -19,6 +19,6 @@ {{ $numlist := 3 }}

{{ $numlist }} Newest Posts

-{{ range first $numlist (where $.Page.CurrentSection.Pages "Section" "post") }} +{{ range first $numlist (where .Site.RegularPages "Section" "post").ByDate.Reverse }} {{ partial "postcard" (dict "context" . "card_type" "normal" ) }} {{ end }} diff --git a/layouts/shortcodes/textlist.html b/layouts/shortcodes/textlist.html index 507eaf248d6db93bf2a562f668c4c2d66c5841d9..d3ca3a9f1bec1a7458ef7f2d22c853652a8f834f 100644 --- a/layouts/shortcodes/textlist.html +++ b/layouts/shortcodes/textlist.html @@ -1,32 +1,5 @@ - + {{ $section := .Page.CurrentSection }} @@ -38,23 +11,7 @@ {{ end }}
    - {{ $w := 0 }} - {{ $v := 0 }} - {{ range $section.Sections.ByWeight }} - {{ $w = .Params.Weight }} - {{ range $section.Pages.ByWeight }} - {{ if and (le .Params.Weight $w) (gt .Params.Weight $v) }} -
  • {{ .Title }}
    • - {{ end }} - {{ end }} - -
  • {{ .Title }}
    • - {{ $v = $w }} - {{ end }} - {{ range $section.Pages.ByWeight }} - {{ if gt .Params.Weight $w }} -
  • {{ .Title }}
    • - {{ end }} +
  • {{ .Title }}
    • {{ end }}
diff --git a/layouts/shortcodes/tilelist.html b/layouts/shortcodes/tilelist.html index d681421ab1ea58d68e16d4105b7b7a7e1c267e1b..9a883f8edae8bb7dd5378c7d1bea0f38b6026e38 100644 --- a/layouts/shortcodes/tilelist.html +++ b/layouts/shortcodes/tilelist.html @@ -1,72 +1,5 @@ - + {{ $section := .Page.CurrentSection }} @@ -78,26 +11,13 @@ {{ end }}
- - {{ range $section.Sections.ByWeight }} - {{ if .Params.mktile }} - - {{ -
-
{{ .Title }}
-
- - {{ end }} - {{ end }} - - {{ range $section.Pages.ByWeight }} {{ if .Params.mktile }} {{ -
-
{{ .Title }}
-
+
+
{{ .Title }}
+
{{ end }} {{ end }} diff --git a/layouts/shortcodes/upcoming_posts.html b/layouts/shortcodes/upcoming_posts.html new file mode 100644 index 0000000000000000000000000000000000000000..7a02f93b75cb2b547852061fa4ecb4f42a9d06c7 --- /dev/null +++ b/layouts/shortcodes/upcoming_posts.html @@ -0,0 +1,14 @@ +{{- $title := .Get "title" -}} +{{- if not $title -}} + {{- $title := "Upcoming Events" -}} +{{- end -}} +
{{ $title }}
+{{ range (where (.Site.RegularPages.ByParam "eventEndDate") "Section" "post").ByDate.Reverse }} + {{ $FormattedNow := (now.AddDate 0 0 -1) }} + {{ if le $FormattedNow .Params.eventEndDate }} + {{ partial "postcard" (dict "context" . "card_type" "upcoming" ) }} + {{ end }} + +{{ end }} +
+
diff --git a/static/css/header.css b/static/css/header.css index d85bc7c477f1a76d9288d0a6d2d33124f8ace0e0..c504e7b41c5881df9f8fde222c33790895fee57b 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -17,7 +17,7 @@ body { header { position: absolute; width: 100%; - height: 110px; + height: 100px; top: 190px; left: 0; background-color: rgba(0, 0, 0, 0.5); @@ -28,8 +28,9 @@ header { left: 0; width: 100%; height: 10px; - background-color: #66ffcc; + /*background-color: #66ffcc;*/ margin: 0 0; + z-index: 200; } @media screen and (min-width: 700px) { .black-belt { @@ -45,10 +46,10 @@ header { z-index: 200; color: #fff; } - .cns_logo { + .logo { margin-right: 10px; } - .cns_logo img { + .logo img { width: 60px; } .black-belt .title { @@ -88,11 +89,11 @@ header { z-index: 200; color: #fff; } - .cns_logo { + .logo { top: 15px; margin: 0 5px; } - .cns_logo img { + .logo img { width: 50px; } .black-belt .title { @@ -134,12 +135,12 @@ header { z-index: 200; color: #fff; } - .cns_logo { + .logo { top: -8px; position: relative; margin: 0 5px; } - .cns_logo img { + .logo img { width: 50px; } .black-belt .title { @@ -206,27 +207,28 @@ header { text-align: left; display: none; position: absolute; - top: 110px; + top: 100px; left: 0; z-index: 300; } .humberger-menu ul { margin: 0 0; - padding: 20px 0; + padding: 26px 0; list-style-type: none; } .humberger-menu ul li { padding: 5px 100px 5px 80px; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'; font-size: 20px; + transition: all 0.2s; } - .humberger-menu .u-tokyo_logos { + .humberger-menu .link_logo { display: none; } - .humberger-menu .u-tokyo_logos { + .humberger-menu .link_logo { padding: 0 0 !important; } - .humberger-menu .u-tokyo_logos img { + .humberger-menu .link_logo img { display: none; } } @@ -237,14 +239,14 @@ header { text-align: center; display: none; position: absolute; - top: 110px; + top: 100px; left: 0; z-index: 300; width: 100%; } .humberger-menu ul { margin: 0 0; - padding: 20px 0; + padding: 26px 0; list-style-type: none; } .humberger-menu ul li { @@ -252,17 +254,17 @@ header { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'; font-size: 20px; } - .humberger-menu .u-tokyo_logos { + .humberger-menu .link_logo { padding: 0 0 !important; } - .humberger-menu .u-tokyo_logos img { + .humberger-menu .link_logo img { width: 140px; } } .humberger-menu ul li:hover { background-color: rgba(0, 0, 0, 0.5); } -.humberger-menu .u-tokyo_logos:hover { +.humberger-menu .link_logo:hover { background-color: rgba(0, 0, 0, 0) !important; } .humberger-menu ul a { @@ -270,9 +272,9 @@ header { text-decoration: none; } .background { - position: absolute; - top 0; - left 0; + position: fixed; + top: 0; + left: 0; width: 100vw; height: 100vh; display: none; @@ -308,10 +310,10 @@ header { margin: 0 5px; position: relative; } - .header-menu .u-tokyo_logos img { + .header-menu .link_logo img { height: 30px; } - .header-menu .u-tokyo_logos { + .header-menu .link_logo { margin: 0 4px !important } } @@ -330,7 +332,7 @@ header { position: relative; font-size: 0.8em; } - .header-menu .u-tokyo_logos img { + .header-menu .link_logo img { display: none; } } @@ -349,6 +351,6 @@ header { .header-menu ul li a:hover { color: #67c5ff; } -.header-menu .u-tokyo_logos:before { +.header-menu .link_logo:before { display: none !important; } diff --git a/static/css/list.css b/static/css/list.css index af39daeeed37134be7ad748db317e5b3bc8b15f5..735e745998eb3dd3ed1a16e7003d314cdbe1c831 100644 --- a/static/css/list.css +++ b/static/css/list.css @@ -1,23 +1,16 @@ .year { - width: 100%; - margin-left: 45px; + width: 70%; + margin-left: 8%; + margin-right: 0px; text-align: left; } - -/* -.year h1 { - position: relative; - display: inline-block; - padding: 0 21px; -} -*/ .year h1 { position: relative; padding-left: 25px; } .year h1:before { - position: absolute; + position: absolute; content: ''; bottom: -3px; left: 0; @@ -28,29 +21,10 @@ border-bottom: solid 15px rgb(47, 79,79); } .year h1:after { - position: absolute; + position: absolute; content: ''; bottom: -3px; left: 10px; - width: 70%; + width: 100%; border-bottom: solid 3px rgb(47, 79,79); } - -/* -.year h1:before, .year h1:after { - content: ''; - position: absolute; - top: 50%; - display: inline-block; - width: 45px; - height: 1px; - background-color: black; -} - -.year h1:before { - left:0; -} -.year h1:after { - right: 0; -} -*/ diff --git a/static/css/main.css b/static/css/main.css index cd885ad8ec8c6f769056f6de540de5f04957adbf..9beb34e1d63ec1068b89bfaa64ef5d9e5e85e40f 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -13,11 +13,23 @@ main { .main-list { display: block; - width: 100%; + width: 94%; + margin-left: 3%; + margin-right: 3%; } .main-terms { display: block; - width: 100%; + width: 94%; + margin-left: 3%; + margin-right: 3%; +} + +p code { + padding: 2px 3px 2px 3px; + background-color: #e8e8e8; + font-weight: normal; + font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; + font-size: 12px; } diff --git a/static/css/main_menu.css b/static/css/main_menu.css index 56a36b2d19e5d912fa175dcc9bb184feb194cdfa..257d2e3f77457bfdfaf58aa506cd8762f024a208 100644 --- a/static/css/main_menu.css +++ b/static/css/main_menu.css @@ -20,15 +20,19 @@ } .nest { -/* display: none;*/ text-align: left; padding: 0 15px 20px 15px; } +.nest p img { + width: 50vw; + max-width: 80%; +} + .button { padding-left: 10px; + padding-right: 50px; width: 100%; - height: 40px; background-color: #fff; color: #1700ad; cursor: pointer; @@ -38,7 +42,6 @@ border: solid 1px #ddd; border-radius: 5px; margin-bottom: 9px; - } .button.button_1 { @@ -50,6 +53,8 @@ content: "\025bd"; position: absolute; right: 20px; + top: 50%; + margin-top: -0.7em; color: #999; transition: all 0.2s ease-out; opacity: 0.5; @@ -75,37 +80,3 @@ } -/* for the lab section */ - -.labtile { - position: relative; - float: left; - width: 180px; - height: 180px; - margin-right: 10px; -} - -.labtile img { - width: 180px; - height: 120px; - object-fit: cover; - margin-bottom: 50px; - background: #f7f7f7; - box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29); -} - -.labtile div.caption { - position: absolute; - width: 100%; - height: 33%; - top: 125px; - left: 0px; - color: #000; - background: #fff; - font-size: 20px; - text-align: center; -} - -/* for the event/info section */ - -/* now using postcard.css */ diff --git a/static/css/postcard.css b/static/css/postcard.css index 002eede17acfeccb9c5c1b97543c9dce2f76e1e4..2dea1790bee4c0698b105379b3316beb281dbac9 100644 --- a/static/css/postcard.css +++ b/static/css/postcard.css @@ -7,18 +7,16 @@ .postcard { background-color: #fff; - padding: 10px; + padding: 3%; border-radius: 6px; -/* box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.29); */ - box-shadow: 0 2px 5px #ccc; - width: 85%; - height: 165px; - color: #1700ad; + box-shadow: 0 6px 15px #dde; + width: 93%; + height: 176px; overflow: hidden; position: relative; font-size: 16px; text-align: left; - margin: 15px; + margin: 2% 8px 12px 2%; } .postcard p{ @@ -113,25 +111,12 @@ left: 0; width: 100%; height: 100px; - background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%); - background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%); + background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 60%, rgba(255,254,253,1.0) 100%); + background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 60%, rgba(255,254,253,1.0) 100%); content: ""; } -.postcard div.eventdate { - position: relative; - /*background-color: #125; */ - background-color: #6494ed; - padding: 3px 8px 3px 8px; - text-align: center; - font-size: 10px; - border-radius: 2px; - width: 100px; - height: auto; - color: #eef; -} - -.postcard div.tags{ +div.tags{ display: table; border-collapse: separate; border-spacing: 3px 0; @@ -143,90 +128,113 @@ text-align: left; } -@media screen and (min-width: 450px) { - .postcard div.tags { - left: calc(100% + 3px); - top: 3px; - } -} - -@media screen and (max-width: 450px) { - .postcard div.eventdate { - margin-bottom: 10px; - } - .postcard div.tags { - left: -5px; - top: 25px; - } -} - -/* the default tag button */ - -.postcard div a.tagbutton { +.tags a.tagbutton { padding: 1px 4px 1px 4px; margin: 1px 5px 1px 5px; font-size: 10px; border-radius: 8px; transition: .4s; text-decoration: none; - color:var(--gray-color); - border: solid 1px var(--gray-color); + background-image: linear-gradient(45deg, gray 0%, gray 100%); + border: solid 1px gray; + color: white; transition: .4s; } -.postcard div a.tagbutton:hover { - background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%); - color: white; +.tags a.tagbutton:hover { + color:gray; + border: solid 1px gray; + background : white; } -.postcard div a.red { - color:var(--red-color); - border: solid 1px var(--red-color); -} -.postcard div a.red:hover { - background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%); - color: white; +.postcard div.eventdate { + position: relative; + background-color: #2a2a2a; + padding: 3px 8px 3px 8px; + text-align: center; + font-size: 13px; + border-radius: 2px; + width: 180px; + height: auto; + color: #eef; } -.postcard div a.blue{ - color:var(--blue-color); - border: solid 1px var(--blue-color); +@media screen and (min-width: 720px) { + .postcard div.tags { + left: calc(100% + 3px); + top: 3px; + } } -.postcard div a.blue:hover { - background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%); - color: white; -} +@media screen and (max-width: 720px) { + .postcard div.eventdate { + margin-bottom: 10px; + } + .postcard div.tags { + left: -5px; + top: 31px; + } + .postcard h2.post-title { + margin-top: 20px; + } -.postcard div a.green{ - color:var(--green-color); - border: solid 1px var(--green-color); -} + .postcard { + height: 193px; + width: 90%; + } + .postcard::before { + background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.9) 80%, rgba(255,254,253,1.0) 100%); + background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.9) 80%, rgba(255,254,253,1.0) 100%); + content: ""; + } -.postcard div a.green:hover { - background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%); - color: white; + .tags div a.tagbutton { + font-size: 5px; + border: solid 1px white; + } } +/* the default tag button */ .postcard .read-more{ position: absolute; bottom: 20px; + box-shadow: 0 0 4px white; right: 20px; width: auto; font-size: 12px; font-weight: bold; /*padding: 0.25em 0.25em; */ padding: 1px 7px 1px 7px; - border-radius: 4px 15px 15px 4px; + border-radius: 12px 12px 12px 12px; transition: .4s; text-decoration: none; - border: solid 2px #67c5ff; - color: #67c5ff; + border: solid 2px gray; + color: gray; } .postcard .read-more:hover{ - zoom: 1.02; - background: #67c5ff; + background: gray; color: white; } + +.postcard .katex-display { + overflow: hidden; + width: 100%; +} +.postcard pre { + overflow: hidden; + width: 100%; +} + +.posts-title { + text-align: center; + font-size: 18px; + margin-top: 15px; + margin-left: 70px; + color: #124; + margin-right: 70px; + margin-bottom: 20px; + background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */ + -pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); diff --git a/static/css/sidebar.css b/static/css/sidebar.css index b3949c91567ec110544a394a21921930428a7571..8e6a718fb2bf8b493f3b8b8dbf9405562ca39424 100644 --- a/static/css/sidebar.css +++ b/static/css/sidebar.css @@ -88,6 +88,7 @@ } .topic_list-narrow { + display: box; align: center; margin: 0 auto; width: 100vw; @@ -102,7 +103,7 @@ } .slick-initialized .slick-slide{ - opacity: 0.55; + opacity: 0.4; } .slick-initialized .slick-slide.slick-active{ diff --git a/static/css/single.css b/static/css/single.css index 11f418442cb737f23931a050dd114fe9ef77ff51..57204244ee0166c9b5f76e573f8c9b0e7d8bb906 100644 --- a/static/css/single.css +++ b/static/css/single.css @@ -1,18 +1,45 @@ .single_page { display: block; grid-area: areaA; - width: 95%; + width: 94%; text-align: left; margin-left: 3%; + margin-right: 3%; /*border: solid 5px green; */ } + +.single_page .content { + margin-top: 0px; +} + +.single_page .tags { + margin-left: 6px; +} + .single_page h1 { border-bottom: solid 1px #ddd;; font-size: 23px; margin-left: 3px; } + +.single_page pre { + width:100%; + overflow-x:auto; +} + +.single_page .katex{ + overflow-x:auto; + overflow-y:hidden; + padding: 4px; +} +.single_page .katex-display { + display:block; + width:100%; + height:auto; +} + .single_page h2 { display: inline-block; text-align: center; @@ -37,18 +64,48 @@ margin-left: 3px; } -.single_page section div article img { - float: left; +.single_page img { margin: 0 15px 15px 0; - width: 30%; + width: 40vw; +} + + +.single-tags { + display: table; + border-collapse: separate; + border-spacing: 3px 3px; + position: relative; + width: 100%; + height: auto; + text-align: right; +} + +a.tagbutton { + padding: 1px 4px 1px 4px; + margin: 1px 7px 1px 5px; + font-size: 10px; + border-radius: 8px; + transition: .4s; + text-decoration: none; + background-image: linear-gradient(45deg, gray 0%, gray 100%); + border: solid 1px gray; + color: white; + transition: .4s; +} + +a.tagbutton:hover { + color:gray; + border: solid 1px gray; + background : white; } .single-title{ margin-top: 0px; margin-bottom: 9px; - padding-left: 15px; - width: 96%; - height: 50px; + padding-left: 6%; + padding-right: 6%; + width: 88%; + height: auto; line-height:50px; font-size: 25px; diff --git a/static/css/slick.css b/static/css/slick.css index 57477e848b989426ab54c7b9ebff5eaf2318c1c6..8b2d5edf00f2e500de1fdd73fc491e43143eddb7 100755 --- a/static/css/slick.css +++ b/static/css/slick.css @@ -98,6 +98,10 @@ { pointer-events: none; } +.slick-initialized +{ + opacity: 1; +} .slick-initialized .slick-slide { display: block; diff --git a/static/css/split_container.css b/static/css/split_container.css index ba5938d4bf71d45516cc4ad3fa1b35e3d95509dd..26d58bf29a0d486bbd7da56bb15658045977eee8 100644 --- a/static/css/split_container.css +++ b/static/css/split_container.css @@ -1,9 +1,10 @@ .container { /* main + topics + link */ display: grid; - width: 100%; gap: 10px; - grid-template-columns: 3fr 1fr; + width: 100%; + gap: 2vw; grid-template-rows: minmax(450px, auto); + grid-template-columns: 68vw 1fr; grid-template-areas: "areaA areaB" "areaA areaC"; @@ -14,6 +15,7 @@ display: grid; width: 100%; grid-template-rows: 260px auto 100px; + grid-auto-columns: 100%; grid-template-areas: "areaB" "areaA" diff --git a/static/css/syntax.css b/static/css/syntax.css new file mode 100644 index 0000000000000000000000000000000000000000..2e3d81ce3ee44df6594a4ebe9f51e0071e90b074 --- /dev/null +++ b/static/css/syntax.css @@ -0,0 +1,72 @@ +/* Background */ .chroma { background-color: #ffffff } +/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: #000000; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold } +/* NameAttribute */ .chroma .na { color: #008080 } +/* NameBuiltin */ .chroma .nb { color: #0086b3 } +/* NameBuiltinPseudo */ .chroma .bp { color: #999999 } +/* NameClass */ .chroma .nc { color: #445588; font-weight: bold } +/* NameConstant */ .chroma .no { color: #008080 } +/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #800080 } +/* NameException */ .chroma .ne { color: #990000; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold } +/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold } +/* NameNamespace */ .chroma .nn { color: #555555 } +/* NameTag */ .chroma .nt { color: #000080 } +/* NameVariable */ .chroma .nv { color: #008080 } +/* NameVariableClass */ .chroma .vc { color: #008080 } +/* NameVariableGlobal */ .chroma .vg { color: #008080 } +/* NameVariableInstance */ .chroma .vi { color: #008080 } +/* LiteralString */ .chroma .s { color: #dd1144 } +/* LiteralStringAffix */ .chroma .sa { color: #dd1144 } +/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 } +/* LiteralStringChar */ .chroma .sc { color: #dd1144 } +/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 } +/* LiteralStringDoc */ .chroma .sd { color: #dd1144 } +/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 } +/* LiteralStringEscape */ .chroma .se { color: #dd1144 } +/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 } +/* LiteralStringInterpol */ .chroma .si { color: #dd1144 } +/* LiteralStringOther */ .chroma .sx { color: #dd1144 } +/* LiteralStringRegex */ .chroma .sr { color: #009926 } +/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 } +/* LiteralStringSymbol */ .chroma .ss { color: #990073 } +/* LiteralNumber */ .chroma .m { color: #009999 } +/* LiteralNumberBin */ .chroma .mb { color: #009999 } +/* LiteralNumberFloat */ .chroma .mf { color: #009999 } +/* LiteralNumberHex */ .chroma .mh { color: #009999 } +/* LiteralNumberInteger */ .chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 } +/* LiteralNumberOct */ .chroma .mo { color: #009999 } +/* Operator */ .chroma .o { color: #000000; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } +/* Comment */ .chroma .c { color: #999988; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } +/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd } +/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ .chroma .gr { color: #aa0000 } +/* GenericHeading */ .chroma .gh { color: #999999 } +/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd } +/* GenericOutput */ .chroma .go { color: #888888 } +/* GenericPrompt */ .chroma .gp { color: #555555 } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #aaaaaa } +/* GenericTraceback */ .chroma .gt { color: #aa0000 } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #bbbbbb } diff --git a/static/css/textlist.css b/static/css/textlist.css new file mode 100644 index 0000000000000000000000000000000000000000..80d52a22c2d05fb77681ffd0660c9fe40c844e49 --- /dev/null +++ b/static/css/textlist.css @@ -0,0 +1,26 @@ +.textlist { + position: relative; + border-top: dashed #ddd 1px; + border-bottom: dashed #ddd 1px; + padding: 0.5em 0 0.5em 2.3em; + margin-top: 30px; +} +.textlist li { + list-style-type: none; + padding: 0.1em 0; +} +.textlist li:before { + font-family: "Font Awesome 5 Free"; + content: "\f0da"; + font-weight: 900; + position: relative; + left: -0.5em; + color: gray; +} +.textlist li a { + text-decoration: none; + color: #000; +} +.textlist li a:hover { + color: #67c5ff; +} diff --git a/static/css/tilelist.css b/static/css/tilelist.css new file mode 100644 index 0000000000000000000000000000000000000000..41d1ffb38a1cf6302ae46574a4d80787a6b6cd50 --- /dev/null +++ b/static/css/tilelist.css @@ -0,0 +1,51 @@ +.tilelist { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; +} +.tile { + position: relative; + width: 30%; + min-width: 200px; + max-width: 260px; + margin: 10px 7px; + box-shadow: 0 2px 5px #ccc; + overflow: hidden; + border-radius: 3px; + transition: all 0.2s; +} +.tile:hover { + box-shadow: 0px 0px 5px 2px #67c5ff; +} +.tile:before { + content:""; + display: block; + padding-top: 75%; +} +.tile img { + position: absolute; + top: 0; + width: 100% !important; + height: 75%; + object-fit: scale-down; + margin: 0 0 !important; +} +.tile .caption { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 100%; + height: 25%; + top: 75%; + left: 0; + color: #000; + background-color: #fff; + font-size: 18px; + word-break: keep-all; +} +.tile .caption div { + line-height: 18px; + text-align: center; +} diff --git a/static/js/container.js b/static/js/container.js index c5c50558afa4276c59e5cf517d6ca28b64260f6c..d5887022aef313ef2d7f9523d2e4f6a38157fc5b 100644 --- a/static/js/container.js +++ b/static/js/container.js @@ -12,8 +12,8 @@ $(function(){ value = 700, /* Size for Narrow version, Change here!*/ oldBrowserWidth = value+1; - console.log("start logging"); - console.log($win.width()); +// console.log("start logging"); +// console.log($win.width()); function wideCSS(){ /* $container.className=wideClass; $sidebar.className="sidebar"; @@ -29,12 +29,17 @@ $(function(){ function narrowCSS(){ $container.className=narrowClass; $sidebar.className="sidebar-narrow"; - $topicList.className="topic_list-narrow"; $links.className="links-narrow"; $sitemap.className="sitemap-narrow"; $address.className="address-narrow"; - console.log("width changed: narrow"); + $topicList.className="topic_list-narrow"; + //console.log("width changed: narrow"); $(function(){ + + $('.topic_list-narrow').css({ + "opacity" : "0" + }); + $('.topic_list-narrow').not('.slick-initialized').slick({ dots: true, respondTo: 'window', @@ -44,25 +49,39 @@ $(function(){ arrows: false, slidesToShow: 1, autoplay: true, - autoplaySpeed: 4000, + autoplaySpeed: 5000, swipe: true, variableWidth: true }); - console.log("slick loaded"); + //console.log("slick loaded"); + //$('.slider').slick('slickGoTo', 0); $(".imgsize").css({ "width" : "240px", //width cannot control by here "height" : "180px", //"border": "solid 5px orange" - }); + }); $(".bannersize").css({ "width": "240px", "height": "180px", "padding-bottom": "0", //"border": "solid 5px green" - }); }); + +// console.log($('.topic_list-narrow').slick('slickGetOption','autoplay')); + + $('.topic_list-narrow').css({ + "opacity" : 1, + "transition": "opacity 2s ease-in", + "-moz-transition": "opacity 2s ease-in", + "-webkit-transition": "opacity 2s ease-in", + "-o-transition": "opacity 2s ease-in" + }); + $('.topic_list-narrow').slick('slickGoTo', 0); + + }); + } var browserWidth = $win.width(); diff --git a/theme.toml b/theme.toml index bf97b456f4bfc20dd26405788e339f3056513a21..e2b7f73596127e134f982bebca5804673355b316 100644 --- a/theme.toml +++ b/theme.toml @@ -1,21 +1,15 @@ # theme.toml template for a Hugo theme # See https://github.com/gohugoio/hugoThemes#themetoml for an example -name = "Cns_hp_theme" -license = "MIT" -licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE" -description = "" -homepage = "http://example.com/" -tags = [] -features = [] -min_version = "0.41" +name = "White Cabinet" +license = "BSD 3-clause" +licenselink = "https://github.com/cns-netadmin/white-cabinet/master/LICENSE" +description = "Hugo theme adaptable to any content, from an institute website to a personal blog." +homepage = "https://www.cns.s.u-tokyo.ac.jp/white_cabinet/" +tags = ["blog","responsive","multilingual","mobile","white","business","Google analytics","Customizable"] +features = ["responsive","multilingual","mobile","Google analytics"] +min_version = "0.61" [author] - name = "" - homepage = "" - -# If porting an existing theme -[original] - name = "" - homepage = "" - repo = "" + name = "CNS, the Univ. of Tokyo" + homepage = "https://www.cns.s.u-tokyo.ac.jp/"